Cascading Style Sheets

Change Text Size: Size 10px - Size 13px (Default) - Size 15px - Size 17px

Sample Links

Cascading Style Sheets, level 1
Cascading Style Sheets, level 2
CSS Layout Techniques
Box Lessons
Introduction to CSS Layout
The Layout Reservoir
the complete CSS Guide
The CSSPG Examples Directory
WDG Cascading Style Sheets
Advanced CSS Layouts: Step by Step

Cascading Style Sheets can be used to control Web page presentation and layout. With Cascading Style Sheets you can control colors and backgrounds, fonts and text, position and visibility of objects, spacing and areas. It also allows content and presentation to be separated.

Before style sheets, changing an element that appeared on many pages or in several places on a single page required changing it each place it appeared (unless you were using a server tool). When you want to make a change with Cascading Style Sheets, you simply change the style you previously defined, and that element is updated automatically wherever it is referred to. "Cascading" relates to a hierarchical order of style sheets allowing style sheets to override others.

Cascading Style Sheets allow you to define the style for an element once and refer to it on multiple web pages. In its simplest form, you can think of it like styles in a word processor. For example, you could define the style of Header 1 to be a particular size, font, and placement.

The World Wide Web Consortium released level 1 of Cascading Style Sheets (CSS1) in December 1996. CSS level 2 was released in May 1998.

However, even CSS Level 1 is not supported by browsers previous to version 4 of Netscape and version 3 of Internet Explorer. And even with a version 4 browser, this is a case of many features not working with this or that browser on this or that platform. Web Review has published a Cascading Style Sheet Guide intended to help you decide which features are supported with which browsers.

Style sheets can be specified as an external file:

<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
Or included in the HEAD section of the document:

<STYLE TYPE="text/css">
     BODY {background:#FFFFF;color:#000000;margin:.02in .02in .10in;}
     H2 {font:17pt Verdana, Arial;color:#A00000;font-weight:bold;}
     H4 {font:12pt Verdana, Arial;color:#888888;font-style:italic;}
     H5 {font:8pt Verdana, Arial;color:#000000;font-weight:bold;}
     P {margin-left: .02in;}
     P.intro{font:15pt Arial;color:#A00000;font-weight:bold;}
     PRE {font:12pt Times New Roman;font-style:italic;}
     B {font: 13pt Arial;font-weight:bold;}
     TD {font: 13pt Arial;}
     </STYLE>
   
Send questions and comments to harold@haroldcarey.com
Last updated;