Part 3 - CSS 2.pdf - CSS Cascading Style Sheets(Continue Selector forms Recall the CSS rule The rule selector can take several forms indicating

Part 3 - CSS 2.pdf - CSS Cascading Style Sheets(Continue...

This preview shows page 1 - 7 out of 22 pages.

CSS C ascading S tyle S heets (Continue)
Image of page 1
Selector forms Recall the CSS rule The rule selector can take several forms indicating different semantics. Rule Selector forms Simple Class Generic class Id Universal Psudo
Image of page 2
Selector forms - Continue Simple Selector Forms The selector is a tag name or a list of tag names, separated by commas Examples: p { … } h1, h3 { … } Class Selectors Used to allow different occurrences of the same tag to use different style specifications The class is specified with the class attribute Names begin with dot ‘.’ Examples, p.narrow { … } p.wide { … } <p class = "narrow" > ... </p> ... <p class = "wide" > ... </p>
Image of page 3
Selector forms - Continue Generic Class Selectors A generic class can be defined if you want a style to apply to more than one kind of tag Examples: . sale { … } Id Selectors id selector allows the application of a style to one specific element Names begin with hash ‘#’ Example: #section14 {...} Universal Selectors Applies to all elements in the document * {color: red;} < h1 class = "sale"> Weekend Sale </h1> ... < p class = "sale"> … </p>
Image of page 4
Selector forms - Continue Pseudo Classes Pseudo classes are styles that apply when something happens, rather than because the target element simply exists Names begin with colons ‘:’ hover ” classes apply when the mouse cursor is over the element focus ” classes apply when an element has focus visited ” classes apply to the element after being clicked active ” classes apply to the element before being clicked first-line classes can specify format of first line in page or paragraph first-letter ” classes can specify format of first letter in page or paragraph
Image of page 5
Selector forms - Continue pseudo-elements are used to address sub-parts of elements can specify appearance of link in various states :visited :active :hover can specify format of first line in page or paragraph :first-line can specify format of first letter in page or paragraph :first-letter Danger : changing the look of familiar elements is confusing Careful : current browsers do not support all CSS2 features <html> <! - CS211 page19.html --> <head> <title>Title for Page</title> <style type="text/css"> a { color : red ; text-decoration : none ; font-size : larger } a: visited { color : black } a: active { color : orange } a: hover { color : blue } p: first-letter { font-size : large ; color : white ; background-color : darkblue } </style> </head> <body> <p> Welcome to my Web page. I am so happy you are here.
Image of page 6
Image of page 7

You've reached the end of your free preview.

Want to read all 22 pages?

  • Winter '19
  • Cascading Style Sheets,  P

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture