Introduction to CSS

Cascading Style Sheets define how to display XHTML. The XHTML tutorial stressed the importance of separating content from style. XHTML simply codes the structure and content of the web page. CSS provide a powerful technique for determining the presentation of a webpage on a display and/or device.

Although CSS techniques can be used within a web page to perform styling at the level of the whole page and even down to the level of an individual element, we will avoid this use. The power of CSS is in their ability to control the presentation of all the pages in a website. Multiple style sheets are allowed and the combined effect will be applied to the page by cascading the effects of each in turn.

The WWW Consortium standards for CSS version 1 and CSS version 2 provide a comprehensive, unambiguous, definition of CSS. However, it is recommended that you become familiar with basic CSS from this tutorial and the W3Schools CSS Tutorial before trying to dig into the standard. The W3 standard also refers to HTML throughout, and consequently uses tags in uppercase. The standard works equally well with XHTML, but you must use lower case elements in your style sheet. CSS version 2.1 is nearly ready for standardisation and some browsers already support it. However, you are recommended to take care if you use it on live projects as its implementation varies from browser to browser. Also, some browsers interpret the CSS specification in a non-standard way. W3Schools provide a compatibility list for CSS2.

This tutorial contains the following topics:

Session

  1. Linking a style sheet to a web page
  2. Defining a style
  3. Specifying colours
  4. Specifying size
  5. Working with Fonts
  6. Text properties
  7. List properties
  8. Setting colour and backgrounds
  9. Margins, borders and padding
  10. Advanced Box Properties
  11. More ways of identifying elements
  12. Pseudo styles
  13. Putting a simple page layout together
Valid XHTML 1.0! | Valid CSS! | Bobby WorldWide Approved AAA