Cascading Style Sheets (CSS) Design/Guide
CSS is an acronym; it stands for Cascading Style Sheet. CSS is an extension to basic HTML that allows you to style your web pages. CSS is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
Style sheet refers to the document itself. Style sheets have been used for document design for years. They are the technical specifications for a layout, whether print or online. Print designers use style sheets to insure that their designs are printed exactly to specifications. A style sheet for a Web page serves the same purpose, but with the added functionality of also telling the viewing engine (the Web browser) how to render the document being viewed.
Cascade is the special part. A Web style sheet is intended to cascade through a series of style sheets, like a river over a waterfall. The water in the river hits all the rocks in the waterfall, but only the ones at the bottom affect exactly where the water will flow. The same is true of the cascade in Web style sheets.
Every Web page is affected by at least one style sheet, even if the Web designer doesn't apply any styles. This style sheet is the user agent style sheet - the default styles that the Web browser will use to display a page if no other instructions are provided. But if the designer provides other instructions, the browser needs to know which instructions have precedence.
There are many benefits of having a website based on Cascading Style Sheet (CSS) design
- CSS decreases load time
- CSS requires less code than "in page styling" and makes use of system caching
- CSS enables you to display content before large images
- CSS makes your website more accessible
- CSS enables specific styles to be applied to specific display devices (screen/printer�)
- CSS enables changes to be carried out throughout the site without changing every page
- CSS makes your website much more search engine friendly
Where is CSS Used?
CSS is used to style Web pages. But there is more to it than that. CSS is used to style XHTML and XML markup. This means that anywhere you have XML markup (including XHTML) you can use CSS to define how it will look.
CSS is also used to define how Web pages should look when viewed in other media than a Web browser. For example, you can create a print style sheet that will define how the Web page should print out and another style sheet to display the Web page on a projector for a slide show.
Example of CSS use.
If we have a web page that is not styled it will display the text
as it is written in the page itself. Only the HTML will style the pagelayout.
From the example image on the right it is clear to see that it
lacks any sort of presentation. What is shown is the mark up,
and it is displayed in the order it is occurring on the page itself.
With a style sheet applied the page appears in a more presentable way.
Here we have coloured background, coloured navigational tabs on the top and a secondary navigation tab on the left.
The colours on the top navigation bar corresponds to the page elements they represent.
To change any of the colours will reflect the whole page/site and the corresponding navigation tab and you only have to do this once;- in the style sheet.
The page can also be styled to give an appearance designed for printouts only.
To do this we can create a secondary style sheet designed for printing and use the main style sheet for the screen display.
Here the navigational elements can be removed as well as some background elements
And the result is a page designed to look good on print.
Why is CSS Important?
Search engines can crawl CSS styled pages more easily as they usually have simpler and better structured HTML code. The search engine can then make a better guess as to what the web page is about, so all other things being equal, your web pages will appear higher in the search rankings with a CSS layout.
CSS is one of the most powerful tools a Web designer can learn because with it you can affect the entire mood and tone of a Web site. Well written style sheets can be updated quickly and allow sites to change what is prioritized or valued without any changes to the underlying XHTML.
But because CSS can cascade, and combine and browsers interpret the directives differently, CSS can be more difficult than plain HTML. But once you start using it, you'll see that harnessing the power of CSS will give you more options and allow you to do more and more things with your Web sites.
