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, third 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.
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:
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.
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;
}