pseudo-class selectors in css

8
WEB DESIGN – SEC 4-11 P AR T OR AL L OF TH IS L ES SON WAS A DA PT ED FR OM TH E UN IV ERS IT Y OF WA S HIN GT ON ’S W EB D ESI GN & D EV EL OPM EN T I CO U RSE M AT ER IAL S PSEUDO-CLASS SELECTORS IN CSS

Upload: calix

Post on 24-Feb-2016

35 views

Category:

Documents


0 download

DESCRIPTION

Pseudo-class Selectors in CSS. Web Design – Sec 4-11 Part or all of this lesson was adapted from the University of Washington’s “ Web Design & Development I ” Course materials. Objectives. The student will: - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: Pseudo-class Selectors in CSS

W E B D E S I G N – S E C 4 - 1 1P A R T O R A L L O F T H I S L E S S O N W A S A D A P T E D F R O M T H E U N I V E R S I T Y O F W A S H I N G T O N ’ S “ W E B D E S I G N

& D E V E L O P M E N T I ” C O U R S E M A T E R I A L S

PSEUDO-CLASS SELECTORS IN CSS

Page 2: Pseudo-class Selectors in CSS

OBJECTIVESThe student will:• Be able to use the :hover, :focus,

and :active CSS pseudo-classes on a web page to help the user track their current position on the page.• Be able to use the :first-letter pseudo-class

to distinctly stylize the first letter of a block of text.

Page 3: Pseudo-class Selectors in CSS

PSEUDO-CLASSES

• CSS pseudo-classes are used to add styles to selectors, but only when those selectors meet certain conditions. • A pseudo class is expressed by adding a colon (:)

after a selector in CSS, followed by a pseudo-class such as "hover", "focus", or "active", like this:

a:hover {

/* your style here */}

Page 4: Pseudo-class Selectors in CSS

PSEUDO-CLASSES

• The idea with pseudo-classes is that you can stylize elements differently when users are hovering over them (:hover) or tabbing to them with the keyboard (:focus) or at that exact moment when users are selecting a link (:active). • You can also stylize links differently after users

have visited them (:visited). • There are many other pseudo-classes available.

See the W3Schools CSS Pseudo-classes page for more information.

Page 5: Pseudo-class Selectors in CSS

USING CSS PSEUDO-CLASSES TO HIGHLIGHT USER'S POSITION

• When a user points to an object on a web page with a mouse, it's helpful if that object responds in some way. • For example, when a user hovers over a link, the color and

background-color of that link could be reversed. In the following example CSS, all links on a page are stylized as black on a white background, but when a user hovers over the colors are reversed.

a { color: black; background-color: white;} a:hover { color: white; background-color: black; }

Page 6: Pseudo-class Selectors in CSS

USING CSS PSEUDO-CLASSES TO HIGHLIGHT USER'S POSITION

• For people who are navigating by keyboard (for example, by pressing tab to move through links on the page), this functionality is even more critical, because it's often very difficult for keyboard users to keep track of their location on the page.

• Most web browsers provide some visual indication of which element currently has focus, but in some of the leading browsers this is simply a thin dotted line that is very difficult, if not impossible, to see, especially against certain backgrounds.

• To add the same functionality for both keyboard and mouse users, we simply add the :focus pseudo-class to our earlier definition, like this:

a { color: black; background-color: white;} a:hover, a:focus { color: white; background-color: black; }

Page 7: Pseudo-class Selectors in CSS

REST OF TODAY

• Download Homework 4-11 from the Hancock Website. Complete the changes. • You will add :hover and :focus CSS code for your

“a” links and customize the first letter in your overview paragraph.

Page 8: Pseudo-class Selectors in CSS

REST OF TODAY• Your page should look something like

this…