Cascading Style Sheets
Right out of the gate I will tell you that style sheets are one of the toughest HTML concepts to master. I have been coding HTML for
a long time, and I still need to refer to notes from time to time regarding the use of this tool. However, I highly recommend using them, even if you have to
cut-and-paste the code, or keep a printed copy of this page somewhere to use as a reference. If you know any javascript, you will notice some similarities between this and a few java classes.
Style sheets can add a whole new dimension to your pages, and you will quickly see their usefulness. Using them you can partially define the behavior of certain tags, and
even completely modify a few to your liking. You should also know that some older browsers don't understand style sheets; your options regarding this are simple. Either add a multitude of extra
tags so that anyone can view your pages, or give up hope on those who refuse to upgrade free software, and not bother with a bunch of extraneous typing.
The Basics of Style Sheets
The tags for a style sheet belong inside the header of a page (between <head> and </head>). I suggest that you include the default attribute values for everything. This
serves a dual purpose; first it makes future modifications much easier, and second you will find that your pages load much smoother (and in many cases faster).
The tag to start a style sheet is a compound tag, and it looks like this:
<style type="text/css">
Because this tag is found in the header of your doccument, the browser will apply it to the entire page. Note that individual modifications can be made farther down the page (within the body). This will in no
way affect the style sheet's hold on the rest of the page; such individual changes will always over-ride a style sheet.
When you reach the end of your style sheet, close it with the </style> tag.
|
The Exciting Part
There is no easy way to describe the various attributes found inside a style sheet, so I'll dispense with such things and crash straight into an example:
<![CDATA[
<style type="text/css">
<!--
BODY {background-color: #000000; font: 9pt Arial; color: #ffffff}
A:link {font: 9pt Arial; color: #f0a0ff; font-weight: lighter; text-decoration: none}
A:visited {font: 9pt Arial; color: #f0a0ff; font-weight: bold; text-decoration: none}
STRONG {font: 9pt Arial; color: #cc0033; font-weight: bold}
I {font: 10pt Arial; color: #ffffff; font-weight: lighter}
-->
</style>]]>
Now then, what does all that jibberish mean? From looking at the sheet above, you should be able to figure out that each line defines a certain aspect of the page, and that some (STRONG, for example)
define the behaviors of text-related tags. In the following list, I will break down each line of the above example into plain english.
- The body of the page is black with white text. Said text will be 9-point Arial; this is the same as size=2.
- Unvisited links are 9-point Arial, a lovely lilac purple color, and thin-letterd text. They are not underlined.
- Visited links are the same as unvisited one, save that they will be in bold text. They are not underlined.
- Everything inside
<strong> and </strong> will be 9-point Arial, Bold, and a dark burgandy color.
- All text between
<i> and </i> tags is 10-point Arial, White, and thin-lettered text.
Page Attributes you can define are:
- BODY - You can specify anything basic in here, including background color and text values (color, font, & size)
- A:link - Attributes related to your links.
- A:visited - Attributes related to your visited links.
- A:active - Attributes related to your active links.
| Tags you can define are:
|
- KBD
- CITE
- DFN
- CODE
- SAMP
- VAR
|
|
|
|
 Internet Explorer is the better of the two browsers when it comes to interpreting style sheets.
It will recognize the normal attributes associated with headers, and in general will recognize more text-related tags than Netscape.
Note that any tag (other than headers) you wish to appear as it normally would plus modifications of your own design (eg - a background color)
must be programmed in their entirety.
For Example: I {font: 10pt Arial; color: #ffffff; font-weight: lighter; font-style: italics;}
 Netscape has more trouble with style sheets. It will not recognize the normal attributes of Header tags
when they are combined with a style sheet, and Netscape recognizes fewer tags as well.
Style Sheet Values
Font & Text Values:
- {font-family: arial, courier new, pristina;} As shown, you can specify more than one font face if you separate them with commas.
- {font-size: 9pt;} Font size may be specified as a point-size. Smallers usable size is 6pt;
there is no largest size.
- {font-size: larger;} Font size can also be stated as larger or smaller than the default.
- {font-size: x-large;} Font size can also be specified x-large or x-small.
- {font-size: 95%;} Finally, font size can be stated as a percentage of the default size.
- {font-style: italics;} This is the only way to create italics in a style sheet, and the only possible command for this value.
- {font-weight: bold;} Used to specify the weight of a font, either lighter or bold.
- {word-spacing: 0.25in;} Sets the width of a single space, and the width of the non-breaking space special character ( ). You may modify the numeric value freely.
- {letter-spacing: 0.4em;} Sets the amount of space between letters. Gives a nice spaced look to your type. You may modify the numeric value freely.
- {text-align: center;} Should go without saying....this aligns text. Valid commands are left, right, or center.
- {text-decoration: none;} This value can turn off the underlining of links. Other valid commands are underline; and line-through;.
Text Color & Background Color Values:
- {color: black;} Certain font colors can be called by name.
- {color: #000000;} Any hexcode will also work.
- {color: rgb(0,0,0);} Finally, font colors can be selected by their Red-Green-Blue values.
- {background-color: white;} Some background colors can be called by name.
- {background-color: #ffffff;} Any hexcode will also work.
- {background-color: rgb(255,255,255);} Finally, background colors can be slected by their RGB values.
Creating & Using Style Classes
Style classes are used to create groups of values in style-sheet format that can be assigned to everything in a given tag with only one command.
This allows you even more flexibility in your designs. For example, in a normal HTML doccument, you are limited to one color for your links. By using classes
however, you could assign a different color to every link on your page!!
In your style sheet, a class looks just like any other style, save that the name must be preceded by a period.
For example:
.myclass {font-weight: lighter; text-decoration: line-through; color: #191970; font-family: arial, helvetica;}
To activate this class, you must learn a new attribute; this is class=. Insert the attribute into a link tag (<a>), as shown in this example:
<a href="Insert URL Here" class="myclass">Hypertext</a>
Notice the absence of the dot in the class name? This is because the dot in the name when it is entered into a style sheet acts sort of like an anchor tag; that is it tells the browser that it
is looking at a style class. This would be irrevevant here, as you are telling the browser to activate the class, not create it. This attribute can only affect unvisited links; visited and active links
remain the same color as specified in the style sheet (or <body> tag).
Combining Style Classes and MouseOver
This is where style classes really get interesting. I am sure you have seen pages where the text changes when you pass the cursor over it, right? Well this is an excellent way to create this effect; and the
good news is, you only need to know a tiny amount of javascript to make it work!!
Now lets take a look at how to make this magic happen:
<a href="index.html" class="dave" onmouseover="this.className='tc';" onmouseout="this.className='dave';">Test Rollover</a>
You can see the basic link tag and href= attribute in there, and if you have read the section detailing links you should recognize the onmouseover and onmouseout attributes.
The above code will create the following link:
Hey! Bring That Cursor Over Here!!
This is a extremely versitile attribute; the class= attribute can be applied to any text related tag, even headers & text styles!! Enjoy....
|
