Follow this WordPress Theme Tutorial Series from the beginning.

Continuing from yesterday’s introduction to CSS, we’ll do more coloring and learn more about hex codes. The color property, followed by a hexadecimal (hex) code, is for coloring texts (words). For example, body { color: #000000;} means all texts (words) in the body of your page will be black.

The background property, followed by a hex code, is for coloring anything that’s not text. For example, body{ background: #ffffff; } means white background for the body.

Hexadecimal Codes

• Preceded by a pound sign (#) each hex code has six digits. Those numbers range from #ffffff (white) to #000000 (black).
• #ffffff, #eeeeee, #dddddd, #cccccc, #bbbbbb, #aaaaaa, #999999, #888888, #777777, #666666, #555555, #444444, #333333. #222222, #111111
• The first two digits represent red, second and fourth represent green, and last two represent blue. #ff0000 is red. #550000 is dark red. #220000 is darker red. #00ff00 is green. #0000ff is blue. Wait, isn’t yellow a primary color? Which hex code is yellow? #ffff00 is yellow. #ff00ff is violet.

Step 1

Type the following codes under the the body{ } selector:

a:link, a:visited{
text-decoration: underline;
color: #336699;
}

• What was that for? You made sure all your links are underlined (text-decoration: underline;) and blue (color: #336699;). It’s a different shade of blue and it’s blue because the last two digits (represent blue) are the highest numbers.
• a:link is for styling links. When you want to turn a word into a link, what do you use? The <a> and </a> tags, hence, the A in a:link.
• a:visited is for styling links that have been clicked on (visited pages), hence, Visited in a:visited.
• Instead of typing:
  a:link{
  text-decoration: underline;
  color: #336699;
  }AND

  a:visited{
  text-decoration: underline;
  color: #336699;
  }

• You used the comma to separate a:link and a:visited while applying text-decoration: underline; and color: #336699; to both selectors.

Step 2

Type the following codes under a:link, a:visited{ }

a:hover{
text-decoration: none;
}

What was that for? You made sure that the link underline disappears when you hover the cursor over a link, hence, Hover in a:hover.

If you don’t want to underline by default and underline when you hover over then switch the text-decoration: value for a:link and a:hover.

If you want change the color of your link on hover then add color: and whichever hex code you want. For example:

a:hover{
text-decoration: none;
color: #ff0000;
}