Home Tutorials WP Theme Lesson #10: Hex Codes and Styling Links

WP Theme Lesson #10: Hex Codes and Styling Links

Author

Date

Updated on

Category

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

style-links

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Recent posts

LawBlog WP Theme Review

Regardless of which area of law you practice, it’s imperative that you have proper online representation. You need to give your customers a feeling...

The Deeper Meaning and Purpose Behind Shapes in Web & Graphic Design

Sometimes in web design, a clean website is often the best choice for certain clients. Instead of elaborate backgrounds or too many aesthetic choices,...

How to Easily Design a Website Without Coding

Are you looking to build a website and you don’t know how to code? Online web design services are helpful to create website templates...

The importance of SSL Certificates as part of a web hosting package

Building a successful business requires trust, and gaining trust can be difficult especially when you run a business where it is taken for granted...

How Can Domain Name Extensions Influence Your Brand Name?

Are domain name extensions important in naming your brand? The shortest answer is "Yes." In today's online world, it is the first thing that...

Recent comments