QUICK TUTORIAL - Suggestions for an organized approach to a page designed with CSS positioning
Start with Sections, using the "id" selector (#)
#container {
position:absolute;
width: 780px;
margin: 0 auto;
}
This will create a centered wrapper or container for the rest of the content. It's the "margin: 0 auto;" that makes it centered, but you must also specify a width for it to work.
Inside the HTML, put this:
<div id="container">
This contains all the other sections
- header
- left
- center
- right
- footer
</div><!-- container div ends here -->
#header {
height: 80px;
width: 780px;
}
This will place a box for a header across the top of the page.
Inside the HTML, put this:
<div id="header">
This is the header content
</div><!-- header div ends here -->
float: left
width: 200px;
margin-right: 1px;
padding: 10px;
}
This will create a column on the left. The float: left causes the other two columns (center and right) to line up across the top. The extra pixel margin helps squeeze the columns together.
Inside the HTML, put this:
<div id="left">
This is the left content
</div><!-- left div ends here -->
float: left
width: 378px;
margin-right: 1px;
padding: 10px;
}
This will create a column in the middle. The float: left causes the other two columns (center and right) to line up across the top. The extra pixel margin helps squeeze the columns together.
Inside the HTML, put this:
<div id="center">
This is the center content
</div><!-- center div ends here -->
float: left
width: 200px;
padding: 10px;
}
This will create a column on the right. No extra margin pixel here.
Inside the HTML, put this:
<div id="right">
This is the right content
</div><!-- right div ends here -->
#footer {
height: 80px;
width: 780px;
}
This will place a box for a footer across the bottom of the page.
Inside the HTML, put this:
<div id="header">
This is the header content
</div><!-- header div ends here -->
You will notice if you do this with background colors or images, that after you start adding content to all three columns, that the columns don't extend all the way to the bottom, as they would if you were using a table for layout, not even if you say "height: 100%". The solution is to put a background image in the container that has colors or images for the columns. Here is an example:
Continue with sizing your text using the "type" or "element" selector (the tag - p a h1 h2 ul li etc.)
#header h1 {
font: bold 1.3em Georgia, "Times New Roman",serif;
}
This shows the shorthand for setting font sizes. Otherwise, you would put this
#header h1 {
font-family: Georgia, "Times New Roman",serif;
font-weight: bold;
font-size: 1.3em;
}
Inside the HTML, put this:
<h1>
This is the header
</h1>
#left a {
font: normal .8em Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
#left p {
font: normal .8em Verdana, Arial, Helvetica, sans-serif;
}
Here I've set the style for all links and for all text inside paragraphs, but only for the left section.
Inside the HTML, put this:
<a href="mypage.htm" >
Go to mypage
</a><p>
This is content in a paragraph
</p>
Note that you can put all sorts of fancy backgrounds, borders, margin and padding in these style declarations as well. I've left them out for brevity.
#center a {
font: normal .9em "MS Trebuchet", Verdana, Arial;
text-decoration: none;
}
#center p {
font: normal .9em "MS Trebuchet", Verdana, Arial;
}
#center ul {
margin: 0px 12px 0px 12px;
}
#center li {
font: normal .9em "MS Trebuchet", Verdana, Arial;
}
I can set a different type face, size and color for the center section.
This far, we have changed the way certain tags look inside different sections.
Be sure that you understand that when you change a tag (element) you are changing the default style of that tag (element). The default for normal text is
normal 1em "Times New Roman"
and the default for the <a> tag is
font: normal 1em "Times New Roman";
color: #0000FF;
text-decoration: underline;
You don't need to set anything that is already there by default.
#center h1, h2, h3, h4{
font-family: "MS Trebuchet",
color: #333333;
}
You can double up on setting many elements at once if they should all have the same style. Just separate them by commas.
#center li a {
color: #666666;
}
If you do not include commas, it means "this style affects the right-most thing when it is inside the thing to its left, when that is inside the thing to its left.
This particular style declaration means that any link (a) in a list (li) in the center section will be medium grey.
Inside the HTML, put this:
<div id="center">
<ul>
<li>
<a href="mypage.htm" >Go to mypage</a>
</li>
</ul>
</div>
#right a {
font: normal .8em Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
#right p {
font: normal .8em Verdana, Arial, Helvetica, sans-serif;
}
Here I've set the style for all links and for all text inside paragraphs, but only for the left section.
Inside the HTML, put this:
<a href="mypage.htm" >
Go to mypage
</a><p>
This is content in a paragraph
</p>
Next, use a "pseudo class" to create a rollover
#right a {
font: normal .8em Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
#right a:hover {
text-decoration: underline;
}
The pseudo class "hover" is used here to add back the underline we took away when we defined the element "a" within the right section as having "text-decoration: none".
You only need to declare the styles that are different between the "a" and the "a:hover".
Note: if you use "a:link" you must also use all the others - a:visited, a:active, a:hover. You may find them useful. I do not, and prefer the simplicity of being able to use just "a" and "a:hover".
If you do want to use them, I absolutely recommend you read and understand
this page first:
http://www.westciv.com/style_master/academy/
css_tutorial/selectors/p_class_selectors.html
As you will learn there, linking pseudoclasses must be declared in the following order or the browser will not necessarily do what you expect:
a{}
a:link {}
a:visited {}
a:hover {}
a:active {}
Next, add some class, using the "class" selector (.)
#center .alert {
font: normal .9em "MS Trebuchet", Verdana, Arial;
text-decoration: none;
color:#CC3300;
}
Here I've set up a class called "alert" which turns text red-orange.
Inside the HTML, put this:
<a href="mypage.htm" class="alert">
Go to mypage NOW!
</a>
In the stylesheet, because it's within the #center div, "alert" won't work in the header, left, right, or footer.
#center .question {
font: bold .9em "MS Trebuchet", Verdana, Arial;
}
Here I've set up a class called "question" which bolds any text I mark as "question."
Inside the HTML, put this:
<p class="question">
How many software developers does it take to change a lightbulb?
</p>
In the stylesheet, because it's within the #center div, "alert" won't work in the header, left, right, or footer.
#center .answer {
font: italic .9em "MS Trebuchet", Verdana, Arial;
}
Here I've set up a class called "answer" which italicizes any text I mark as "answer."
Inside the HTML, put this:
<p class="answer">
None, that's a hardware issue.
</p>
In the stylesheet, because it's within the #center div, "alert" won't work in the header, left, right, or footer.
And finally, add some real class to a pseudo class.
#right a.article_link {
font: bold 1em Verdana, Arial, helvetica, sans-serif;
color: #003366;
text-decoration: none;
}
#right a.article_link:hover {
font: bold 1em Verdana, Arial, helvetica, sans-serif;
color: #3399CC;
text-decoration: underline;
}
Here we have specified that a link of class "article_link" will turn light blue and gain an underline when it is moused over.
Inside the HTML, put this:
<a href="mythoughts.htm" class="article_link">
For further reading, see my article...
</a>
In the stylesheet, put the class first, and the pseudo class second. (One dot before two dots.)