ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
CSS Tutorial - Index
CSS Tutorial - Introduction to CSS
CSS Tutorial - Basic CSS Concepts
CSS Tutorial - Linking Style Sheets
CSS Tutorial - Text Formatting
CSS Tutorial - Backgrounds
CSS Tutorial - Fonts
CSS Tutorial - Borders
CSS Tutorial - Margins and Padding
CSS Tutorial - Lists
CSS Tutorial - Dimensions
CSS Tutorial - Display and Positioning
CSS Tutorial - Pseudo Classes and Elements
CSS Tutorial - W3 Standards,Validation of Style
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

   
  Home > Courses, Tutorials & eBooks > CSS Tutorial > Pseudo Classes and Pseudo elements
 

CSS Tutorial - Pseudo Classes and Pseudo Elements

    Page 1 of 2
 
Overview
 

In this chapter you will learn

  • What are pseudo classes?
  • Adding special effects with pseudo classes and pseudo elements
  • Determining the style rules for a sub part of an element's content
 
 
Pseudo classes are added  to define style rules for selectors. They add special effects to certain selectors. Pseudo classes are automatically recognized by CSS supporting browsers. Pseudo elements are pseudo classes that allow you to define the style rules for a subpart of an element's content. Pseudo classes and pseudo elements are always preceded by a colon. Most pseudo classes and elements also require to be explicitly associated with only some specific tags, since they don't make sense when applied to other elements. 
 
Syntax
Selector : pseudo-class { property : value;}
 
 

With pseudo classes you have the ability to add effects to your anchor tags, otherwise known as 'hyperlinks'.

Some most common pseudo classes used for styling hyperlinks are :

: Link

Link pseudo-class specifies the style rule for unvisited links, i.e. the link which has not yet been clicked or the mouse pointer has not passed over it.

Example
A: link { color : green ;}
 

:Visited

Visited pseudo-class specifies the style rule for visited links, i.e. the link which has already been clicked. Once the user has visited the link, its color is usually changed, so that the user recognizes which links are still unvisited.

Example
A : visited { color : red  font-weight : bold ;}
 

:Hover

Hover pseudo-class specifies the style rule for element that is presently under the mouse cursor. The cursor is said to hover over the link.

Example
A : hover { color : yellow;}
 

:Active

Active pseudo-class specifies the style rule for element that is presently under the focus, i.e. the link has been currently selected.

Example
A : active { color : black   font-size : 18pt;} 
 

 

Note
The order in which these pseudo-classes should be used is a: link, a: visited, a: hover and then a: active, so as their definition is effective.
 
 

:First-Child

It specifies the style rule to the first element which is contained inside a parent element.

Example
p : first-child { color : gray;}
 

:Lang

It specifies the style rule to the contents of an element that has been written in a foreign language. The language code is to be declared before enclosing the language code within the parentheses.

Example
p : lang ( fr ) { color : purple;}
 

This is not well supported by browsers.

Pseudo-elements are very similar to pseudo-classes but also define contents within the document. Pseudo-elements determine the style rules for a sub-part of an element's content.

 
 
Syntax
Selector : pseudo-element { property : value}
 
 
 

Some of the pseudo-elements are defined below.

:First-Letter

It allows you to add styles to the first-letter of an element. This pseudo-element is mostly used with paragraph elements to enhance the appearance of first-letter in the paragraph.

 
 
Syntax

  p : first-letter { color -red; font-size:18pt;}

                      First letter is red.

 
 

:First-Line

It allows you to add styles to the first-line of an element. This pseudo-element is mostly used with paragraph elements to enhance the appearance of first-line in the paragraph.

 
Example

p : first-line { color-yellow; font-size:18pt;}

                      In this example, only the first line has the font color yellow. Rest of the paragraph         follows the blue color. Also, the font-size of the first line is 18 pts, whereas the rest of the lines have font-size as 12 pts.

 

:Before

It allows you to add some content before an element. This pseudo-element is used in conjunction with the content property. You can also specify the styles to the content.

Example

p : before { content : "SURPRISE !!!";}

SURPRISE !!! You have won a lottery ticket.

 

This is not supported by certain web browsers.

:After

It allows you to add some content after an element. This pseudo-element is also used in conjunction with the content property. You can specify the styles to the content.

Example
after { content : "BETTER LUCK NEXT TIME";}
This is not supported by certain web browsers.
 

 

Review Questions
 

Fill in the Blanks

  1. Pseudo-classes and pseudo-elements are always preceded by a _____.
  2. _____ pseudo-class specifies the style rule for visited links.
  3. _____ pseudo-element add styles to the first line of an element.
  4. : before a pseudo element is used in conjunction with _____ element.
Solutions
  1. Colon
  2. :visited
  3. :First-line
  4. content

 

State Whether True Or False

  1. Pseudo elements and classes can be applied in conjunction with any tag.
  2. The :Link pseudo-class can never be used before :hover pseudo-class.
  3. :Lang pseudo-class specifies the style rule to the contents of an element that has been written in a foreign language.
  4. H1 : first-letter{ color-purple}, will set the first character of the heading of purple color.
Solutions
  1. False
  2. False
  3. True
  4. True
Exercise
Apply different pseudo-classes and pseudo-elements within a document.
Solution
View Code         View Runtime

What's Next

The next chapter will tell you about the basic concepts of W3 standards and its versions. The chapter will further elucidate about validation of a style.

                  Hop over to the next chapter to get a  close-up on W3 standards.


 

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2006. All Rights Reserved.