CSS Link Selectors

Quick Copy Boxes

<a> selectors

HTML for box above

<a> selectors- with class

HTML for box above

<a> hover

<a> hover with class

<a> link

<a> visited

<a> active

CSS can be used to custimize links and navigation menus. A navigation menu is basically a list of links.

At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Example Navigation Menu


   <ul>
     <li><a href = "index.php">Home</a>
     <li><a href = "blog.php">Blog</a>
     <li><a href = "photos.php">Photo Gallery</a>
     <li><a href = "https://www.facebook.com/codingcommanders/">Facebook</a>
   </ul>;

If you are not familar with lists visit HTML Lists and CSS Lists. If you are not familar with <a> elements visit HTML Navigation.

Hover Selector

When the user hovers over a link, changes often occur. Look at the menu below. What happens when you hoover over the links?

Example Menu

Notice the background turns white and the text turns black? That is done with the hover selector. Let's look at the code.

CSS

/* Text & background color on hover*/ a:hover { color: black; background-color: white }

➼ a:hover <a> hover selector - For <a> elements, when hover is true:
➼ text color - will be black

AND

➼ background-color - will be yellow.

HTML

<a href = "blog.php">Blog</a>

Link Selector

In the example menu, you may also have noticed the link text was white before you visited the associated page. Unvisited links are styled by the link selector.

CSS

a:link { color: white; }

➼ a:link - <a> link selector -
The CSS code applies to unvisited links.
➼ color
Links that have Not been visited will have white text.

HTML

<a href = "blog.php">Blog</a>

Visited Selector

The visited selector is used to style link that have already been visited. In the example menu, visited links have pink text.

CSS

a:visited { color: pink; }

➼ a:visited - <a> visited selector -
The CSS code applies to unvisited links.
➼ color
The text color will be pink, for links that HAVE been visited.

HTML

<a href = "blog.php">Blog</a>

Active Selector

Once you click on a link, it becomes active

CSS

a:active { background-color: hotpink; }

➼ a:active - <a> active selector -
The CSS code applies to active links.
➼ color -
The text color will be pink, for links that HAVE been visited.

HTML

<a href = "blog.php">Blog</a>

Text-decoration

Sometimes links have decoration such as an underline. I generally do not like decoration on my links, but there are situations that may call for it. By default <a> elements have an underline. Here are possible options:
✶ none
✶ underline
✶ overline
✶ line-through

Here is example code:


  a {
      text-decoration: underline;
  }

However, text decoration is not limited to links. You can add decoration on other elements, such as headings.

Classes with Selectors

You may not want all links styles the same. To give you this ability, we will use CSS classes.

Let's choose a class name.
Class Name: myMenu
Now let's see how the above selectors are rewritten for your myMenu class.


/* a selectors for myMenu class*/

/* Hover selector*/
.myMenu a:hover {
  background-color: white;
  color: black;
}

/* Unvisited Selector*/
.myMenu a:link {
  color: white;
}
/* Visited selector*/
.myMenu a:visited {
  color:pink;
}
/* Visited Hover*/
.myMenu a:visited:hover {
  background-color: white;
  color: black;
}
/* Active Selector*/
.myMenu a:active {
  background-color: hotpink;

Note: The hoover selector can be applied to other elements, not just a links. It is common to use hover with buttons, links and list items.

Color Selector

Hex:

RBG:

Intro to CSS: Link Selectors

Example Navigation Menu

Hover Selector

Example Menu

CSS

AND

HTML

Link Selector

CSS

HTML

Visited Selector

CSS

HTML

Active Selector

CSS

HTML

Text-decoration

Here is example code:

Classes with Selectors

Project - Part II: Adding Navigation