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