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

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

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

Box Properties (Continued) Padding-left, Padding-right, Padding-top, Padding-bottom visibility: hidden, visible Z-index: …,-1, 0, 1, … Float: left, right, none Clear: left, right, none, both

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

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

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>

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>