Text Decoration & Pseudo Classes

Text Decoration

• J08a - (1:47)
  • Options:
    • overline
    • line-through
    • underline
    • blink (causes intermittent visibility, never supported by IE, supported by FF ...don't use it!)
    • none
  • This property is not inherited.

Pseudo Classes

• J08b - (1:44)
  • Basics:
    • A pseudo-class is a css class that requires action by the viewer.
  • There are about 15 pseudo classes but IE browsers, including IE8, do not support most of them. The ones we discuss below are supported by all browsers (see >IE7 exception in a:focus).
  • Pseudo classes are often used for rollover text links.
  • The different stages of pseudo classes are often similar to each other even though a wide variety of css properties can be used.
    • The simple fact is that you wouldn't want any one pseudo stage of a text link to look too different from other stages because it might be an unpleasant and disconcerting jolt to the viewer.
    • It also might make visitors think that they are looking at a mistake because it may effect all the surrounding text when the font size or family abruptly changes.
• J08c - (4:01)
• To style links and make rollover text, the following pseudo classes can be used. At a minimum, a:hover must be used. That is the pseudo class that provides the rollover effect.
• Following are the pseudo classes that can be used with links (with the exception of the first rule which is not a pseudo class).
• These are listed in the sequence that they must be in within the css style sheet:
  1. a
  • It's a good strategy to define the anchor tag first.
    • Some sites will only have rules for a and a:hover and none of the other pseudo classes because hover is the effect that most people care about.
  • The reason for making a rule for the a element in addition to the pseudo classes is that sometimes certain properties may need to be applied all pseudo classes. Using the a element selector is the way to do it and save code.
  • In the example code below, the a rule is used to make all uses of the a element italicized.
  • Another example: if you wanted all links to not have an underline, then you would use text-decoration: none; as a part of the a tag rule. Then each pseudo class would not need to include that rule because it gets globally applied to all variations of the a element.
  • Each of the pseudo classes below will include the rules set by the a element
  2. a:link
  • This specifies the default appearance of the link.
  3. a:visited
  • This is the appearance of the link after visiting the site that it links to.
  4. a:focus
     • This is the appearance of the link when the tab key (or other non-mouse methods) are used to get to a link. This is good to provide for purposes of accessibility.
     • As a rule, you ought to use it whenever you use a:hover
     • The a:focus rule can be identical to a:hover because they both represent proximity to a link.
     • Supported by IE7 and later.
  5. a:hover
     • The appearance when hovering over the link.
     • This is the rollover appearance.
  6. a:active
  • The appearance after clicking on a link, but before the link is completed.
  • This state is often so brief that the style is not seen.
• J08d - (3:23)
• In css code, you must list the five pseudo states in the order shown above.
  • LoVe HAte - is a well-known mnemonic device for remembering this sequence.
  • Unfortunately with a:focus being used, the mnemonic device does not work!
  • Can you come up with a new mnemonic for the letters LVFHA?
  • Robert Mitchum in Night of the Hunter - check the tattoos on both hands.
• The code below is styling this link

Assignment

• J08e - (6:27)

1. Create a new html file and name it yourlastname_J08.html
2. Create one paragraph of Lorem ipsum text.
3. Inside it, convert three separate long words into links going to, respectively:
   1. http://www.w3.org/wiki/CSS/Properties
   2. http://en.wikibooks.org/wiki/Cascading_Style_Sheets
   3. http://reference.sitepoint.com/css/propertyref
4. Do not modify the default blue and purple link appearances.
5. Do not add the target attribute.
6. In all of the following steps of this exercise, for the next two paragraphs that you will be creating, when styling each appearance of a link:
   • Use one of these css color specification methods for all the colors:
     • color names
     • hex
     • rgb percent
     • rgb integer
   • Whatever color specification method you choose, use it for specifying all the colors.
   • The colors must all be easy to uniquely distinguish and identify by anyone's standards for each of the different pseudo stages you will create.
7. Copy the paragraph and paste it beneath the first paragraph.
8. Insert into the <p> tag of the copied paragraph this attribute and value:
   • id=yourfavoritecity (insert your favorite city)
9. Define a compound selector that will limit the following two rules to only that paragraph. Specify the properties and values that are shown below each rule name:
   • a
     • Dark red with no underline.
   • a:hover
     • Bright green with an underline.
   • Use the id selector to specify a default text color for the paragraph that will work well with the links.
10. Copy the first paragraph again.
    • Paste the copy underneath both of the other paragraphs.
    • This will make three paragraphs total.
11. Insert into the <p> tag of the newly copied paragraph this attribute and value:
    • id=yourfavoritesport (insert your favorite sport's name)
12. Define a compound selector that will limit the effect of all the following rules to the newest paragraph.
    • Give each pseudo class unique combinations of either underlining or no underline along with a different color for each pseudo stage:
      • visited
      • hover
      • active
      • focus
      • link
    • Warning: There is something tricky about the list above, do you know what it is?
    • Hint: I have a love-hate relationship with the world.
13. Use the id selector for the paragraph to once again specify a default text color for the paragraph text that will visually work well with the links.
14. I thought I'd add this last step so that you will have good luck with this exercise, instead of ending with step 13!
    ;-)

Further Information

• Whatever:hover
• CSS Pseudo-classes
• :focus (CSS selector)
• pseudo-class, pseudo-element, pseudo-CSS: IE/Win bugs with :first-letter, :hover & Co.
• 5 Advanced CSS Pseudo Classes that will Save your Day | DevSnippets internet explorer 7 - :hover pseudo-class of CSS does not work in IE7 - Stack Overflow

© 2014 Dan Hitchcock Vaughan and licensors