Cascading Stylesheets (CSS)
Web pages rarely consist of pure (X)HTML code these days because the formatting capabilities of
(X)HTML are very limited--more so, if the author conforms to best practices for semantic coding.
Cascading Stylesheets (CSS) is a language which enables the separation of content from presentation
formatting. This allows for different renderings of the same markup in different circumstances. For
instance, one could use CSS to display all links in blue on a web page but not in print (since it is not
possible to click on a link on a printed page).
The term "stylesheet" refers to the fact that styling information can be placed at the beginning of the
(X)HTML document or in another file altogether, where it governs the styling of the entire document.
It is also possible to use the CSS language for inline styling--that is, styling individual elements at
their point of occurrence--and this is the easiest way to begin learning CSS. The term "cascading"
refers to the fact that there is a priority scheme for which CSS rules take precedence when multiple
rules apply to the same element. The easiest aspect of this cascading effect to understand is that the
rule given last has priority over any rules given previously. So if a CSS rule specifies that text should
be red and, in the next line, a rule specifies that it should be green, the text will be green.
CSS rules are expressed in the form of a property and a value, separated by a colon. For example,
the declaration color: green will make the text appear green. Multiple declarations can be given
separated by semicolons (which are commonly used to indicate line breaks in programming). For
instance, color: green; font-weight: bold; will render the text green and bold. (The semicolon
after "bold" is not necessary but is often added as a matter of convention.)
Inline Styling Using CSS
For inline styling, (X)HTML has a"style" attribute (@style) which invokes the CSS language. Consider
the following example:
This is a paragraph containing some text in green.
This will appear as
This is a paragraph containing some text in green.
@style can be applied to any (X)HTML element.
Using Stylesheets
What if you wanted to make all your paragraphs display in a larger font than the browser's default
font? The CSS rule for this would be font-size: larger. However, you would not want to type
for every paragraph in your document. A better way to achieve this
effect is with a stylesheet. This is a set of CSS declarations given in the document's
element.
(X)HTML has a special element, the
The font size of this paragraph is larger than the
browser's default size.
