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 ‘bodystyle’
.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 ‘Warning – 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: “Times New Roman”;
text-align: center;
}
The HTML shown below makes use of the ‘copyright’ 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 “More great offers on our discount page” appears in green, size 14 text using the Serif font-family and aligned to the right.
