CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology.
As a example, in designing an HTML page you may now forget
about the tedious work of specifying your preferred font face, color,
and size at the level of each invividual table cell (<TD>).
You just specify (better if you do it in an external file)
your style for the element <TD>.
In your HTML page,
within the <HEAD> you just have to mention this external style
file, and you are done.
Of course, in this external style file you may
mention several styles, for all the HTML elements (H1, H2, ..., P, LI,
etc.) you care for.
Once you have done this for a single page, you can
use that same external style file for whatever HTML page you care for,
by just mentioning it within the <HEAD>.
In this way you cheaply achieve a consistent presentation style
across maybe all your HTML pages, and -which is important-
if the day comes when you want to change your style, the only thing
you have to do is to ... change your external style file.
| If you want, you may try the following: | ||
For CSS1 specifications, please see
the W3C CSS1 recommendations, no. REC-CSS1-19990111
Cascading Style Sheets, level 1
Designing simple style sheets is easy.
E.g., to set the text color of 'H1' elements to blue, one can say:
H1 { color: blue }
The example above is a simple CSS rule.
A rule consists of two main parts: selector ('H1') and declaration ('color: blue').
The declaration has two parts: property ('color') and value ('blue').
- all HTML element types are possible selectors
- the 'color' property is one of around 50 properties that determine
the presentation of an HTML document.
For a list of properties and their possible values,
see
this page.
In order for the style sheets to influence the presentation, the Web Browser must be aware of their existence. The most common ways to combine style and HTML are the following:
| 1- Use the 'LINK' element to link an external style sheet |
<HTML> <HEAD> <TITLE>Title</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool" TITLE="Cool"> </HEAD> </HTML> |
| 2- Use a 'STYLE' element inside a 'HEAD' element |
<HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE="text/css" H1 { color: blue } </STYLE> </HEAD> </HTML> |
| 3- Use 'STYLE' attribute on an element inside 'BODY' |
<HTML> <BODY> <P STYLE="color: green;">This paragraph is green </BODY> </HTML> |
To reduce the size of style sheets, one can group selectors in comma-separated lists:
H1, H2, H3 { font-family: helvetica }
Similarly, declarations can be grouped:
H1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
In addition, some properties have their own grouping syntax:
H1 { font: bold 12pt/14pt helvetica }
which is equivalent to the previous example.
Nested elements will inherit style from parent elements. For instance, if element <H1> was defined as blue, then in
<H1>The headline <EM>is</EM> important</H1>
the <EM> element -if no color was assigned to it- will inherit the color from the parent element <H1>.
To set a "default" style property for a document, you may use the <BODY> element to inherit from
BODY {color: black; background: url(texture.gif) white;}
Some style properties are not inherited from the parent element to the child element. Most often it is intuitive why this is not the case.
Often, the value of a property is a percentage that refers to another property
P { font-size: 10pt }
P { line-height: 120% } /* relative to 'font-size', i.e. 12pt */
For each property that allows percentage values, it is defined what property it refers to.
To increase the granularity of control over elements,
a new attribute has been added to HTML: 'CLASS'.
All elements inside the 'BODY' element can be classed,
and the class can be addressed in the style sheet:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css"
H1.pastoral { color: green }
</STYLE>
</HEAD>
<BODY>
<H1 CLASS=pastoral>A green header</H1>
</BODY>
</HTML>
One can address all elements of the same class by omitting the tag name in the selector
.pastoral { color: green } /* all elements with CLASS pastoral */
Only one class can be specified per selector.
'P.pastoral.marine' is therefore an invalid selector in CSS1.
Inheritance saves CSS designers typing.
Instead of setting all style properties, one can create defaults
and then list the exceptions.
To give 'EM' elements within 'H1' a different color, one may specify:
H1 { color: blue }
EM { color: red }
When this style sheet is in effect, all emphasized sections within or outside 'H1' will turn red. Probably, one wanted only 'EM' elements within 'H1' to turn red and this can be specified with:
H1 EM { color: red }
The selector is now a search pattern on the stack of open elements, and its type of selector is referrred to as a contextual selector. Contextual selector consist of several simple selectors separated by whitespace (all selectors described up to now were simple selectors). Only elements that match the last simple selector (in this case 'EM' elements) are addressed, and only if the search pattern matches. Contextual selectors in CSS1 look for anchestor relationships, but other relationships (e.g., parent child) may be introduced in later revisions. In the example above, the search pattern matches if 'EM' is a descendant of 'H1', i.e. if 'EM' is inside an 'H1' element.
UL LI { font-size: small }
UL UL LI { font-size: x-small }
Here, the first selector matches 'LI' elements with at least one 'UL' anchestor. The second selector matches a subset of the first, i.e. 'LI' elements with at least two 'UL' ancestors. The conflict is resolved by the second selector being more specific because of the longer search pattern.
Contextual selectors can look for element types, CLASS attributes, or combinations of these.
DIV P { font: small sans-serif }
.reddish H1 { color: red }
DIV.sidenote H1 { font-size: large }
The first selector matches all 'P' elements that have a 'DIV' among the anchestors.
The second selector matches all 'H1' elements that have an anchestor
of class 'reddish'.
The third selector matches all 'H1' elements that have a 'DIV'
anchestor with class 'sidenote'.
Several contextual selectors can be grouped together:
H1 B, H2 B, H1 EM, H2 EM { color: red }
which is equivalent to:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
CSS01