Valid CSSLast time we got caught up on our XHTML, so now we’re ready to start playing with CSS. The easiest way I can explain CSS is this:

CSS is to web pages what tagging is to del.icio.us. What I mean by this is that I can have a generic web page, but instead of tagging the text as color=”red” by using the ‘font’ tag on every line of text, I leave the text unformatted, inside of its little XHTML ‘p’ tags, with no color specified.

Then I go up to the header of the page and tell the browser to “tag” everything in the ‘p’ tags to be the color red. Boom! With one line of code in the header, every bit of text that is in ‘p’ tags turns red, even on the longest pages.

Lets take a look of this in action. You remember our sample page from last time:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p><img xsrc=”image.gif” mce_src=”image.gif” alt=”image” /></p>
<p>
This is my page.
</p>
<h2>Paragraph heading</h2>
<p>
Paragraph text
</p>
</body>
</html>

Let’s say I want to make it so that any text in the ‘p’ tags turns red. With CSS, this is easy, and since we’re using XHTML properly, the CSS will be able to use our good code.

In the header of the page, we’ll tell the page that we’re giving it a CSS command and then put in our ‘p’ tag request:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″ />
<title>Hello World!</title>
<style type=”text/css”>

p {
color: red;
}

</style>
</head>
<body>
<h1>Hello World!</h1>
<p><img xsrc=”image.gif” mce_src=”image.gif” alt=”image” /></p>
<p>
This is my page.
</p>
<h2>Paragraph heading</h2>
<p>
Paragraph text
</p>
</body>
</html>

You’ll notice that the CSS stuff looks different. It is. It’s not HTML or XHTML, CSS has its own language. That’s right, to do this stuff you need to know 2 languages, XHTML and CSS. Since it’s nearly impossible to know all of the tags/specifications available in XHTML/CSS, I’d recommend bookmarking a few sites that have a directory of things you can do to text, images, etc with CSS, as well as all of the neat tags available to you in XHTML.

At this point, our page will automatically turn any text inside of the ‘p’ tags red. However, if we really want to use CSS efficiently, we can make a whole new file, maybe called ’style.css’, and put the ‘p’ specification in there instead. That way, no matter how many pages we have, even if we have 10,000, we can change the color (for example) of every single paragraph of text on the entire site, because all of the 10,000 pages reference our single style.css file to decide how to display ‘p’ text.

Let’s look at what we put in the ’style.css’ file:

p {
color: red;
}

simple enough…and back in our page, we’ll change the ’style section from this:

<style type=”text/css”>

p {
color: red;
}

</style>

to this:

<link rel=”stylesheet” type=”text/css” xhref=”style.css” mce_href=”style.css” />

Now our ‘Hello World’ page, and an unlimited number of other pages, are linked to a single stylesheet file. One change in the stylesheet file, and all pf the pages that link to it will automatically show the changes.

Cool!

Next time, I’ll get a little more into intermediate-level CSS. Until then, have fun, and get each like-designed group of your pages linking to a central CSS file! While you’re at it, you can have the W3C double-check your CSS code to make sure it’s compliant with the standard, too.

Related: