Site icon WPDesigner

WP Theme Lesson #10: Hex Codes and Styling Links

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

Step 1

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

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

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;
}

Exit mobile version