Web Page Layout with Cascading Style Sheets- Page 3

Dated: 28 June, 2007
Author: Jason Gonzalez

The final and most important steps in our tutorial are to apply a style sheet with style rules to our html layout. Because this is a simple example, we will create an embedded style sheet inside of the <head> tags.

Place a <style> declaration within the <head> tag, as follows:

<?xml version="1.0" encoding="UTF-8"?>        
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">

<head>
<title>CSS layout tutorial 01</title>
<style type="text/css">
<!--
    
--> 
</style>
</head>

Then we place the style rules for our "titlebar":

<!--
#titlebar {
/* make this float to the left side */
float : left;
/* margin and padding on each div must be set to 0 */
/* to work as intended */
margin : 0px;
padding : 0px;
/* and add some color */
background-color : #6699FF;
/* width of titlebar must be 100% */
width : 100%;
}

#titlebar a {
/* put padding around our links in a separate style rule */
padding : 6px;
}
-->

If you preview the html file in a browser right now, it will look like a jumbled mess, with the titlebar floating left and everything else wrapping around it. We will continue by floating the left navigational panel left.

Use float property to float "leftnav". Type this directly below the previous style rule but outside of the closing curly brace
1. ```
#leftnav {
float : left;
margin : 0px;
padding : 0px;
background-color : #99CCCC;
width : 25%;
height : 400px;
}
```

...And the "content" panel:

#content {
float : left;
margin : 0px;
padding : 0px;
background-color: #CCFFCC;
width : 75%;
height : 400px;
}

Okay, now preview this in a browser. You may notice that the paragraph text and headings are pushed up against the left edges, but if we apply margins and padding to the <div> tags, we lose our layout. The trick is to apply margins to each paragraph and heading.

Put margins around the paragraphs and heading in our content and leftnav divs (type each below their style rules):

#leftnav h3 {
margin-left : 3%;
}

#content p {
margin-left : 5%;
margin-right : 5%;
}

#content h3 {
margin-left : 3%;
}

Finally, preview the finished product in a browser. And that's it. You have created a standards compliant layout!

Previous Page Home

JGPWS's Tutorials can be found at the following locations:

JGPWS Tutorials uses ads on some pages. For more information, see our Privacy Policy page.

[List of marks used, with 'Adobe' first, if used, followed by other Adobe marks used, in alphabetical order] are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Back to: JGPWS index page