May 26th, 2005 
[Article] kiswa's Article Part 3: Styling With CSS
Using CSS is Better With Semantic Markup!
Once again, let??s see the code we??re working with:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
</head><body>
<div id="header">
<h1>This is the Page Title</h1>
</div><div id="nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div><div id="main_text">
<h3>Paragraph Title</h3>
<p>This is some filler text... This is some filler text... This is some filler text...
<br />This is some filler text... </p>
<h3>Paragraph Title</h3>
<p>This is some filler text... This is some filler text... This is some filler text...
<br />This is some filler text... </p>
</div><div id="footer">
<p>Copyright 2005 All Rights Reserved.</p>
</div></body>
</html>
If you make this an HTML file, you will find that it validates as XHTML 1.0 Strict. No surprise there, eh?
Now, we will see why it??s easier to style a valid document! You have several options for where your styles can be kept. There are three types of styling: inline, header (which is really a type of inline style), and external. CSS is inherited, so you??ll want to know the order of importance. Your external style sheet would be given the first look for the style of the page. If a header style changes any of the external styles, it takes priority. And if an inline style changes either of the previously defined styles, it takes priority.
Okay, now that we??ve got that out of the way, let??s talk about which to use and why. The best is external, as it allows your entire presentation to be separate from the content (the whole point of writing semantic, standards compliant markup) and allows you to alter the look of your entire site by changing one file (or just a few anyway). Header styling is okay, since you??ll at least be able to modify an entire page by changing only one area of the document. Inline styling should be kept to things you don??t ever think you??ll need to alter, usually things that will only appear once and therefore don??t merit a separate style.
There are a few levels of styling within a .css file (I??m going to focus on external styling, because it??s generally preferable). You have basic all-around styling (styles that apply to all instances of certain tags), then there are id??s (styles that occur only once in your document), and finally, classes (styles that do not necessarily apply to certain tags, but that need to occur more than once).
First, we need to add a line to our document, within the <head> tag, to include our style sheet. Just add this line:
Code:<link rel="stylesheet" type="text/css" href="teststyle.css" media="screen" />
This will include the file teststyle.css and apply it to any browser that accesses our page using a screen to view it (basically, a computer). There are other media types you can set style sheets for, including ??all?, ??print?, ??aural?, ??braille?, and others. Take a look here to see all the possibilities. We??re going to be focusing on ??screen? since this is intended for a website, but I always try to include a ??print? stylesheet so when someone wants to print a page from one of my sites, they won??t get the unnecessary things on the page on their printout (like the navigation and any ads).
Now, for an example: take a look at this image to see how this page could be styled. The css used for that can be found here. That??s a pretty big difference from this isn??t it?
If you look through the .css file, you will see that the comments in the file cover just about everything. Basically, you want to prepare the document for your styles (so the various default browser styles won??t mess up your styling), then setup the basic styling, followed by the one-time use styles (ids), and finally, the general-use styles (classes).
Now, I??m sure there are better ways to accomplish this CSS layout. However, this works. Generally, people would add at least one container div to hold all the separate content divs which allows you to make what I did a little easier. But I wanted to show you what could be done with only the code I had already given.
What??s Your Point?
Well, since the document has been written to be standards compliant, it can be viewed from many various devices without problem. And because we use an external stylesheet (and we can add more for specific display methods) we can change the look of the entire site very easily. So, go learn about CSS and styling your documents while keeping presentation separate from content. This will make your information available to as many people as possible, on as many devices as possible.
And just to show how simple a change can be? here??s the same code, with different CSS. This is the exact same XHTML code, just different CSS. For an even better example of this, take a look at The CSS Zen Garden!
Thanks,
kiswa
___________________
www.kiswa.com
My attempt at articles for Neverside CodeBase: Part 1 Part 2 Part 3
(. )v( ) <- The Webstandards Owl
Last edited by kiswa, May 26th, 2005 03:30 PM (Edited 1 times)
(I used to build sites with nestled tables b4)
