Publishing System Settings Logout Login Register
Basic CSS Layout
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on July 23rd, 2005
16044 views
CSS Stylesheets
Welcome to my first full-on tutorial, and your first lesson in basic layouts using CSS.

Let me begin by telling you the advantages of using CSS:
-CSS is good for creating "liquid" layouts (layouts that expand or contract depending on the size of the users resolution)
-Keeping styles and content seperate means you can easily apply the same layout to your entire website all at once
-When using CSS effectively you can change the entire layout of the whole site just by modifying the CSS file.
-Since CSS and XHTML are the current standards, pages that adhere to these standards are guaranteed to be supported in future browsers.

Disadvantages of using CSS:
-Older browsers either dont understand it, or understand it badly (incompatibilities)
-In some instances current browsers sometimes interpret the style differently thus resulting in different results.

What you'll need for this tutorial:
-Wordpad
-Firefox and/or IE (preferably both to test for any bugs)
-Photoshop or Other Graphical Program (optional)

What you should know:
-I assume you're comfortable with HTML/XHTML
-I assume you have at least a basic understanding of CSS

In this tutorial I will be teaching how to build a simple, two column layout to get you starting in using CSS layouts.
I will be explaining the CSS taught herein to the best of my ability. So without further ado, lets get started:

<!DOCTYPE html PUBLIC
\"-//W3C//DTD XHTML 1.1//EN\"
\"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">

<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" >
<head>
<title>Introduction to CSS Layouts</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
</head>

<body>
<!--Layout Holder-->
<div id=\"container\">

<!--Layout Banner-->
<div id=\"banner\">

</div>

<!--Links Div-->
<div id=\"left\">
<div class=\"links\">

</div>
</div>

<!--Content Div-->
<div id=\"right\">
<div class=\"content\">

</div>
</div>

<div style=\"clear: both;\"> </div>
</div>
</body>
</html>


Not too complicated right? As you can see everything important is enclosed in div's,
-Container Div - Holds the entire layout
-Banner Div - Will hold the banner
-Left Div - Will hold anything we want to the left (in this case links)
-Links Div - Will hold and style the links
-Right Div - Will hold anything we want to the right (in this case content)
-Content Div - Will hold and style the content
-Clear Div - Stops the floating.

Let me explain a bit what the clear div does, basically we're going to 'float' the links to the left, and 'float' the content to the right. What the clear div does is basically tell the browser we're done floating things so it doesnt try to float anything else (sometimes causing glitches).
Follow me so far?

Now just to add some content in this pretty new layout of ours lets add some placeholder text:
(open wordpad and type or copy/paste this in)
<!DOCTYPE html PUBLIC
\"-//W3C//DTD XHTML 1.1//EN\"
\"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\">

<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" >
<head>
<title>Introduction to CSS Layouts</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
</head>

<body>
<!--Layout Holder-->
<div id=\"container\">

<!--Layout Banner-->
<div id=\"banner\">
<h3>Raenef</h3>
Introduction To CSS Layouts
</div>

<!--Links Div-->
<div id=\"left\">
<div class=\"links\">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sit amet nulla at purus adipiscing cursus. Donec tincidunt eros euismod lectus consequat accumsan. Curabitur bibendum tellus. Nullam ornare magna ac magna. Vivamus arcu lorem, lacinia vel, facilisis at, rutrum id, dolor. Suspendisse dapibus nisl quis nulla cursus commodo. Vestibulum ut tortor id tortor pellentesque laoreet. Pellentesque imperdiet odio nec purus. Nunc vestibulum massa quis mauris. Aliquam nisl metus, congue ut, vulputate eget, venenatis id, eros. Sed tempor eros. Praesent fringilla accumsan sem. Morbi eget ipsum quis felis consectetuer interdum. Vestibulum scelerisque est non purus. Aliquam eget arcu eget tortor consectetuer porta. Cras leo sapien, faucibus in, porttitor quis, accumsan vitae, wisi.
</div>
</div>

<!--Content Div-->
<div id=\"right\">
<div class=\"content\">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur sit amet nulla at purus adipiscing cursus. Donec tincidunt eros euismod lectus consequat accumsan. Curabitur bibendum tellus. Nullam ornare magna ac magna. Vivamus arcu lorem, lacinia vel, facilisis at, rutrum id, dolor. Suspendisse dapibus nisl quis nulla cursus commodo. Vestibulum ut tortor id tortor pellentesque laoreet. Pellentesque imperdiet odio nec purus. Nunc vestibulum massa quis mauris. Aliquam nisl metus, congue ut, vulputate eget, venenatis id, eros. Sed tempor eros. Praesent fringilla accumsan sem. Morbi eget ipsum quis felis consectetuer interdum. Vestibulum scelerisque est non purus. Aliquam eget arcu eget tortor consectetuer porta. Cras leo sapien, faucibus in, porttitor quis, accumsan vitae, wisi.

Morbi egestas elit eget dolor. Ut eros urna, molestie vel, rutrum at, ultricies quis, arcu. Vivamus nisl nulla, blandit venenatis, tincidunt non, sollicitudin pretium, mi. Integer ultrices, leo a convallis vehicula, elit ante porta purus, nec aliquam dui mi ut ipsum. Morbi lobortis lobortis sapien. Nunc auctor felis eget enim. Vivamus quis neque. Etiam consequat. Phasellus fringilla tristique pede. In pede. Aliquam id augue. Praesent adipiscing felis eget risus. Duis lorem lacus, ornare sed, posuere bibendum, dignissim a, arcu. Vestibulum lectus. Cras dolor ipsum, hendrerit ut, pulvinar ac, ultricies at, purus. Suspendisse sit amet felis quis eros adipiscing tincidunt.

Maecenas in turpis in metus faucibus tempor. Nunc lectus lorem, fringilla non, luctus vitae, lobortis non, enim. Duis elit metus, viverra ac, pulvinar quis, tempus a, leo. Aliquam ac sem egestas justo facilisis adipiscing. Phasellus pretium aliquam nunc. Aliquam erat volutpat. Nulla justo erat, feugiat vel, consectetuer nec, aliquam vitae, eros. Maecenas felis risus, ullamcorper quis, dictum eu, imperdiet nec, dolor. Sed eleifend eros. Praesent laoreet faucibus magna. Praesent sit amet sapien a massa ullamcorper euismod. Cras non arcu sed eros euismod malesuada. Pellentesque ut justo.

Etiam consequat pulvinar mauris. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi odio felis, pulvinar at, adipiscing ac, venenatis feugiat, tortor. Donec vel sem. Suspendisse ullamcorper faucibus nunc. Nam semper wisi convallis enim. Vivamus non nulla nec leo dapibus tincidunt. Nullam sollicitudin dapibus justo. Quisque elementum sagittis nibh. Aliquam nibh massa, rutrum eu, dictum nec, dignissim sed, mauris. Etiam arcu. Nunc libero tortor, venenatis nec, gravida vel, aliquet sed, enim. Aliquam felis lacus, feugiat at, hendrerit at, sagittis eu, nisl. Integer urna leo, tincidunt vitae, tempus at, accumsan ac, dolor. Curabitur fermentum. In laoreet bibendum enim.

Duis erat sapien, placerat a, dapibus sed, dignissim eu, diam. Nulla porttitor. Mauris a mauris ac pede sodales condimentum. Duis adipiscing, pede sit amet adipiscing rutrum, lectus felis tempus wisi, ut sagittis mi tortor sit amet pede. Nunc feugiat eros. Maecenas faucibus ornare massa. Integer pulvinar pulvinar odio. Etiam tincidunt, nulla vitae pulvinar consectetuer, dolor sapien tristique odio, eget auctor neque augue congue dolor. Nullam porttitor, mi nec feugiat vulputate, nibh velit vehicula ipsum, id consequat erat augue vel elit. Mauris vel metus id wisi tincidunt dictum. Nunc et sem et lorem hendrerit laoreet. Aliquam vel felis. Duis gravida, enim vitae sodales laoreet, augue odio dapibus leo, ut tristique metus sapien ac sem. Quisque id purus in eros eleifend eleifend. Nunc consequat vulputate lorem. Donec fringilla, massa at tempor condimentum, pede libero pharetra leo, in nonummy metus nulla sit amet purus. Sed sed ligula id ma</strong>uris mollis hendrerit. Pellentesque convallis interdum felis. Quisque pretium, quam sit amet sodales volutpat, leo urna ornare mi, eget tincidunt lectus dui vel pede.
</div>
</div>

<div style=\"clear: both;\"> </div>
</div>
</body>
</html>


(In Wordpad) Goto File >> Save As... >> Click Desktop In the Left Choices >> Type 'csstut.html' in the file name box >> change Save As Type... to "Text Document" and click save.
You should now have a csstut file on your desktop, open that with your browser to see what we have so far.

Heres an image of what our new layout looks like:
No-Style Layout

Not too exciting right? Too plain with absolutely no style whatsoever. This is where the fun of CSS starts:

Setting up your XHTML Document for CSS:
Find this in the beginning of your new XHTML document:
<head>
<title>Introduction to CSS Layouts</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
</head>


and add the following to it:
<link rel=\"stylesheet\" type=\"text/css\" href=\"main.css\" />


So that now it looks like this:
<head>
<title>Introduction to CSS Layouts</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"main.css\" />
</head>


Remember to save your work (CTRL + S)


Start a new document in wordpad (File >> New >> Choose Text Document from the Box >> click Ok)
Copy/Paste or Type this in your new document.
body{
margin-top: 0px;
text-align: center;
background-color: #E6FFE6;
}

/**Container To Hold The Layout**/
#container{
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 600px;
background-color: #BFFFBF;
border: 1px solid #ffffff;
}

/**Banner Styles**/
#banner{
height: 50px;
background-color: #60BF60;
font-family: arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding-left: 5px;
}
#banner h3{
margin: 0px;
padding: 0px;
font-size: 20px;
font-weight: normal;
}

/**Links Styles**/
#left{
width: 150px;
float: left;
}
.links{
padding: 5px 5px 0px 5px;
color: #598059;
font-family: Arial, sans-serif;
font-size: 11px;
}

/**Content Styles**/
#right{
width: 450px;
float: right;
}
.content{
padding: 5px 10px 0px 10px;
color: #598059;
text-align: justify;
font-family: Arial, sans-serif;
font-size: 11px;
}



(In Wordpad) Goto File >> Save As... >> Click Desktop In the Left Choices >> Type 'main.css' in the file name box >> change Save As Type... to "Text Document" and click save.

Now let me explain the CSS a bit so we dont get confused:
Note: I wont be explaining the styling parts such as font controls, background-colors as I said I assume you're pretty comfortable with CSS.

First we have
body{
margin: 0px 0px 20px 0px;
text-align: center;
background-color: #E6FFE6;
}

The margin-top: 0px; - means we dont want any space between the top of the browser window and our layout
Text-align: center; - Will center our #container div in internet explorer.

#container{
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 600px;
background-color: #BFFFBF;
border: 1px solid #ffffff;
}

The margin right and left both set to auto will center the layout in firefox.
The text-align: left; - will reset the text to the left within the layout (since the text-align center hack isnt needed inside the layout)
width: 600px; - is the maximum width of this particular layout.


#banner h3{
margin: 0px;
padding: 0px;
font-size: 20px;
font-weight: normal;
}

Since we used a h3 in our banner, the margin and padding are set to 0 because defaultly h3 adds extra space around it to set it apart from other text, we dont want nor need this in our banner.

#left{
width: 150px;
float: left;
}

This sets the maximum width of the left side of our layout. (150) and floats whats within the #left div to the left of the layout.

#right{
width: 450px;
float: right;
}

This sets the maximum width of the right side of our layout (450) and floats what is within the #right div to the right side of the layout.

IMPORTANT NOTE: When using this technique notice that the right width and the left width (450 + 150) equal the maximum width of the layout as defined in the #container div. (600) Any more on either side and you could run into problems.

Now for the sake of experimentation, lets say you want the left side of the layout to be 200 instead. (A 50px difference) Simply change the width: 150px; to 200px, in the #left{ part of the css and in the #container div add an extra 50px so that its now 650px;

I hope I made that clear:
As for the background colors, the font-sizes, font-faces of the link and content divs you can change those around to suit your liking.

Provided you didnt change anything our new layout should now look like this:
basic layout

Not too bad eh? You have a banner and 2 columns just as I said I'd teach you.
Now you can use these techniques on your site, and when you want a change simply change the CSS colorings, fonts, etc.

Now lets make it a little flashier, say you want to use a picture banner instead of the lettering.
Its no problem at all:
Open your xhtml document
find:
<!--Layout Banner-->
<div id=\"banner\">
<h3>Raenef</h3>
Introduction To CSS Layouts
</div>

Change it so it looks like:
<!--Layout Banner-->
<div id=\"banner\"></div>


and Save.

Now I assume you want to make a banner: notice you already know the width that the banner has to be (600px) and the height is up to you. I went with a 600px x 50px banner myself:
Once you're done creating it. Save it to your desktop as banner.png (example of what I did)

Open your CSS Document
find:
#banner{
height: 50px;
background-color: #60BF60;
font-family: arial, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding-left: 5px;
}


Change it so it looks like:
#banner{
height: 50px; /*CHANGE THIS TO THE HEIGHT OF YOUR BANNER*/
background-image: url(banner.png) !important;
background-repeat: no-repeat;
}


Notice that we took out all the padding, font-stylings because we no longer need them with no words within the banner.
Now save your css document, and open your xhtml document (csstut.html) with your browser to see how your new banner looks with your new layout.
This is what I've come up with:
finished layout

One last bit of information before I leave you:
Lets say you want your links on the right instead of the left: What to do?
Well, the links and the content are just floating in the browser right? So lets change the direction in which they float wink.gif
Open your CSS document:
Look for
#left{
width: 150px;
float: left;
}


(This is floating your links to the left)
Change it to:
#left{
width: 150px;
float: right;
}


Now find:
#right{
width: 450px;
float: right;
}


(This is floating your content to the right)
Change it to:
#right{
width: 450px;
float: left;
}


Now save the css document, and open your csstut.html in your browser to see that they have changed places with just two changes in your css, just a small example of what css can do.

Anyways thats about it, I encourage you to experiment with the look and styles. Actually add links to the links side (instead of the placeholder text), play around with the colors, well just experiment :-)
I hope I explained everything as clear as possible for your understanding.
I hope you've enjoyed my very first full-on tutorial.
Premium Publisher
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
raenef

Hello All.
I will be writing XHTML/CSS tutorials here.
I hope you enjoy my current and future work.
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top