DES 3005 - Web Design I
Week Nine | Part One
Cascading Style Sheets
In simplest terms, cascading style sheets are rules declared at the beginning of an HTML document to allow your complete control of how every element on the page looks.
Every design element of a Web page can be controlled ... text, image placement, logical divisions, backgrounds ... everything.
Style sheets are well know in the word of word processing and desktop publishing. For example, you can create a style called HeadingOne and apply all kinds of attributes (e.g. 18 pt, Times Roman, reflex blue, 12 pt leading) and use that style for any text you like. Style sheets can save you hours of revision time.
Style sheets for HTML documents are no different.
Life before Style Sheets
HTML was originally built for people to share simple documents. As HTML evolved, so did the possibilities to create visually appealing content. Designers began to experiment with those possibilities, though their tools were limited at first. A designer could only create headings, paragraphs, and use in line styling to make their designs interesting.
When tables were revealed as a powerful layout tool, the possibilities expanded. So, too, did the complexity of pages and the amount of coding needed to maintain them.
Kinds of Styling
There are three types of style sheets at your command:
1) In line styles which we have used exclusively so far;
2) Document level styles where the rule are included in the <head> of an HTML page, and;
3) Linked styles where the rules are in a separate document that is referenced in the <head> of an HTML page.
The most common method is the third, but for this lecture we'll used the second type. What's amazing is you can use all three in the same page. The possibilities are amazing.
The greatest advantage to using style sheets is that you can separate content from style. This is the trend of Web design today, especially as the use of mobile Internet technology grows.
Another advantage is the ease with which you can make changes either to a Web page or an entire Web site. You'll hardly have to review mark-up code line by line to make design changes. That, friends, is progress!
Please go to Week Nine Part 2 ».