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