Understanding Style Sheets (Part 1) - Into The Light (
Page 2 of 6 )
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.{mospagebreak title=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
ruleThe 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!{mospagebreak title=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?
/ 32 
