Pseudo Classes and Grouping Selectors

Define Pseudo First-Letter for the Drop Caps Effect :first-letter

Several xhtml elements can be defined with the same property and values thus saving time. Each selector (element) is separated by a comma and the definition is in the curly brackets. Even classes and ids can be included in a single definition.

#firstl:first-letter{float:left; font-size:400%; line-height:0.8}

Define Pseudo First Line Class :first-line

Pseudo classes/selectors are predefined group of elements used with style sheets. Hyperlinks or Anchors have four properties that can be changed using style rules. The state of the anchor determines the property displayed - unclicked link, visited, hover and active. The hover pseudo-class must be listed after the link and visited pseudo-classes. The active class is listed last. Anchors can be in more than one state at a time, therefore define the classes in order.

#firstl:first-line{font-variant:small-caps;color:#ff0000}

Pseudo Elements- Anchors

A pseudo-class is the name given to a group of elements based upon their current state or position.

a:link
Link on the Page a:link {text-decoration:yes} - link on the page
a:visited
Visited Link a:visted {color: #008080; text-decoration: underline}  visited link
a:hover
Hover Link a:hover {background:red} mousing over link
a:active
Active Link a:active {text-decoration: underline} mouse on the link
first-letterThe first letter of the element text
first-lineFirst line of the element text

Define Multiple Selectors

Several selectors are defined at one time by separating each with a comma and applying the CSS property and values.

<style type="text/css">
p, li, td {font-size:12pt}
blockquote, .sm {text-style:bold}
</style>

Drop Shadow Effect with CSS

Web Design with XHTML Part II
Doris Cuffey, Instructor