Mar.10.2007

WP Theme Lesson #10: Hex Codes and Styling Links

Small Potato

tutorial-series.gif 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, 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.

Step 1

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

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

style-links.gif

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

What's Next?
wispy:

hey! finally caught up with the lessons :D gr8 stuff rly, easy to follow, not to hard/stressful but also its not to easy/boring ^^. Searched for a week for wordpress tutorials and these are by far the best available :D .

May i ask how many lessons (do you estimate) are left/how many days before the set is completed? Sorry dnt like w8ing ^^

thx again
wispy

Small Potato:

Thanks wispy. I haven’t laid out all the lessons yet, but we’re passed the half way mark. After you’ve learned how to put a basic theme together, I’ll write some extended lessons to cover more advance stuff.

lilacflower:

Where you have

Instead of typing:
a:link, a:visited{..

Did you mean

Instead of typing:
a:link{..

??

Thanks for putting this tutorial together, it is very awesome :)

Small Potato:

You’re right. I fixed it.

I took a look at your progress. Don’t apply the border to container. That’s a no no :)

lilacflower:

I took a look at your progress. Don’t apply the border to container. That’s a no no :)

Epp! I’m being watched! :) ) I was trying out a large image in a post and it was throwing my text off… I put in the border to try to figure out what was going one and forgot to remove it *blushes* Site looks a lot better now with the border *nods*

Daniel Barr:

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

I think you meant either ffffff or red…;)

Thanks for these tutorials man, I really think they are nice! I’ve been designing for vb for 3 years…and changing from that to wordpress is quite a change…so i was looking for some ‘from scratch’ tutorials…and these are the best yet :D

D.M. Cook:

I’m switching the underline tags (so links are no-decoration by default and get underline on hover) but it isn’t working– saved both files etc. and still can’t get the hover effect to work. I’ve got a: link, a:visited { } and immediately underneath have a: hover{} just as you said…

Small Potato:

Are you doing that to your current blog, evolationmedia?

D.M. Cook:

No, just in an offline WordPress install. The evolation theme is someone else’s (for now).

Small Potato:

Ok. Could you post your question at the forums? I’ll help you there.

All about Wordpress - Themes - Plugins » Creating a WordPress theme from scratch:

[...] Form and Calendar #6e Widgetizing Sidebar #7 Footer #8 How to Validate #9 Style.css and CSS Intro #10 hex Codes and Styling Links #11 Widths and Floats #12 Post Formatting and Miscellaneous #13 Styling Sidebar #14 Footer and [...]

Josh:

“The first two digits represent red, second and fourth represent green, and last two represent blue.”

I think you meant, second and third represent green. :-)

Small Potato:

Thanks Josh. It’s fixed.

tcalo:

hi, great tutorial!!! thanks! I have been using wordpress for a while and now I feel ready to try to make my own theme, your tutorial is my starting point. Hope to come back soon to tell you how I got it done :)
bye,
t.

Benjamin Lambe:

the (#) is not a pound sign it is a hash sign, a pound sign is £

:-)

Alice:

Okay, I have followed this tutorial from the beginning and cant believe how easy it is to follow and effective it is at teaching the different concepts. However I have reached this point (step #1 on this page) and find it to be incredibly confusing, but I guess I’m the only one. Also there are no more forums??

No matter what I do the text link color does not change. I think it’s because of where I’m putting the codes. It says “under the body selector” but I think it should include in the screenshot a little more of a view of what you mean. I have typed and re-typed and am about to give up.

Alice:

Hi, I am posting my own answer to my above question: I was putting the link color property tag inside the brackets of the body selector, because I was way to tired. Ha! Thanks again.

WP Themes Tutorial #10: Hex Codes dan Styling Links : Mochammad Kurniawan:

[...] WP Theme Lesson #10: Hex Codes and Styling Links oleh Small Potato diterjemahkan oleh Mochammad [...]

ddave:

Thanks for the great tutorial. I am following along just fine and really excited about the possibilities. I am actually using the posts in my tutorial site as a journal containing my own comments about each lesson. It’s self documenting my experience! Really happy. maybe you’ll find referrals to your site from ‘site3.dev.local’ :)

I was a little thrown off about where exactly to type the “a:link, a:visit” block of text. The tutorial text says “under the the body{ } selector:”. I typed the “a:link” block just under the word “body” above “margin: 0;” and had a terrible time. Ulimately through trial and error, I figured out that I need to place the “a:link….” outside the entire “body” selector…i.e. after the closing “}” for the “body” selector.

Nontheless, it forced me to really dive in and commit it to understanding. It’s not a bad thing to have trouble while learning as it really does reenforce the lesson, but when you are experiencing the trial it seems like a pain.

Thanks so much for this tutorial.

Dave.