How To Build a Web Site: Using Style Sheets

By Michael Rohde

In the first part of this series on how to build a web site, you learned how to: Develop a purpose for your site; Organize a project outline; Draw a wireframe; Organize your folder structure; and Define HTML and JavaScript.

In the second part of the series, you learned how to: Get an HTML editor; Defined the different parts of an HTML file; Wrote your first HTML code; and Started your CSS file. The third article described how to: Add additional styles to the CSS and How links work and how to style them.

In our last tutorial we learned how to create a page layout using CSS. Now we'll learn how to update the .html file to make use of the CSS we created. You may remember, last week we created the CSS to style our page...it looked like this:

H1 {text-align:left; color:black; font: normal 20pt "Arial Black"} 
H2 {text-align:left; color:black; font: italic 12pt "Verdana"} 
P {text-align:left; color:black; font: normal 10pt "Verdana"} 
A:link {color: blue; text-decoration:none} 
A:visited {color: gray; text-decoration:none} 
A:hover {text-decoration:underline} 
If we were going live with our example, we would have added styles for each section of our page, including containers, headers, footers, etc. and it would have looked like this:
container {text-align:left; color:black; font: normal 10pt "Arial Black"} 
header {text-align:left; color:black; font: italic 8pt "Verdana"} 
footer {text-align:left; color:black; font: normal 8pt "Verdana"} 
navbar {text-align:center; color:black; font: normal 8pt "Verdana"} 
Now, you'll need to open your .html file, and directly under the tag, type:
<div id="container">
<div id="header">
<h1>My Web Site</h1>
<h2>Before you know it, I'll be a pro</h2>
</div>
You might notice that you have two opening <div> tags and only one closing <div> tag. The first <div> tag is for the container for all of the content on the page, which means you need the closing <div> tag at the very end of the page. Right above the closing </body> tag, type:
</div>
It's good practice to always remember to write your closing tag whenever you write your opening tag. That way, you won't forget to add it in later. Now, add in a placeholder for your navigation:
<div id="navbar">
<p>About Us | Contact Us | Page 1 | Page 2</p>
</div> 
Don't worry about having links to these pages yet. That can be added in later after you have tested your layout. Now for the columns:
<div id="col1">
<P>
<img alt="earth (213K)" src="Images/earth.jpg" height="280" width="280" />
<p>Here's the left text.</p>
</div>
<div id="col2outer">
<div id="col2mid">
<P>Here's the center text.</p>
</div>
<div id="col2side">
<P>Here is my right-hand column text.</P>
</div>
</div>
Last, it's time to add a footer:
<div id="footer">
<p>Copyright 2010</p></div>
</div>
</div>
That's what it takes to create a three-column layout for your site. You know have styles, links and images… hmm, but something is missing… ah yes: background color. There are plenty of sites that use a plain white background, which is very acceptable and does look very nice. However, there are also plenty of other sites that have some subtle color in the background. What you won't find on current sites are solid blocks of color with square edges. In the next article, you'll learn how to use gradient colors that provide a nice blending effect.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date