Introduction to Cascading Style Sheets
CSS : HTML :: Form : Content
CSS is designed to allow you to separate the "Form" of your web pages from their "Content". Actually, its really more along the lines of Presentation vs. Content. CSS may be able to make a pile of poo look fantastic, but it will still be a pile of poo. For the rest of this introduction, we'll try to focus on applying CSS styles to gibberish. So, when you're asked to create some html is can be absolute random key presses as such : aslkha asldkfh asdf awle.
Why Cascading
With CSS, style information can be specified in a number of ways. Styles can be witen inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. You can even reference multiple external sytle sheets inside of a single HTML page. Cascadeing Order = What style will be used when there is more than one style specified for an HTML element?
All styles will "cascade" into a new "virtual" style sheet in the following order:
- Browser default
- External style sheet
- Internal style sheet (inside of the <head> tag)
- Inline style (inside an HTML element)
Thus, an inline style has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser.
The Presentation Problem
HTML tags were originally designed to define the content of a document. They were supposed to say "This is a header", "This is a paragraph", "This is a table", by using tags like <h1>, <p>, <table>, and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags.
As the two major browsers - Netscape and Internet Explorer - continued to add new HTML tags and attributes (like the tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.
To solve this problem, the World Wide Web Consortium (W3C) - the non profit, standard setting consortium, responsible for standardizing HTML - created STYLES in addition to HTML 4.0.
The Benefits of CSS
- Cleaner HTML - less HTML code to deal with.
- Easier Site Modification - the ability to modify the appearance of one or multiple web pages by simply editing a single file.
- Greater Flexibility - much more flexibility with regards to presentation. It is possible to apply most formatting properties (i.e. color, background, margins, borders, fonts) to every possible element. With plain old HTML you would have to know if the element supported the property; for example, "Does the body element support the align property?"
- Better Layout Control - unfortunately, layout techniques are well beyond the scope of this introduction, but if you're really anxious to start using CSS for layout see some of the sites in the links provided at the end of this course.
The Drawbacks of CSS
- Browser Bugs - Unfortunately not every browser plays nicely w/ CSS. That used to be the case with the previous generation of browsers, and I'm pretty certain that its the case with the current generation as well. Although many of the bugs may have been worked out, you won't be able to see the actual results unless you test your pages on every available browser.
previous | index | next