| A class is the blueprint from which individual objects | | | | element, the one with the higher specificity is applied. |
| are created. In Java, a class is used to show a set of | | | | If you put them in the wrong order, you could end |
| like items. | | | | up with a page that isn't showing your style rules as |
| Here is an example of a hyper link going to a site | | | | you intended them. |
| using a class: title="Home Page">Elite Web Strategies | | | | The only two that you can change the order on are |
| a:link { color: #000000; background-color: #ffffff } | | | | the a:link and a:visited (primarily because a link is only |
| a:visited { color: #0000ff; background-color: #ffffff } | | | | either or, never both). You can change many things |
| a:hover { color: #0000ff; background-color: #ffffff } | | | | with links, but always keep in mind that specificity so |
| a:active { color: #ff0000; background-color: #ffffff } | | | | that they show properly on your page. |
| So what is each part used for? | | | | Here is an example of a potential problem and how it |
| * "a:link" will specify what the hyperlink looks like on | | | | is corrected. |
| the page. * "a:visited" will specify what the hyperlink | | | | Problem Ordera:link { color: #000000; |
| looks like once it has been visited (clicked on). * | | | | background-color: #ffffff } a:visited { color: #0000ff; |
| "a:hover" shows what the hyperlink will look like when | | | | background-color: #ffffff } a:active { color: #ff0000; |
| hovered and * "a:active" specifies what the active link | | | | background-color: #ffffff } a:hover { color: #0000ff; |
| will look like. | | | | background-color: #ffffff } |
| In the above example you'll also notice both color and | | | | If you use the above CSS, all of it will work except |
| background colors are designated. Color indicates the | | | | the active rules. Those will not show. This is because |
| actual color of the font, followed by the hex code | | | | the active has to come after the hover to follow the |
| for the color you want. The background color is the | | | | LVHA format. If the active is placed before the |
| color behind the text itself, followed by the hex code | | | | hover, it breaks that part of the class. |
| for that color. | | | | Simply swapping the places of the active and hover |
| It's important that these hyperlinks are written in the | | | | will fix the order of the cascade and allow it to all |
| proper order which is why they are put in a class | | | | work. |
| such as above. | | | | Correct Ordera:link { color: #000000; |
| CSS Link Specificity - How to Put Your Links in Order | | | | background-color: #ffffff } a:visited { color: #0000ff; |
| There is an acronym to help you remember the | | | | background-color: #ffffff } a:hover { color: #0000ff; |
| proper order to place your links in. You might think of | | | | background-color: #ffffff } a:active { color: #ff0000; |
| something to help you remember it easier but some | | | | background-color: #ffffff } |
| people simply remember LVHA. This simple acronym, | | | | Following the LVHA rules will help you keep your CSS |
| LVHA will help you get your hyperlinks in the right | | | | hyperlinks in the right order to comply with W3C. |
| order every time. | | | | � Resource Box � |
| LVHA stands for: | | | | This article may be distributed freely on your |
| 1. a:link 2. a:visited 3. a:hover 4. a:active | | | | website, as long as this entire article, including working |
| LVHA is the order you should designate your link | | | | links and this resource box are unchanged. For more |
| rules in the CSS so they work together. The way | | | | tools, tips, and tricks of the trade, go to: - |
| that it is designed to work in CSS, each selector has | | | | Empowering You to Empower Your Business. |
| specificity. So just like anything else in the cascade, if | | | | Copyright 2007 Larry Lang All Rights Reserved. Lang |
| there are two selectors that are both applied to one | | | | Enterprises Inc. |