Introduction
What is CSS?
CSS is an abbreviation for Cascading Style Sheets. CSS works with HTML and other Markup Languages (such as XHTML and XML) to control the way the content is presented. Cascading Style Sheets is a means to separate the appearance of a webpage from the content of a webpage. CSS is a recommendation of the World Wide Web Consortium (the W3C). The W3C is a consortium of web stakeholders: universities, companies such as Microsoft, Netscape and Macromedia, and experts in many web related fields. The presentation is specified by styles, which are presented in a style sheet.
If you're familiar with word processing programs like Microsoft Word, you have probably played around at least a little bit with styles. For example, when you want to make the headline text of your document big and bold, the hard way to do it would be to select the text, select a font face and weight, and select the color. The easier way to do it (presuming your document has more than one headline) is to create a "rule", or style, for all the headlines in your document. Then all you have to do is to make one rule, and keep on applying that to all your headers.
CSS in its most basic form works exactly like this. Instead of using <FONT> tags over and over again to control little sections of your page, you can establish some rules to apply globally, to a single page or all the pages on your site. CSS is a great time saver.
What's the "Cascade" part of CSS?
The cascade part of CSS means that more than one stylesheet can be attached to a document, and all of them can influence the presentation. For example, a designer can have a global stylesheet for the whole site, but a local one for say, controlling the link color and background of a specific page. Or, a user can use her own stylesheet if she has problems seeing the page, or if she just prefers a certain look. We'll talk about cascading and hierarchy of styles in a later lesson
Why Use CSS?
Increases Download Speed
By taking the appearance markup out of the html file you decrease the html file size and significantly decrease the download time of that file.
Makes Pages More Accessible
Your pages become more accessible. By separating the styling (CSS) from the content and structure (HTML), you are well on your way to satisfying Accessibility requirements. This is an important thing to consider, if you are creating sites that might be used by the visually impaired.
Reduces Time
It is much easier to update pages. It is much faster to update a page that uses styles over using <FONT> tags and the like. With CSS, you can decide how headings should appear, and enter that information once. Every heading in every page that is linked to this style sheet now has that appearance. Want to make every heading of level 3 obviously different from those of level 2? Edit the style sheet, and every such heading now has the altered appearance. Consider how much time you will save. With cascading style sheets, whole organizations can share a small number of style sheets, ensuring consistency across the site with no need for constant updating and editing to accommodate changes.
Multiple Style Sheets Cascade Into One
Style Sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external Style Sheets can be referenced inside a single HTML document.
How Do Style Sheets Work?
Style sheets are just text files, or text embedded in the head of an HTML document, that help separate content from appearance. The content of a page goes into an HTML file and the appearance goes into a style sheet. But how does all this end up as a web page in your browser? Think of a style sheet as a set of instructions, suggesting to a web browser how to draw a page. The style sheet suggests how the browser should display the page based on rules you define in the style sheet.
Let's Take A Look
See how this page looks without the stylesheet applied.
CSS Basics - How Do Style Sheets Work
To get an idea of what CSS can really do click on the link below. The examples on this site all use the same html document. The only difference between the examples is the style sheet used. Click on the examples listed on the right hand side of the page.
CSS Zen Garden - http://www.csszengarden.com/
<-- Previous Next -->
