Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cascading Style Sheet List Properties Box Properties Pseudoclass

Similar presentations


Presentation on theme: "Cascading Style Sheet List Properties Box Properties Pseudoclass"— Presentation transcript:

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, … Float: left, right, none Clear: left, right, none, both

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>


Download ppt "Cascading Style Sheet List Properties Box Properties Pseudoclass"

Similar presentations


Ads by Google