In my last article, I got a little into the basics of CSS, and how to link many web pages to a single CSS file. To recap, we added this to the XHTML web page, in the ‘head’ section:

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

and in the css file that is referenced, I was turning the text red whenever it was inside ‘p’ tags:

p {
color: red;
}

Pretty useless, but it demonstrates that by using CSS I was able to style several parts of the page with a single line in the CSS file. Let’s do something a little more useful with the CSS file, and find out what the ‘cascading’ in Cascading Style Sheets means.

So I’ve got my CSS file, and I’m just going to delete the contents. When I’ve got an empty CSS file, I need to decide how I’m going to want to style the different parts of my web site. Since I’m making a master CSS file for the entire site, I’ll want to make sure it looks pretty on the entire site, not just on the front page, order form, etc.

So let’s start out with a fake site that sells transportation items, and pseudo-code the layout:

• We Roll U Transportation Shop website
• Home page with company news
• Cycles
• Unicycles
• Bicycles
• Footwear
• Rollerblades
• Old-school roller skates
• Contact Us

OK, I’m going to stop there, becaue I don’t want to make this too complex.

Now I would recommend either bookmarking a site or buying a book that has an index of all the CSS commands available. There are a lot of them. I’ll just do a couple:

1. Make the background of the entire pages black
2. Make any ‘h1′ items yellow
3. Underline any ‘h1′ items with a yellow dotted-line (like a road stripe, get it?)
4. Make any other text white so I can read it.
5. Underline any ‘h2′ items with a solid white line

The first thing I need to do is make sure I know what components of the page I’m dealing with here. Items 2, 3 and 5 are pretty obvious. For 1 and 4, I’ll use the ‘body’ tag for my background assignment. That will set a default of black background and white text, unless specified otherwise like in my ‘h1′ tags.

This brings up an important point. My text is inside of the ‘p’ tags, not sitting inside of the ‘body’ tags, so how can the body tags format my text? Welcome to inheritance. Any CSS setting you make to any tag gets automatically filtered down to any other tags that are inside of that one. So for example, if I define a setting in my body tag in the following example, it gets applied to the h1 and p text:

Heading

text

This is how the browser sees the code, and when you look at it this way, you can see how a CSS setting for ‘body’ would also affect h1 and p. Let’s fire up the W3C CSS Spec and see what settings we need to turn the background black and the text white in ‘body’

By looking up the Background Properties specification, I can see that there are many options. The one I want is called ‘background-color’, so I’ll add that as the first entry in my CSS file:

body {
background-color: black;
}

Good. But I also want to specify a text color, so again I turn to the ‘colors and backgrounds’ section of the W3C spec and find the value. This one is fairly obvious, but note that I’ve already defined a ‘body’ section, so I can just add the new setting:

body {
background-color: black;
color: white;
}

Cool! OK, since all of the pages are linked to this style sheet, the entire site is now back with white text, just with those two settings. And because of inheritance, all of the text is white, h1’s, h2’s, text…everything. Now we have to go back in and make the yellow h1’s with the line, and over-ride the ‘body’ color setting. The color is easy, but the line underneath is a little more complex.

Something to understand about CSS is that it regards everything as having a box around it, just like an html table’s ‘td’ tag. Images, text blocks, h1’s, etc. Everything has a box tightly wrapped around it, with no padding on the inside of the box.

You’ve seen this before when a blue border gets put on a hyperlinked image. Except the borders around everything in XHTML/CSS are invisible. What I want to do is just show the bottom line of the box around all of the h1’s by turning it yellow, make it a little thicker than the default, and add some padding so it’s not touching the text. Oh, and turn the text yellow too.

Note that I don’t need to specify the background color, it’s being inherited from the ‘body’ tag, because my h1 tags are inside my ‘body’ tags.
Sounds hard, but with the W3C’s reference guide, it’s not too bad, once you find all of the elements you need.:

body {
color: white; /* This will define the text color for all text on this page */
background-color: black;
}

h1 { /* Cool dotted-line effect */
color: yellow;
border-bottom-color: yellow;
border-bottom-width: thick;
border-bottom-style: dashed;
padding-bottom: 10px;
}

h2 { /* Underlining the h2’s… text color was inherited from the ‘body’ specification, since h2 is inside ‘body’ */
text-decoration: underline;
}

Sweet!

Looks like it’s all working like I planned. But what happens when I want to format, say, a single word inside of some ‘p’ tags? Welcome to ‘div’ and ’span’, and we’ll talk about them tomorrow.

Oh, and we’ll also make some more style sheets for the separate sections of the Trasportation site, and watch as they cascade through each other…!

Related: