Frank Schacherer Homepage
home technology bibliography

CSS (Cascading Style Sheet) Basics


[Kira.]

Including CSS information

You can include CSS stylesheets in three major ways:


CSS syntax

The syntax is actually pretty simple: you just name the lowercased naked tag 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. It doesnt hurt to append a semicolon after the last name:value pair. If the tag is a new one, defined by you, prepend a # sign. For example:
#mytag { font-family:font- familiy:"Century Schoolbook",Times,serif; }
p, h1, h2 { font-size:10pt; }

When Formatting single Elements with the STYLE Attribute, which allows to define the rendering of the tag in which it is used, you do of course not need the tagname or the braces. It's like embedding a mini- styleheet for just that element.


Borders and colored areas

Styles make it possible to draw borders around a paragraph, make it's background colored, and all without haveing to resort to a table. This is a demonstration of setting the padding between Border and the Box representing the elements content to 5 pt (note there is still space between element content and border).

Inset.

Outset.

Groove.

Ridge

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;

Here are several ways to position elements (usually you define a DIV element, to wich this is applied, and enclose your Paragraphs and so on in it. Most notably is position:absolute which 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:1090px; 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;