Our design philosophy is simple - we would like to separate content from style. The file that has the content will only have structural markup tags. There will be a separate file that will have the formatting instructions.
The stylesheet or file must have a .css extension. It is a text file made out of rules and comments. To include this file in our html document we will put a link to it in the head section of the html document like so:
<link rel = "stylesheet" type = "text/css" href = "./style.css" media = "all" />
You may also import a pre-existing style sheet and override a couple of rules. Supposing you agree to every style rule in a style sheet but would like to make the h1 header gray, you would do the following:
<style type = "text/css" >
@import url("./style.css");
h1 {color: gray;}
</style>
The style specification is applied to elements. There are various ways of categorizing elements:
A style sheet is made up of comments and rules. Comments can be
included like regular C style comments: /* ... */. Rules on the other
hand have the following structure:
Selector {property1: value1; ... propertyn: valuen;}
A selector could be elements that we have already seen or we could
define a separate class that we can apply to several elements. We
could even have multiple selectors for a rule. Like:
Selector1, Selector2, .. {prop1: val1; ... propn: valn;}
One way of defining common style rules is to group them into a class and identify which elements they apply to. For example, if I wanted to make the header or the paragraph red if it were important but not otherwise I would do:
h1.important, p.important {color: red;}
To use this style for a particular header, the markup would look like:
<h1 class = "important"> ... </h1>
To apply the same class to all elements the asterisk symbol is used as a wildcard in the rule definition.
*.important {color: red;}
There are also id selectors. An id selector is a unique identifier and must occur only once in the html document, whereas the class style maybe used several times.
In the XHTML document:
<h1 id = "veryImportant"> ... </h1>
In the Style Sheet:
#veryImportant {background: black; color: red;}
There is a structure to each html document. Each of the html elements can be represented by the nodes in a tree. Every element is either a child or a parent element or both. We say there is parent-child relation if the difference in the levels is one. However, if the difference in the levels is one or more the relationship is called ancestor-descendant. Let us examine this document and derive its structure.
Cascading style sheets allows the user to define descendant selectors and even combine them:
h1 em, p strong {color: purple;}
Notice the absence of commas between ancestors and descendants. To select children use the following syntax:
h1 > strong {color: red;}
Adjacent siblings can also be selected. The following rule states: select a paragraph that immediately follows a header and remove the top margin.
h1 + p {margin-top: 0;}
Why the term cascading style sheets? One can include (import) several style sheets within an html document. The rules are combined. Conflicting rules are resolved. Combining and resolving conflicting rules is the process that is called cascading. The conditions by each conflicting rules are resolved are not in themselves very complicated but are beyond the scope of our discussion.
CSS has two types of numbers integers and reals. You can also express numbers as percentages, but the percent (%) sign have to be used.
There are 17 named colors - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. There is an extension of about 140 named colors but not all browsers render them correctly.
Colors can also be expressed in the rgb scale using integers from 0 to 255 for each of the red, green, and blue components. Another way of expressing colors is to use the hexadecimal notation. The color white is expressed in three ways:
color: white; color: rgb(255, 255, 255); color: #FFFFFF;
Length units can be absolute or relative. Absolute length units are:
Working with absolute units is difficult, since the author of a document has very little idea of the size of the browser window and the resolution. Relative units are better. There are 3 of them:
The CSS defines five generic font families:
To specify a font family give the font names but end the list with the generic family name. Use quotation marks to include fonts that are made up of more than one word.
h1 {font-family: Times, 'Times New Roman', Georgia, 'New York', serif;}
Fonts can be given weight through the property font-weight. The font weights are: lighter | normal | bold | bolder. The default font-weight is normal.
The font sizes can be expressed in pixels or in relative units. The property font-size has the relative values: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger. The default value for font-size is medium.
You can also assign a style to a fonts through the property font-style. The values are - italic | oblique | normal. The default is normal. Most browsers do not make much difference between italic and oblique.
There are some variations that you can also include using the property font-variant. The values for this property are - small-caps | normal.
Now all of these properties and values can be combined into one property called font. You have to remember to list the values in the proper order:
font: <font-style> <font-variant> <font-weight>
<font-size> <font-family>
You can indent your paragraphs using the property text-indent. You can give the amount of indentation in em or px. Negative indentations are allowed. This will give the appearance of an overhang. Use negative indentations with care.
p {text-indent: 2 em}
Horizontal alignment is achieved through the property text-align. The values are - left | center | right | justify. There are several options for vertical alignment. You can set the property for line-height. The line-height refers to the distance between the baselines of lines of text. The line-height can be changed in length units or percentages of the font size. The property vertical-align repositions text. The default value is baseline. The other values that are commonly used are - sub | super.
The word spacing can be changed through the property word-spacing. The default value is normal. Other spacing values are expressed in length units. Similarly letter-spacing can also be changed using the property letter-spacing using length units. You want to do this with care if you want to achieve any special effect.
The text can be transformed in several ways like making everything in upper or lower case. The property is text-transform. Under normal circumstances it has the value none. The other values are - uppercase | lowercase | capitalize. capitalize only capitalizes the first letter of each word.
You may also add decorations to your text. You can underline, strike through, overline, or make the words blink ( DONT ). The property is text-decoration and the values are - none | underline | overline | line-through | blink.
The browser collapses white space between words to a single space. If you want to control how white space is rendered there is a property called white-space. The default value is normal. The others are: