Russian DollsOK, so last time we got into basic use of CSS. However, at the end of the last CSS tutorial, we were only able to change blocks of text that existed inside of tags like ‘h1′, ‘h2′ and ‘p’. But let’s say that I want to have, for example, a paragraphs inside of my ‘p’ tags styled by CSS, but then have certain text styled differently with CSS?

This sounds like something you’d never run into, but it comes in handy later. Let’s take a look at my old example of how to use CSS to style XHTML 1.0, and we’ll see if we can use CSS to change only one sentance of a paragraph yellow. Here is our XHTML:

<!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” />
This is my page. There are many like it, but this one is mine.
</p>
<h2>Paragraph heading</h2>
<p>
Paragraph text
</p>
</body>
</html>

OK, and here is our CSS:

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;
}

At this point, you might be asking yourself: “Boy, I sure wish there was some kind of AJAX-y tool out there so I can do some rapid prototyping with XHTML and CSS”. Rendur.com has done exactly that! Go ahead and replace his instructional text and CSS with the XHTML and CSS listed above. (Note that the image won’t render. We don’t have one. It will just display the alternative text. This is OK for our demo purposes, or you can put in the address of an image.)

You should now be looking at my road-styled page. Before, we said that we wanted to define a tag in CSS, that when wrapped around a single sentance, would turn the sentance yellow while leaving the rest of the ‘p’ text white. To do this, we have 2 options: ‘id’ and ‘class’. They sound complicated, but they really aren’t, they’re just two ways of making your own tags to format whatever you wish.

id

The ‘id’ tag is special, in that it can only be used once per page. ‘id’ will come in handy later, when we start moving text around using CSS. Because each element has its own unique name, it’s easy to direct a single element of code and do something with it. The limitation is, of course, that you can only use it once per page. Because of this, you usually see ‘id’ being used with names like ‘header’, ’sidebar’ and ‘footer’, because these items are used only once per page.

Defining an ‘id’ in our CSS is easy. Just put a pound sign (#) and the name if the id you are defining. in this case, I will make an id called ’special’ and define the id with the property of having red text:

#special {
color: red
}

class

OK, so id is good and all, but what if I want to use it over and over on several sentances on my page? I can’t, it’s an id, so I can’t use it on my example page. But classes can be used over and over.

Classes work exactly the same way as id’s, but can be used over and over. Just think of it like this: if you have a classroom of people, and they all have an ID tag, applying CSS to them by ID is a good way to narrowly style them, but by defining a class, the style can be applied to each individual person. Let’s make a ‘cool’ class that turns text yellow:

.cool {
color: yellow
}

But how do we apply it to the text?

Well, that’s where ‘div’ and ’span’ come in. Before we get to div and span, however, it is critical that you understand how XHTML, and therefore CSS, see themselves. XHTML sees every element as a box. This is called the box model.

It really is quite simple: XHTML sees every opening tag as the top-left corner of the box, with every closing tag being the lower-right corner. (Oh, that’s why it’s so important that all the tags are closed!) Everything between the tags is inside of that box. That’s it. It’s not any more complicated than that.

When CSS gets applied, it applies itself to everything in that box. Even other boxes! What this means is that (on our example page) I have a ‘body’ box, and inside of that box are five other boxes: ‘h1′, ‘p’, ‘img’, ‘h2′ and another ‘p’. Notice that the ‘img’ tag is inside of the first ‘p’. This means that anything we apply to the first ‘p’ will apply to ‘img’, and anything we apply to ‘body’ applies to both the first ‘p’ and ‘img’. We talked more about this in the last tutorial.

Here’s where ‘div and ’span’ come in. They are both ways to apply CSS format to something, an image, text, etc.

div

The ‘div’ tag is what we call a ‘block level’ tag. Basically, it makes a new box. (Remember the box model?) Anything between the ‘div’ tags gets put into the new box. This is something to consider, because it can either make or break you, depending on whether or not you want a new box. In the case of CSS positioning, you want to use ‘div’, because it makes a nice little box you put stuff in and move around.

Of course, if I just want to turn some text yellow, like in our example here, I don’t want to use ‘div’ because it will wreck my paragraphs with its box-making goodness.

span

here’s just the tool I’m looking for. Instead of making a new box, ’span’ is like taking a highlighter to my text. Basically, ’span’ works the same way as the ‘b’ or ‘em’ tags - it just applies itself to whatever is between the ’span’ tags, and leaves the layout alone. ’span’ is what you call an inline element: it doesn’t participate in the box model like ‘p’ or ‘div’, it just sits there, making its content available for styling.

Making the magic happen

OK, so I have a class called ‘cool’. I’ve thrown away the id called ’special’, because I can’t use an id here; I’m using it more than once per page. Now all I have to do is change my text from this:

This is my page. There are many like it, but this one is mine.

to this:

<span class=”cool”>This is my page.</span> There are many like it, but this one is mine.

Looking at our test page, we can see that the white text is still being inherited from the style of the tags above it, but our little sentance is being styled according to the class we made. Nice.

At this point, we can make fully functioning id, class, div and span declarations. Next time we’ll see how this newfound knowledge will let you position the elements on the screen, and open up a whole new world of design possibilities!

One quick note before you go

Have fun playing with these, but you should know that there are things such as ’sub-ids’ and ’sub-classes’ you can use. Basically, what this means is that I can go into the CSS sheet and say, ‘OK, XHTML. I want you to turn some text red, but only when the text is inside of some h1 tags AND is specified to be the ’special’ class. Otherwise leave it alone. I would specify this as follows:

h1.special {
color: red
}

Let’s see this in action. I’m going to add that to my CSS file, and change my h1 text from this:

<h1>Hello World!</h1>

to this:

<h1 class=”special”>Hello World!</h1>

ALSO - I will change my second ‘p’ from this:

<p>
Paragraph text
</p>

to this:

<p class=”special”>
Paragraph text
</p>

Now when I go back to my demo page, the h1 title has been turned red, while the second ‘p’ is still white. That is because the CSS I entered is called ’special’, but is a sub-class of ‘h1′, not ‘p’. Therefore, the h1.special class is not available to ‘p’, only to h1. If I wanted a class available to anyone, I would just leave off the front part and call it ‘.special’.

Related: