How to Create Wordpress Themes - Lesson 10

Document Sample
How to Create Wordpress Themes - Lesson 10 Powered By Docstoc
					                       WordPress Theme Tutorials
                            How to Create Wordpress Themes?

Lesson #10: Hex Codes and Styling Links
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

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
        Instead of typing:
         text-decoration: underline;
         color: #336699;


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

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:

text-decoration: none;
color: #ff0000;

Shared By:
Description: How to Create Wordpress Themes