How to Generate Document Content with CSS

Cascading Style Sheets (CSS) is used to describe how a markup language's document will be presented. It allows the reader to define document features such as colors, fonts and layouts separately from the document content which is written in the markup language. The following steps will show how to generate document content with CSS.

Instructions

Difficulty: Moderate

1. Learn the syntax of CSS. It is fairly simple and uses English keywords to specify style properties. A declaration in CSS has the following form:
   
   property:value;
   
   where property is the name of the property and value is that property's value.
2. Define a selector with the following syntax:
   
   selector_name {property_1:value_1; property_2:value_2; … property_n:value_n}
   
   where selector_name is the selector's name followed by a list of declarations delimited by semicolons and enclosed in curly braces.
3. Create CSS rules as sets of selectors that may be grouped together to form the style sheet. The markup language section of the webpage source code may then reference the selectors to activate the described style.
4. Look at the following simple example of a complete style sheet:
   
   
   
   
   
   
   
   
   This is normal bold
   
   This is the test style>
   
   
5. Study pseudo-classes in CSS. These are advanced selectors that combine an element with a suffix that allows the pseudo-class to be used only when a condition is met. For example, when A:hover {color:red;} is applied to a hyperlink, the hyperlink will become red when the mouse cursor hovers over it.