DES 3006 - Web Design II
Week One | Part Two: The Elements of Style
Cascading Style Sheets
Cascading Style Sheets have been with us since the mid-1990s, but only recently have most browsers been able to read them in a fairly consistent manner. There is still a place for tables in your Web pages, but you will find CSS a far more powerful way to implement and manage your design.
In simplest terms, style sheets are rules declared at the beginning of an HTML document that allow you complete control over how the page looks.
Every element of a page can be manipulated: text, image placement, logical divisions, hypertext links, page backgrounds ... everything.
Style sheets are well known in the world of word processing and desktop publishing. For example, you can create a style called HeadingOne and apply all kinds of attributes (e.g. 18pt Times Roman, Reflex blue, 12pt leading), and use that style for any text you like.
Style sheets for HTML documents are not much different.
Life before Style Sheets
HTML was originally built so non-designers could define parts of a document to create visual structure, and then share that document with readers over the Internet. HTML was limited, though. An HTML writer could really only create headings, define paragraphs, emphasize text, and create hyperlinks.
When Netscape came along Web designers found they could format their documents using new tags, added color, and embedded graphics. Soon designers were aligning text and changing fonts colors to suit their creative goals.
The biggest advancement occurred when designers began to use tables for page layout page. No longer the tool of data display, tables became the design instrument of choice. The down side was the creation of some very bulky and confusing mark-up code.
Enter CSS
1996 marked the first official release of Cascading Style Sheets. Known as CSS1, it was this first version that allowed the basic formatting of text and margins, and it was supported by the two most popular Web browsers of the time --- Netscape 4 and IE 4.
1998 marked the release of CSS2, and this is the most widely used version. All current Web browsers support CSS2 (though not necessary in the same way) and this is the version of CSS you will learn for this course.
CSS is not HTML. Rather, HTML 4.01 (released in December 1999) is able to interpret CSS. CSS can also be used with other mark up languages like XML (eXtensible Markup Language) and XHTML (eXtensible Hypertext Markup Language). This course will focus on its uses in HTML.
Kinds of Styling
There are three types of cascading style sheets at your disposal:
1) In line style sheets where the style rules of a tag are stated in the same line of code as the tag itself;
2) Document-level style sheets where the style rules are stated in the <head> of the HTML page; and,
3) Linked style sheets where the style rules are stated in a separate document referenced by code in the <head> of the HTML page.
The most commonly used method is the third, but we'll also use the second type --- at least at the beginning of this course. What's amazing is that you can use all three kinds in an HTML document.
Why Use CSS?
The greatest advantage to using cascading style sheets is that you can easily separate style (how the page looks) from content (what the page says).
The trend in Web design today is to create pages that have smaller file sizes to suit the mobile computer environment. But even if your visitors are using broadband, you will still want to utilize CSS.
Style sheets allow you to make changes easily either to a single Web page or to an entire Web site.
With style sheets, you no longer need to examine every line of code to create changes in appearance. Rather, you change the display instructions for a particular selector (more on that in a moment). Every <tag> that follows the instructions for that selector will change as well. Cool.
What Does 'Cascading' Mean?
We'll be getting into specifics later on, but here's a short explanation.
One HTML document can have many style sheets associated to it. In the process, it is possible that one set of style rules will come in conflict with other style rules. CSS uses a mechanism called (you guessed it) cascading to resolve these conflicts.
The two key components of cascading are specificity and inheritance.
Specificity describes the weight, or importance, of a style rule. It's actually a sort of mathematical formula. The style rule with the higher weight is the style rule that gets displayed in the browser.
Inheritance refers to the relationship between objects in a document. If you imagine a Web page as a root system, the trunk would be the top (or parent) of the document structure and the roots would be the descendants (or children).
This analogy is the basis of the Document Object Model --- another topic we will study in this course.
Confused? Just remember:
- In-line styles will take precedence over embedded styles.
- Embedded styles will take precedence over linked styles.
- Linked styles will take precedence over browser preferences.