Now that you understand the basics of XHTML and how to use DOCTYPES, divs, spans and attributes you’re ready for an introduction to CSS.
CSS stands for Cascading Style Sheets and is a language that describes how an XHTML document should be displayed.
CSS can be used 3 ways. It can be a separate file with a .css extension, it can be code between <style> tags in the head of an XHTML document, and it can be written inside an XHTML tag (this is called “inline”).
Each of the above 3 options are perfectly valid and no matter which option you use the actual CSS is always the same. 99% of the time you’ll be making a separate .css file. With a separate file you can attach it to any XHTML page and if anything needs to change you only have to change it once, in the .css file.
Let’s get into some actual CSS code. We’ll start with a linked .css file because that’s the way you’ll do it most often. Here’s how you link a CSS file from an XHTML document.
In the <head> section of your XHTML document add a link to your style sheet.
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
“Rel” is the relationship of the document you are linking to, in this case it is the style sheet. “Type” is the type of document you are linking to, in this case it will contain text and css. “Href” is the location of the file you are referencing. “Media” is the type of media you would like your style sheet to format your XHTML document for. We’ll get more into the media type a little later, just leave it as “screen” for now.
Here’s the code from my last XHTML tutorial with the style sheet link in the head:
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”stylesheet.css” media=”screen” />
</head>
<body>
<div id=”header”>
<h1>Idiot Banter</h1>
<h2>A blog about Stuff and Things</h2>
<ul>
<li><a href=”/blog”>Blog</a></li>
<li><a href=”/about”>About</a></li>
</ul>
</div>
<h3>The Blog Post Title</h3>
<p>This is our blog paragraph and I think it’s pretty great.</p>
<dl>
<dt>Posted By:</dt>
<dd>Matt</dd>
<dt>Posted On:</dt>
<dd>Tuesday, August 14th, 2007</dd>
</dl>
<body>
<html>
Let’s write some CSS!
Create a blank file in Dreamweaver, Notepad or TextEdit, copy the XHTML code above and paste it in, save the file as index.html.
Create a blank file in Dreamweaver, Notepad or TextEdit and save it as “stylesheet.css” in the same folder as your index.html file. Everything we do from now on will happen in stylesheet.css but you’ll see your changes in the index.html file. Open index.html in Firefox, open stylesheet.css in the editor of your choice (Dreamweaver, Notepad, TextEdit, BBEdit etc….) and let’s get started.
In stylesheet.css type:
body {
background-color: #071C2D;
}
Save it and refresh (F5) your index.html file in Firefox. If the background is dark blue you did it, you wrote your first bit of CSS! Nice! Imagine you had this style sheet linked to every page on a giant website. In the minute it took you to change that background colour using a style sheet you would have just updated the background colour throughout your entire website. Much better than updating all 100 pages separately.
Here’s how CSS works. The first part (”body”) is a selector. You’ve selected the body tag which surrounds the entire website. The second part “background-color” is a property and “#071C2D” is a property value, in this case it’s a hexadecimal colour code for a shade of dark blue. So you basically said “Make the background colour of the body dark blue”. Notice that all properties for each selector are surrounded by {}, each property is followed by :, and each property value is followed by ;. For example: selector { property: propertyValue;}.
Here are a few styles to add to your style sheet that will make this little fake blog we have look a lot fancier. I won’t explain each one but feel free to experiment with your own colours and leave a comment if you run into any problems.
body {
margin: 0;
padding: 0;
background-color: #071c2d;
color: #cbcaca;
font-size: small;
}
h1 {
color: #aedc3a;
}
h2 {
color: #ffffff;
}
Paste that into your stylesheet.css file, save it, refresh index.html in Firefox and see what you get. Not bad. Play around with that to get a feel for how CSS works.
Basic CSS is pretty simple. If you link to the style sheet properly and stick to the “selector { property: propertyValue;}” rules, you’re on your way. This is just the tip of the ice berg, from here we will cover more complicated selectors, more properties and get into the cascade and how to use it to your advantage.