| Example 1 | In this tutorial you will learn how to define look of your pages
from one central CSS file. Case-1 and Case-2 are based on the same HTML source, but they are using different stylesheet for their final formatting.
The stylesheet is specified by the link element. Attribute href gives the location of the stylesheet file, type attribute must have the value "text/css" and rel attribute the value of "stylesheet".
|
|---|
| Example 2 | In this example the same stylesheet is used to format different HTML sources. |
|---|
| Example 3 | CSS stylesheets are plain text files which consist one or more rules. Each rule starts with a selector (name of the element to be formatted) which followed by curly brackets "{}". The curly brackets contains individual formatting properties, which are separated by semicolon ";". Properties and their values are separated by column ":". You can see that many properties and its values are self-explanatory. |
|---|
| Example 4 | One of the most common task is specification of colors and so we will start with them. We will use them to introduce several important concepts. The color of text is specified with "color" property, the color of the background with "background-color". If a property is not defined for given element, its value is usualy inherited from elements inside which the element occurs. If even these elements does not specify any value, then browser default is used. |
|---|
| Example 5 | If several elements share the same property, this property can be specified in one place. In this case the definition in curly brackets is preceded by a list of selectors (element names) separated by commas. |
|---|
| Example 6 |
If the selector list is not separated by commas, it has entirely different meaning, it specifies contextual selectors. It affects elements matching last mentioned selector if it is inside elements specified by preceding selectors.
|
|---|
| Example 7 |
So far our stylesheets contained just one definition for each element. But it is not a rule, the number of definitions is not restricted. Semicolons ";" between individual properties we have used in previous examples are just shortcuts to this full listing.
|
|---|
| Example 8 |
In the previous example each definition for the same element defined different property. If a property is defined several times, the last definition is used.
|
|---|
| Example 11 |
So far we have used names for defining colors. There are 16 colors defined in the standard: aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow (for their display see named colors in CSS 1 Reference).
There are several other notation how to specify a color, see CSS 1 Reference for more details. In our example aqua is defined using these notations.
|
|---|
| Example 9 |
Sometimes we would like to distinguish between elements of the same name. In this case class attribute on these elements comes very handy. In stylesheet the required element is marked by its name, followed by "." and the value of class attribute.
|
|---|
| Example 10 |
If the name of class is not preceeded by element name, than all relevant element are set. The definition with a class with element name has precedence before another one without it.
|
|---|
| Example 12 | CSS 1 contains several properties influencing display of individual characters. Their size is determined using "font-size" property. This size can be given either by an absolute size keyword selected from the following list: [ xx-small | x-small | small | medium | large | x-large | xx-large ] (Case 1), using relative size keyword [ larger | smaller ] (Case 2) or using (Case 3 and Case 4) units (a comparison of individual units can be found in the CSS 1 reference
|
|---|
| Example 13 |
Properties "font-style" [normal | italic | oblique], "font-variant" [normal | small-caps], and "font-weight" [normal | bold | bolder | lighter | 100 | 200 | 300| ... | 900] specify shape and boldness of the character. Larger number in "font-weight" means bolder character, "bold" is synonymous to "700", "normal" value is "400".
Case 1 compares styles and variants, Case 2 weights.
|
|---|
| Example 14 |
Text can be underlined or a line can be drawn above the text or through the text. This effects can be achieved with "text-decoration" property.
|
|---|
| Example 15 |
Text alignement can be specified with text-align property with values left, right, center, and justify.
|
|---|
| Example 16 |
There are many properties used for setting the border of elements.
|
|---|
| Example 17 |
This tutorial gave just a short introduction to the power of stylesheets. CSS 1 offers many more possibilities and its power was multiplied by CSS 2. As the next step toward mastering CSS we recommend a careful study of our complete CSS 1 reference with many additional examples and properties not mentioned in this introductory material.
|
|---|