Programming.a.baby - (Css) Body Style
By pol1ce
Css - Article 4
About this Article
Hello there and, like i promised, here we are to learn how to give a style to your Html document.
With this tutorial I'm writing here you can change all your web pages with only one touch.
Is important you also follow the three Previous articles (please follow the links at the bottom of this page) about Css that i wrote, they are easy to learn, and will give you a bigger practice.
One way or the other i always repeat some steps to make my articles easy to understand, so lets begin the work.
What you need
- Open your Notepad or your Html Editor
- You need to be able to see the extensions of the files you are creating with the notepad (example: document.txt), if not, go to Windows Explorer --» Folder Options --» View --» unlock "hide extension for know file types"
- Find a small .jpg image and rename it to image1.jpg to be placed in the same folder or local as your Html and Css documents
Create Html Page
Create a Html page (web page) with the follow or equivalent:
- Create the Html Head and Body
- In the Head you give a Title and Link to a File named "style.css" that we will create next
- In the body create 4 Layers "div"
- Inside the first Layer you create a image (for the logotype)
- For each of the 4 layers you will give the same class (class="myclass")
- For each of the 4 Layers and the Image you will give a different ID (id="div1..")
- Inside each layer, write some text
You can use the Html code I'm providing you here, but please take some time to watch and understand it, is not complicated.
Html Code
<html> <head> <title>My Title</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="myclass" id="div1"> <img id="image1" src="image1.jpg" alt="myimage" /> Some Text here </div> <div class="myclass" id="div2"> Some Text here </div> <div class="myclass" id="div3"> Some Text here </div> <div class="myclass" id="div4"> Some Text here </div> </body> </html>
Create Css document
Now let us create the Css document:
- With your Notepad create a pure text document and rename it to style.css, this way, your Html document will link to it
- Create the element "body" so we can work with it later
- Create the Class "myclass"
- Create the ID "image1"
- Create the IDs for the 4 Layers "div..."
Take a look on the Css Code Sample 1.1
Css Code Sample 1.1
body {
}
.myclass {
}
#image1 {
}
#div1 {
}
#div2 {
}
#div3 {
}
#div4 {
}Some Notes
See the difference between the Css elements?
- Classes start with "."
- IDs with "#"
- And general Body Elements like Body, H1, H2...etc, don't need to start with anything
Now let us use the Css document that we made, and give some style to it, in a way that will changes every Html page that Links to it, like the Html page we already made (Take a look on the Link element inside the head element of your Html page)
Css Code Sample 1.2
body {
background-color:yellow;
color:white;
font-family:verdana;
font-size:12px;
}
.myclass {
background-color:black;
border:1px gray solid;
margin:20px;
padding:10px;
}
#image1 {
float:right;
border:0px;
width:auto;
height:150px;
}
#div1 {
height:150px;
}
#div2 {
height:50px;
text-align:center;
font-size:20px;
color:red;
}
#div3 {
min-height:200px;
}
#div4 {
height:50px;
text-align:center;
font-size:11px;
color:silver;
}Result of Body Style
If you follow all my indications, then the result you will have will be equal to the "Image of the Result" at the bottom.
Take a look at it
Image of the Result
Next Article »»»
.
We will talk about Floating Objects in my next CSS article!
.
Other Article Series that you may like
- Programming.a.baby - (WebDesign) Create a Web Page
You want to create a Web Page You do not know how to make one You don't have an editor Making a simple Web Page is not difficult, but would requires experience if you want to make something more complex... - Programming.a.baby - (Html5) Web Page structure
You may already know: How to create an Web page file with notepad or an Html editor How to work with shortcut keys inside text documents If not, just click one of the links above and then return here to... - Programming.a.baby - (Html5) Body Style
When you make some simple Html document Web Page, is only a white paper with some black text with no paragraphs, measured spaces...etc Abbreviating, is a no style Web Page, is sad. So we will need to... - Programming.a.baby - (Asp) what is
Asp means
My Other Css Articles
- 3) Programming.a.baby - (Css) Object Position
Hi again (i think) Are you prepared for a new Css Lesson? (yeahhhh ;) ) Remember my last Article ? Programming.a.baby - (Css) My first Css Doc , in that article i already explained you how to build a Css... - 2) Programming.a.baby - (Css) My first Css Doc
This article is for people that: already read my previous article ( Programming.a.baby - (Css) Doc Including in Html) Or people that know how to make some styling within Html But i prefer to... - 1) Programming.a.baby - (Css) Doc Including in Html
CSS means Cascading Style Sheets CSS is from far, the best way to style your Html Document, a very organized Code Language that transform completely any web page. In this Article i will tell you how to...
Comments
best hub .my favourite
Hello Dovay Lee, nice to see you here and thank you for commenting my Hub
Thank ou very much "imranhaider", i'm glad you like it, i try to write the code and explanation in a way that people will learn it easy, everyone has the right to know how to do what.
Thank you for the comment.
Thanks for sharing this useful information about program languages , i rated this hub useful.
Hello ImChemist and thank you for the comment and the vote, i realy apreciate, and i will return it back
Dovay Lee 15 months ago
It is a little difficult for me to understand it,but I do appreciate what you write.