Using CSS - Cascading stylesheets

CSS can be used to position the content

CSS can be used both to format as well as to position the content on your web pages.

Although CSS is widely used to format web page content (the type of font, background colors etc...) many web designers are still not using it position the elements on a web page. The reason for this is that earlier browser versions were very inconsistent and did not support positioning very well. Current versions of the major browsers however all fully support CSS positioning and so you should not be put off using CSS to position your content any more.

CSS is very easy to use and I will show you how in the following pages.

CSS will allow you to control the look and feel of your whole website by changing one file. But there are also a number of other advantages such as reducing the HTML code used.

Your website design strategy should include the following goals:

1. Uniformity of presentation - this is important from a usability point of view - you should ensure that similar sections of your site have the same layout and formatting.
   
   
2. Ease of site maintenance - you can use an external stylesheet to control the look and appearance of your whole website, such as the font size, style, and color, the background image, the background color, etc... by changing a single file. You don't need to edit every page.
   
   
3. Separation of content from presentation - CSS allows you to separate the formatting and layout from the content. You can use the CSS stylesheet to position elements on your web page as well as format
   
   By using CSS to position elements on a web page you can place text on your page for better visibility in search engines. Some search engines give more weight to content at the top of a page than content further down so you can actually position your important content at the top of the HTML file even if it is presented further down the page in a browser.
   
   
4. Ease of browser compatibility - web pages are displayed differently on different browsers and platforms. For example a 10pt font looks fine on a PC but becomes a bit small on a Mac. You can create separate style sheets for each browser and use a browser-detection script in the header of your pages which will link to the correct stylesheet depending on which browser is being used.

You should be able to control your website with only one CSS stylesheet however if necessary you can also use JavaScript to detect the browser version and serve the visitor a different stylesheet depending on what browser is being used.

  CSS and Browsers