CSS Cascading Style Sheets

External Resources

• W3C Cascading Style Sheets
• ALA

Examples

• Formating links

  • Alternative :hover underlined

    Description

    When a:link is configured without underlining, but the a:hover pseudo class is set to render underline, the web page's layout sometimes may shake upon link selection, depending which Browser is used.

    Example 1 below would actually render a box frame around the link. To render an underline, use border-bottom: 1px solid #06c; additional margin and padding values may be used to fine-tune the line's appearance. In this scenario, the layout would shiver due to the font-weight: bold; statement, not the underline, neither classical, nor alternate approach.

    Example 1:

    a:hover, a:focus {
        border-bottom: 1px solid #0066cc;
        color: #0066cc;
        font-weight: bold;
        text-decoration: none;
    }
    

    A more effective approach (Example 2) to this would be a super-class which adopts or inherits the values of a selected sub-class. The main problem is, that if the font-weight is bold i.e. Firefox renders the underline bold in the oposite to other Browsers like Opera. That's the reason why I prefer example 1.

    Example 2:

    /* super class */
    a, .noUnderLine {
        text-decoration: none;
    }
    

    /* sub class */
    a:hover, a:active, a:focus, .uLine {
        text-decoration: underline;
    }
    

  • More about link formatting...