Download
pseudo classes and pseudo elements n.
Skip this Video
Loading SlideShow in 5 Seconds..
Pseudo Classes and Pseudo Elements PowerPoint Presentation
Download Presentation
Pseudo Classes and Pseudo Elements

Pseudo Classes and Pseudo Elements

263 Vues Download Presentation
Télécharger la présentation

Pseudo Classes and Pseudo Elements

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Pseudo Classes andPseudo Elements AWAR4S April 2012

  2. Specifying Special Elements in CSS We have seen how to specify all elements matching certain criteria in our CSS files: • We can simply write in the name of the element, and have the rules apply to all elements of that type, eg: p {color:blue;} • We can tag elements according to a class or an id in our HTML document, and specify these in our rules, eg: p.special {color:red;} Now we wish to use some defaults which CSS recognizes in order to save us some time in our CSS…

  3. Pseudo Classes There are certain handy defaults which CSS recognizes, and which we can use in order to specify styling for elements which often need special styling… • The first-child selector automatically selects the first “child” element of another element which you specify. It can be used to apply styling to the first block element inside of the block element which has been specified. • Eg: p.first-child {color:red;} will turn any paragraph which is the first child of any other element into red text. • For the full reference, consult http://w3schools.com/css/css_pseudo_classes.asp

  4. Pseudo Elements There are also default styling selectors for adding style to the first line or first letter of a block element: • first-line • first-letter See http://w3schools.com/css/css_pseudo_elements.asp for full examples.

  5. Assignment In either a new project, or in a copy of an existing project, apply the following custom CSS rules using pseudo classes and pseudo elements… • Make the first child paragraph in the main content area be bold. The CSS command for bold text is earlier on in the tutorial… • Make the first child paragraph in any sidebars be italicized. Again, this can be found in the CSS tutorial. • [More challenging] Make the first letter in an existing class or id be formatted in the largest font which makes sense. It is ok if it appears to be too large! You may have to write a class or id if one isn’t already in your project. Keep in mind that ONLY ONE LETTER should be selected and styled!