Skip Navigation

www.wimb.net - CSS & Standards



CSS

On this page:

CSS stands for Cascading Style Sheets, it tells the browser how to display the XHTML page. CSS is very powerful, with one line you can change a whole site. This means also that one error can damage a whole site. You can hide complete sections of the page, which is very useful for printing. It is possible to have CSS file for different "media types", like for print.

To demonstrate the power of CSS, a copy of this page was saved and the css links were removed. So, please look at nostylep12.html. If you compare the source code then only a few lines are missing, the rest is exactly the same. Firefox and Opera users can also disable the stlyesheet of the page. Everything is functional, all the text is there, only the layout is missing.

There are three ways to include CSS inside the html:

  1. Inline
  2. In the head of the page
  3. In a separate CSS file

1. Inline example:

  • old: <body bgcolor="yellow">
  • new: <body style="background-color: yellow;">

It is shown here in example3. Open this page and click on the right mouse button to use "view source"


2. In head example:

<style>
body {background-color: "yellow";}
</style>

It is shown here in example4 Open this page and click on the right mouse button to use "view source"

3. In a separate CSS file

This looks more complicated but it is very useful for large sites where the layout from many pages can be controlled with one single CSS file.

This goes in the head section of the page, or in all pages on the site:

<link rel="stylesheet" type="text/css" href="style.css"/>

and this has to be saved in a separate file:

body { background-color: yellow; }

When now the CSS file is changed in for example

body { background-color: white; }

then on the whole site, every page that links to this CSS file changes its background color to white. Look here for example 5 which looks the same as the previous examples 3 and 4. The source code is different.

More about CSS also on the w3schools.com.


Table or CSS Layout?

A classic way to make a page layout is with tables. This is depreciated in the XHTML standard. Tables should be used only for displaying tabular data. The whole layout should be done with CSS. A well known example is the site "Look Ma, No Tables". There are several examples, and they say: "Feel free to steal all the code you find on this site".

The page has to be separated in divisions (DIV's) For each DIV the properties has to be specified with CSS. Look on w3.org for an introduction.

PID: 7012 CLT: 0.001 LMD: 2013-Aug-17

Updated 2007 Oct. 09