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?
Next: More Pseudo-Gibberish >>
More Style-Sheets Articles
More By icarus, (c) Melonfire
/ 31 
