CSS Educational Materials
- Week 2
  - Styling
    - Texts
    - Fonts
    - Lists
    - Links

Link state

The link pseudo-classes

Web browsers commonly display unvisited links differently from previously visited ones.

[Syntax]

a:link{ Declarations }
a:visited{ Declarations }

a:link: applies for links that have not yet been visited.
a:visited: pplies once the link has been visited by the user.

The dynamic pseudo-classes

Interactive Web browsers sometimes change the rendering in response to user actions.

[Syntax]

a:hover{ Declarations }
a:active{ Declarations }

a:hover: applies while the user designates an element (with some pointing device), but does not activate it.
a:active: applies while an element is being activated by the user.

Example

[style.css]

a:link, a:visited{
  color: #ff0000;
  text-decoration: underline;
}
a:hover, a:active{
  color: #0000ff;
  text-decoration: none;
}

[index.html]

<p>Jump to <a href="http://www.google.com/">Google</a></p>
<p>Jump to <a href="http://www.yahoo.com/">Yahoo!</a>

Challenge

1. Changes the color of side navigation by link state.

[style.css]

nav ul li a:link, nav ul li a:visited{
  color: #333333;
  text-decoration: none;
}
nav ul li a:active, nav ul li a:hover{
  color: #990066;
  text-decoration: none;
}

In the next week, you will learn the Box model. It is very important in the study item of CSS.