CSS Link Selectors
Home Learning Path LAMP HTML/CSS PHP MySQL JavaScript YouTube Blog PHP Fiddle

Intro to CSS: Link Selectors

Quick Copy Boxes



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:

To continue making the example menu, and learn how to make horizontal menus, continue to the next lesson: CSS Menus.

Project - Part II: Adding Navigation

Project - Part I: Is explained on the bottom of CSS Color Lesson.
Continue working on the ad you started in Part I.
Project -Part II Assignment: Create a Navigation Menu for your ad.
The menu should have links to:
1) www.codingcommanders.com
2) The ad you are making (from Project: Part I)
3) A new page you create (you choose the content!)
Happy Coding!


Play with the code in the code editor below.