CSS

Using CSS is a clean way to separate the formatting of your web pages from the logical content, which is written in html paragraphs and headings.

Including CSS information

You can include CSS stylesheets in three major ways:

• You define them in an exterior CSS file, and include it with the line <LINK REL=STYLESHEET TYPE="text/css" HREF="your/url.css"> in the header. This helps you to get a consistent style in all your pages, by including a single line. The URL can be fully qualified to a css file somewhere on the web, so you do not need to worry about relative paths.
• You define the style for the page in the head section of the page. Enclose it in a multi-line comment for older browsers. This approach has the advantage that you do not need access to a separate CSS file, but only helps you get consistent style for one page:
  <style type="text/css">
  <!-- /* ... Style-Sheet-Directives, eg */
  p.nice { font-family:font- familiy:"Century Schoolbook",Times,serif; }
  p { font-size:10pt; }
  //-->
  </style>
• You define mini-style sheets for single elements, with the STYLE attribute. If you don't have an element for your text, use the SPAN pseudo-element (which doesn't linebreak like DIV does): <SPAN STYLE="color:#FF0000">Like this!</SPAN>

CSS syntax

If you define styles in the head or a dedicated CSS file you have to define which elements to format. The syntax is simple: you just name the lowercase element name, or a comma separated list of them, and, enclosed in braces append the semicolon separated list of name:value pairs. If there are several values for a name, separate them by comma. You can quote strings with spaces with quotation marks. It doesn't hurt to append a semicolon after the last name:value pair. For example:

p, th, td { font-family:"Courier New",Courier,monospace; font-size:10pt; }

Often you do not want all your paragraphs or table cells to look the same way. For this, you can define subclasses, by following the element name with a dot and a subclass name you invent, for example:

p.emphasis { font-family:font- familiy:"Century Schoolbook",Times,serif; }

Then, you identify the elements to which this applies with the matching class attribute, for example:
<p class="emphasis">I promise nothing but blood, sweat, toil and tears</p>

If you leave out the element name, you define a general style open to any html element, for example:

.weeny { font-size:6pt; }

When formatting single elements with the STYLE attribute, you do of course not need the tagname or the braces. It's clear you refer to just that element.

IDs and classes

In addition to the class attribute, there is also an ID attribute. IDs are defined using a hash symbol instead of a dot, (like #myid). If an html element is given (like p#myid), then the ID is defined only for this element type. The element to use this formatting is then designated with the ID attribute, e.g.

<p ID="myid">.

What is the difference between the id and the class attribute in html elements for CSS? The id attribute is supposed to be used for elements that are unique in the page, appearing only once. Because of this, it is typically used for div sections that  that occur only once each per page, like navigation bars, sidebars, main text area. The class attribute is supposed to be used for elements that show up multiple times. That being said: if found that browsers uncomplainingly render multiple elements with the same ID attribute, and it is shorter to type.

Borders and colored areas

Styles make it possible to draw borders around a paragraph or tint it's background without having to resort to a table. This is a demonstration of setting the padding between Border and the Box representing the elements content to 10 pt (note there is still space between element content and border). background: yellow; border-color: black; border-style: solid; border-width: medium; padding: 10pt;

Free positioning of Elements on the page

Width together with position can be used to format columns (instead of blind tables). Caution: long words take precedence over width! Use float:left to make text flow around and have the element to the left or use float:right. Default is no float. Normally, the last elemet in the source prints over the ones before. With z-index: you can change that (the higher value, wins the front, works for absolute only!):
float:left; border:none; background-color: #AAEEFF; position:static; width:320px; padding: 5pt;

To position elements you define a DIV element, to which formatting is applied, and enclose your paragraphs and so on in it. position:absolute can be used to absolutely place the box on the page (at top: and left: pixels or cm from the upper left corner. position:relative does this in relation to the last element before and position:static is like a normal sub and is default (but you can use the width-tag).

Here a DIV <div>...</div> has been defined, formated with the following values:
z-index:1; border:none; background-color:#EEEEFF; padding:5mm; position:absolute; top:2090px; left:90px; width:360px;

A second DIV area in front the other one because the Z-Index is higher - independend of the order they appear in the HTML source:
z-index:2; background-color:#FFEEDD; position:absolute; top:1000px; left:400px; width:260px;