1. Cascading Style Sheet List Properties Box Properties Pseudoclass
External Style Sheet Example
Introducing Class selector
Class selector for a particular element
Class selector for any element

2. List Properties list-style-image: url( )
list-style-type: disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha

3. Box Properties Width, Height Position: absolute, static, relative
Top, Bottom, Left, Right
Border-top, Border-left, Border-right, Border-bottom
border-style: none, dotted, dashed, solid, double, groove, ridge
Margin-left, Margin-right, Margin-top, Margin-bottom

4. Box Properties (Continued)
Padding-left, Padding-right, Padding-top, Padding-bottom
visibility: hidden, visible
Z-index: …,-1, 0, 1, …

5. Pseudoclass To define a style for a certain tag state
With hyperlink there are 3 different state
Hyperlink not yet visited a:link
Hyperlink activated a:active
Hyperlink already visited  a:visited
When mouse is over the link  a:hover

6. Introducing Class Selectors
Class selectors are user made selectors. Selectors represent html tag names or element.
Class selector defines different style for the same type of html element

7. Class selector for a particular element
To create the class selector
Syntax: tagname.userdefinedNAME {……}
Example: h1.left {text-align: left;}
Example: h1.right {text-align: right;}
To use the class selector created in previous step
<h1 class=“left”>header is aligned left</h1>
<h1 class=“right”>header is aligned right</h1>

8. Class selector for any element
To define a style that can be used by all HTML elements,
Syntax: .userdefinedNAME {…….}
Example: .left {text-align: left;}
To use the above class selector,
<h1 class=“left”> header is aligned left</a>
<p class=“left”> paragraph is aligned left</a>