Olive Green Walls
If you’re a Web developer, you’ve probably heard people speaking of CSS, or Cascading Style Sheets, in glowing terms…you may even have spoken of it yourself. By allowing developers to separate graphical elements from program code, CSS makes it possible to simply and rapidly adjust the look of a Web site, or make changes to the overall colour scheme and formatting of a Web page.
With a little thinking, it’s possible to design a site in such a manner that the entire colour scheme of the site can be quickly changed from olive green to slate grey and back again with just a few simple alterations to a single file.
Sounds fantastic? It is…and over the next few pages, this primer will attempt to teach you the basics of CSS - a few simple concepts, a look at style rules and definitions, and an explanation of the important properties you need to know to fully utilize the power of this technology.
Read on!
Into The Light
Let’s start off with a simple example. Consider this HTML page:
<HTML>
<HEAD>
</HEAD>
<BODY>
Q. How many <B>developers</B> does it take to change a <B>light bulb</B>?
<P>
A. The light bulb works <B>fine</B> on the <B>system in my office...</B>
</BODY>
</HTML>
As you can see, certain words in the text above have been emphasized in bold. Now, let’s suppose that you also wanted to change the text colour of these emphasized words…to green, maybe? Normally, you’d do something like this:
<HTML>
<HEAD>
</HEAD>
<BODY>
Q. How many <B><FONT COLOR="Lime">developers</FONT></B> does it take to change a <B><FONT COLOR="Lime">light bulb</FONT></B>?
<P>
A. The light bulb works <B><FONT COLOR="Lime">fine</FONT></B> on the <B><FONT COLOR="Lime">system in my office...</FONT></B>
</BODY>
</HTML>
Imagine, then, how much simpler it would be if you could just use a style sheet.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
B {color: lime}
</STYLE>
</HEAD>
<BODY>
Q. How many <B>developers</B> does it take to change a <B>light bulb</B>?
<P>
A. The light bulb works <B>fine</B> on the <B>system in my office...</B>
</BODY>
</HTML>
The two examples will look identical when you view them in a browser - however, the second one has the distinct advantage of being much easier to read. Take it one step further - if you suddenly wake up in the middle of the night with visions of the colour #CC6633 dancing in your mind, the second example allows you to change the colour of all emphasized words in one fell swoop. Take a look.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
B {color: #CC6633}
</STYLE>
</HEAD>
<BODY>
Q. How many <B>developers</B> does it take to change a <B>light bulb</B>?
<P>
A. The light bulb works <B>fine</B> on the <B>system in my office...</B>
</BODY>
</HTML>
Thus, by separating design from code, style sheets can substantially reduce the amount of time you spend making changes to your site…which, when you come to think about it, is exactly the way it should be.
Ground Rules
Now that you’ve seen the power of style sheets in action, let’s get down and dirty with some basic concepts. In the example above, the line
B {color: lime}
is known as a “style rule”, which consists of two basic elements - a “selector” and a “declaration”.
A “selector” is usually an HTML tag [B, in this case],while the “declaration” is one or more CSS name-value pairs that indicate the type of formatting to be applied to the selector. This declaration is always enclosed in curly braces, and different name-value pairs are separated from each other by semi-colons. For example,
B {color: lime; text-decoration: underline; font-family: Arial}
is a perfectly valid style rule
The CSS specification lays down definitions for more than sixty keywords, and you’re going to learn all the important ones during the course of this tutorial.
Selectors can also be grouped together, as in the following example, which turns all H1, H2, and H3 text white:
H1 H2 H3 {color: white} /* this rule turns H1, H2 and H3 blocks white */
Note that you can also include comments within your style block, as demonstrated above.
The most common method of including a set of style rules in an HTML document is via the <STYLE> tag. The <STYLE> tag usually appears within the <HEAD> of your HTML document, and looks something like this:
<HEAD>
<STYLE TYPE="text/css">
...style rules go here...
</STYLE>
</HEAD>
If you take a look at the examples above, you’ll see that this is the method used. Style rules defined in such a manner will apply to the current document only…which creates a problem if you’d like to apply styles across a series of Web pages. Not to worry…a solution is at hand!
Write Once, Link Often
One of the most ingenious aspects of CSS technology - and one of the primary reasons I like using it so much - is that it allows developers to define a single “global” style sheet and apply the rules in that sheet to all the HTML documents on a Web site.
The obvious advantage here, of course, is that if you need to make a simple change, you need only edit a single file, and the change will be reflected in all the HTML documents linked to that style sheet. I’ve found this to be a life-saver on numerous occasions, the most memorable one being a Saturday night date I was running late for…
I’m digressing again. Sorry about that.
Back to the matter at hand. Let’s suppose that you have a global style sheet called “global.css” located on your server at “http://www.somewhere.com/global.css”. To link the style rules in that document to a specific HTML document, simply include this code within the <HEAD> of your HTML document, like this,
<HEAD>
<LINK REL="stylesheet" HREF="http://www.somewhere.com/global.css" TYPE="text/css">
</HEAD>
and all the style definitions from “global.css” will be automatically applied to your HTML file.
You could also “import” a style sheet with the @import keyword, as in the following example:
<STYLE TYPE="text/css">
@import url(http://www.somewhere.com/global.css);
P {color: yellow}
</STYLE>
You can also apply styles on a case-by-case basis, by adding the STYLE attribute to the HTML code itself. For example:
<HTML>
<HEAD>
</HEAD>
<BODY>
Q. How many <B STYLE="color: lime; background-color: black">developers</B> does it take to change a <B STYLE="color: lime; background-color: black">light bulb</B>?
<P>
A. The light bulb works <B STYLE="color: lime; background-color: black">fine</B> on the <B STYLE="color: lime; background-color: black">system in my office...</B>
</BODY>
</HTML>
See?
More Pseudo-Gibberish
Next on the basic concept list: inheritance, classes, pseudo-classes and contextual selectors. Let’s take them one by one.
- Inheritance: Inheritance basically means that HTML elements which lack a specific style rule will inherit the style rules of the elements they are enclosed within. For example, consider this snippet of code:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
B {color: red}
</STYLE>
</HEAD>
<BODY>
<B>
Q. How many <FONT SIZE="+1">psychiatrists</FONT> does it take to change a lightbulb?
<P>
A. Only one, but the lighbulb has to want to change.
</B>
</BODY>
</HTML>
In this case, the <B> tag has a color defined in the style sheet, while the <FONT> tag doesn’t have any style rule defined for it. Since the <FONT> tag is enclosed within the <B> tags, it inherits the style rule defined for the <B> tag - in this case, the colour red.
- Classes: CSS also allows you to group elements together in “classes” and apply a style rule to that class. For example,
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {color: red}
.answer {color: blue}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many psychiatrists does it take to change a lightbulb?
<P CLASS="answer">
A. Only one, but the lighbulb has to <FONT CLASS="question">want</FONT> to change.
</BODY>
</HTML>
In this case, we’ve defined two classes, “question” and “answer”, with appropriate style rules for each (note the manner of their definition within the <STYLE> tags, and the period prefix). Next, we’ve invoked the appropriate style rules by adding the CLASS attribute to the HTML tags within the body of the document.
All the text within tags which are marked as part of the class named “question” will appear in red, while all the text within the “answer” class will appear in blue.
Thus, CSS gives you a simple and elegant way to group otherwise unrelated tags together, and apply a common style rule to them
- Pseudo-classes: Unlike what the name suggests, these are actually pre-defined classes for certain HTML tags. The most well-known of these are the pseudo-classes defined for the anchor element A - it comes with the following pre-defined classes:
A:link - refers to all hyperlinks within the document A:visited - refers to all visited hyperlinks within the document A:active - refers to the last hyperlink selected within the document A:hover - refers to the hyperlink your mouse pointer is currently hovering over
By using these pseudo-classes, it’s possible to change the default colour of active, visited and unvisited hyperlinks within the document.
- Contextual selectors: Contextual selectors are a lot like conditional statements - the style declarations that follow them are invoked only when certain conditions are met. For example, suppose you’d like all bold italic text in your document to appear in blue Arial. Your contextual selector would look like this:
<HEAD>
<STYLE TYPE="text/css">
B I {color: blue; font-family: Arial} /* this selector is for all bold+italic text */
</STYLE>
</HEAD>
Go on, try it yourself. Do I look like I’m lying?
The Colour Of My Eyes
Now that all the theory’s out of the way, how about actually getting down with some of the basic CSS properties available?
First on the list is the “color” property. As you’ve seen in the examples above, this property controls the foreground colour of an HTML element, and comes in very handy when you need to change the colour of different blocks of text. The example below turns all italicized text blue.
<HEAD>
<STYLE TYPE="text/css">
I {color: blue)
</STYLE>
</HEAD>
CSS offers a number of different ways to specify the colour value here. The simplest is to use one of the sixteen pre-defined colour names available - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. You can also specify a hexadecimal colour combination by prefixing it with a #
I {color: #0000FF)
or a combination of RGB values in absolute or percentage terms, like this:
I {color: rgb (0, 0, 255))
I {color: rgb (0%, 0%, 100%))
Following close on the heels of “color” comes “background-color”, which controls the background colour of an HTML element.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.blue {color: cyan; background-color: #FF8000}
.green {color: lime; background-color: black}
</STYLE>
</HEAD>
<BODY>
<P CLASS="blue">
Oooh...you have beautiful eyes!
<P CLASS="green">
I know. But you aren't too bad yourself.
</BODY>
</HTML>
Keep looking at that combination, and you’ll make some eye surgeon very, very rich!
Playing With Type
How about changing those fonts around a little? Well, CSS comes with a whole bunch of properties whose sole raison d’etre is to give you more control over typeface. The first of these is the “font-family” property, which allows you to specify the font to be used when rendering a particular block of text.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-family: "Verdana"}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many testers does it take to change a light bulb?
<P CLASS="answer">
A. We just noticed the room was dark; we don't actually fix the problem.
</BODY>
</HTML>
You probably already know that if the font specified isn’t available on the client computer, the browser will use the default font (usually Times New Roman). And here’s where CSS scores over the <FONT> tag - it allows you to specify a list of alternative fonts in the style definition.
P {font-family: "Verdana", "Arial", "Arial Black"} /* first try Verdana, then Arial, then Arial Black */
You have the option of using a generic class of typeface - pick from “serif”, “sans-serif”, “monospace”, “cursive” and “fantasy”. Try it and see for yourself.
P {font-family: serif} /* font of type "serif" */
You also have a number of options when deciding font size, since the CSS “font-size” property allows you to specify the size of your typeface in a number of different ways.
First, there are absolute sizes, which are usually one of the following seven values: “xx-small”, “x-small”, “small”, “medium”, “large”, “x-large” and “xx-large”. Try this example out to see how this works:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {font-size: xx-small}
.answer {font-size: x-large}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many testers does it take to change a light bulb?
<P CLASS="answer">
A. We just noticed the room was dark; we don't actually fix the problem.
</BODY>
</HTML>
Next, there are relative sizes, which allow you to specify a font “larger” or “smaller” than the size of the surrounding text.
.question {font-size: larger} /* font size larger than the parent element */
.question {font-size: smaller} /* font size smaller than the parent element */
You can also specify an actual size in terms of points or percentages, like this:
.question {font-size: 16pt} /* font size is 16 points */
.question {font-size: 300%} /* font size is three times larger than usual */
Adding A Little Style
You can also add emphasis to your text with the “font-style” property, which takes the values “normal”, “oblique” and “italic”. Check it out!
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-family: serif; font-style: italic} /* italic font */
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many testers does it take to change a light bulb?
<P CLASS="answer">
A. We just noticed the room was dark; we don't actually fix the problem.
</BODY>
</HTML>
Speaking of emphasis, the “font-weight” property allows you to control the level of emphasis either via keywords like “normal”, “bold”, “bolder” and “lighter”, or via an absolute scale going from 100 to 900. Take a look:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {font-weight: bolder}
.answer {font-weight: 900}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q. How many testers does it take to change a light bulb?
<P CLASS="answer">
A. We just noticed the room was dark; we don't actually fix the problem.
</BODY>
</HTML>
And finally, the “font-variant” property allows you to specify the capitalization of the text - your options are either “small-caps” or “normal”. Note that Netscape doesn’t seem to support this property yet.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-variant: small-caps} /* replace all lower-case characters with upper-case characters */
.</STYLE>
</HEAD>
<BODY>
<P>
Q. How many testers does it take to change a light bulb?
<P>
A. We just noticed the room was dark; we don't actually fix the problem.
</BODY>
</HTML>
In the second part of this article, you’ll learn how to control margins, padding, borders, background images and a whole lot more. Make sure you come back for that one!
Note: All examples in this article have been tested on Internet Explorer 5.5 and Netscape Communicator 4.5. YMMV!
This article was first published on 20 Sep 2000.