CSS examples
The following examples draw on the use of classes and identifiers to set text styles.
Example one
A class has been created that can be used by any number of elements. In this case, the class is called 鈥榖odystyle鈥
.bodystyle {
color: red;
font-size: 16px;
font-family: Arial;
text-align: left;
}
To apply this style to a paragraph, the designer would need to include the name of the class within their HTML code.
藗p class="bodystyle"藘Warning 鈥 please make sure that you keep your password secure!藗/p藘
The text 鈥榃arning 鈥 please make sure that you keep your password secure!鈥 would appear as red text, aligned to the left in Arial font size 16. The style defined in the class is used to alter the properties of the text that make use of the class.
Example two
The CSS rule shown below would apply to any element using the ID 'copyright'.
#copyright {
color: blue;
font-size: 14px;
font-family: 鈥淭imes New Roman鈥;
text-align: center;
}
The HTML shown below makes use of the 鈥榗opyright鈥 ID.
<p ID="copyright">Images from this website can only be used with permission of the copyright holder</p>
The text 'Images from this website can only be used with permission of the copyright holder' would appear as blue text, aligned in the center of the page in Times New Roman font size 14. The style defined for use with any element using the ID 'copyright' has been applied to this paragraph.
Example three
The CSS rule is applied to one particular paragraph without using classes or IDs.
藗p style="font-family:Serif; font-size:14px; color:red; text-align:right;">More great offers on our discount page.藗/p藘
An inline CSS style has been used to ensure that the text 鈥淢ore great offers on our discount page鈥 appears in green, size 14 text using the Serif font-family and aligned to the right.