Cascading Style Sheets Advantages

•   Style sheets save time formatting text and objects on each page
•   Style sheets are easy to add, delete or update rules
•   Style templates never forget page formatting
•   Styles allow all pages to display uniformity
•   Styles give better control over page layout
•   Styles can be used with JavaScript and XHTML
•   Style rules applied in 3 ways: local, embed or external

CSS Enhance the XHTML Documents

• Specify font type, size, and color
• Set background color and images
• Set margin widths, padding and border styles
• List images and display
• Text and spacing properties
• Controls document printing
• Place objects in a specific place (positioning) on a page

3 Methods of Applying CSS Rules

Style Sheet rules (properties) can be applied to the html element using three methods: Inline/Local, Embed/Internal or Linked/External. These methods can be individually or in a combination of rules in a file. Most Style sheet properties are hyphenated terms font-size

1. Apply Inline Style Sheets

The style rules are placed within each XHTML element. The xhtml element followed by the style attribute, equal sign; within double quotes are the style property(ies) colon value and closed double quotes. Multiple properties are separated by semicolon.
This text is 12pt Red.
Style Format: <p style="color:#ff0000;font-size:12pt">Red Text</p>

2. Apply Embed Style Sheets

The style sheet rules are placed the HEAD element surrounded by the open and close style tag.
<style type="text/css">
h1 {font-family:Times New Roman, serif}
</style>

3. Create Linked Style Sheet

A separate style sheet file is created that is linked to the HTML documents. This master CSS file is saved with the extension .css is stored in the folder. This document contains ONLY the style sheet rules and no xhtml elements

Apply Rules with CSS Classes or IDs

The rules for the class or id are embedded in the head. Use div for block level text or span for a group of words.
.change1{font-family:Lucida Calligraphy; font-size:12pt;color:#ff0000}
<span class="change1"> Ease of Use</span>   Ease of Use

CSS Resource: