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
         violet.

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

				
DOCUMENT INFO
Shared By:
Stats:
views:8
posted:12/6/2010
language:English
pages:2
Description: How to Create Wordpress Themes