Building Optimised Web Sites with CSS Folkert Klemme

What is CSS Cascading style sheets (CSS) is an elegantly designed extension to the Web. And one of the greatest hopes for recapturing the Web's ideal of separation of presentation and content.

As a technical Question CSS is based on rules and style sheets. A rule is a statement about one stylistic aspect of one or more elements. A style sheet is one or more rules that apply to an HTML document. CSS support much more properties and values than HTML tags do.

How does a rule look like? A rule looks like H1 { color: red; } A rule has a selector and one or more declaration Selector: H1 Declaration: color: red

More about Selector The selector is the link between the HTML document and the style. Any HTML element type can be used as a selector. They are called a „Type Selector“. Other selector are available. They are called „Attribute Selector“.

Attribute Selector They are three known attributes Class Id Style Style is a special attribute and can be used as replacement for the selector.

Class Selector The CLASS attribute enables you to apply declarations to a group of elements that have the same value on the CLASS attribute. All elements inside BODY can have a CLASS attribute. Flag character:. (dot) Syntax: Hello Def:.MyCSS { color: red; }

Id Selector The ID attribute works like the CLASS attribute with one important difference: The value of an ID attribute must be unique throughout the document. Flag character: # Syntax: Hello Def: #XYZ { color: red; }

The Style Attribute Style replace the separation and can be used for inside the HTML document. Sample: Hello

More about Declaration A declaration has two parts separated by a colon: Property - that part before the colon Value - that part after the colon Sample: H1 { color : red; }

How to use CSS Style Sheets can be used as an internal resource or as external file..MyCSS {color : URL(css/Calendar.css) ;

Sample 1 <!-- P {COLOR:RED;} -->

Sample 2 <!-- P {COLOR:RED;} P.FLINE:FIRST-LINE {text-transform: uppercase} -->

Sample 3 <!-- P {COLOR:RED;} P.FLINE:FIRST-LINE {text-transform: uppercase} P.FLETTER:FIRST-LETTER {font-size: 200%; float: left } -->

Sample From the Real World

HTML Tags DIV SPAN

Form Fields CSS is the only way to format HTML Form Fields

Advantages for a WebApp The need of separation of presentation and content created by a WebApp. Web Designer shouldn‘t modify the WebApp. The WebApp creates content with CSS classes. The Layout becomes mapped by the Web Designer in adding filling the classes with rules.

More Help Documentation: Free Tool: TopStyle Lite from