ITSS WebDev Guide
Style sheets set your page free
The idea behind style sheets is to let HTML do what it's intended to do - define the structure of a document and not its style.
Style sheets may be applied globally and overridden locally. Style sheets may be written once and applied to many pages. So you want the presentation to look different on the 42 pages in your "My Dog" directory? Make the change in one file and it affects all 42. Pretty powerful stuff. Plus we can make pages look the way we want with fewer hassles.
Separating the presentation of the page from its structure allows those with special aural or vision software or non-graphical software to get the content from the page. Those with the standard graphical browser get to see the presentation you want. Everybody wins!
The two-column layout on this page is courtesy of style sheets. Font sizes and families are specified by a stylesheet. If you're viewing this with a Web browser that does not handle style sheets, you should still have a page that is navigable and allows you easy access to the content. You just don't see the columns, font sizes and colors, etc. But the page still works.
Stylesheet Basics
style sheets (Cascading Style Sheets) are made up of rules and rules have two parts:
- selector
- declaration - and a declaration has two parts:
- property
- value
Let's look at a rule:
CODE { font: 0.8em }
where CODE is the selector and { font: 0.8em } is the declaration. Inside the declaration
font is the property with a value of 0.8em.
This is a rule actually being used for this page. Anytime the HTML tag <CODE></CODE> is
being used, the words in between the tag are given a font size of 0.8em.
I'll add color so you can see what I mean. Look at the HTML tag, <BODY></BODY>. I made it maroon by adding another property with its
value. Here's what I added:
{ color: maroon }
where color is the property and maroon is its
value. Sure enough the font size is 0.8em and the color is maroon. The whole rule looks like this now:
CODE { font: 0.8em; color: maroon }
In between "0.8em" and "color" is a semi-colon. This is used to separate multiple properties and is called a
delimiter.
Some of you may be peeking at the source code for this page and have probably noticed that I've actually been changing the color in the tag itself. This is called an "inline style" and allows for quick, temporary changes. The overall document has some embedded rules in addition to linked external stylesheets, and I'm adding rules to the page at the HTML tag level. So I'm not stuck with just one look for a page!
Hey! I could have changed it at the HTML tag level by adding the <FONT></FONT> tag, but
with the inline style I still have a tag that describes its contents accurately:
<CODE></CODE> is for describing the contents of the tag as computer code. If I add the
<FONT></FONT> tag there is no "font" in between the tags. HTML is for structure, not
presentation.
Rev: bdr 07.06 xs