Lesson Practice 5-2

Page Banner

Lesson Practice 5-2:
Styling Links

Working with Combination Classes - Discussion

Combining and focusing your styles:

As you saw in the lesson on classes, it is possible to focus the application of a style to only certain elements - when you created h3.first, you were able to put that style only on the h3 that also had the class first applied.

But suppose you have a divisions in your page, containing different types of elements. You want to make your list items have a particular style, but only if they are inside one of the divisions. You could, of course simply make a class and apply it to all the list items as needed, but doing this can become tedious. There is a slicker way to accomplish this.

You can create a combination selector to focus a style on an element within an element. For example the following rule,
          div li { font-style: italic;
                     color: red;
                    }
will make all list items that are within a division red italic text, while any list items that are not in a division will remain unaffected.

You can also combine classes with elements. For example, if you have a division that has a class style applied to it, you could focus on any element inside that division to apply a style rule:
          .divmain h3 { font-size: 14pt;
                               font-variant: small-caps;
                             }
This will make any h3 elements inside the division with .divmain applied have 14 point small caps text. Any other h3 elements on the page, even if they are in other divisions, will be unaffected.

A surprising fact is that you would not even need to create a .divmain rule. Just adding that "class" to an element will allow it to direct the styling of any h3's inside of it.

As you can see, this is most often applied in cases where divisions are in use, but this is not always the case. You might want any hyperlinks that occur within a paragraph element to have a different look or behavior than your navigation links. In this case, the selector would be p a:link { property: value; }. (You will learn more about link styling below.)

Assign the same properties to several elements at once:

It is also possible to assign the same property declarations to two or more different elements or classes at the same time. To do this, you simply state more than one selector, separating them with a comma between. For example:
ol, ul {font-family: arial;
}
This declaration will style both ordered lists and unordered lists to display in arial font. You will use this trick in your tasks on links, below.

Using Combination Selectors

Task 1 - Using Combination Selectors to Focus Style Application

Open classes2.htm in Notepad++. Immediately save the file as classes4.htm.
In the title element, change the title and h2 text to: Using Combination Selectors
Create the combination selectors:
1. Create a new rule using div p as the selector and a property declaration using the font-weight property with bold as the value.
2. Create a new rule using .white p as the selector a property declaration using the font-style property with italic as the value.
Save the file and preview. Be sure all of the styles you created are working correctly.
You did not need to 'apply' the classes because you used existing style rules to create the combination styles.

Styling Links - Additional Discussion

Using Regular Classes for Links

Link text will take on the characteristics of whatever element they are contained within, but they will be blue and underlined by default. A link will turn purple after it has been visited.
It is often a good idea to style your links differently than the surrounding text, especially for site navigation links.

You can create a class, perhaps called .navlink and add declarations to turn off the underlining, change the color, font, size, or whatever you wish. You would just apply the class to the opening anchor tag, before the href attribute is the best place.

Using Pseudo-classes

There is a special category of selectors, called Pseudo-classes, that are used to style hyperlinks. This is a better way to control the appearance and behavior of your links.

There are four 'conditions' in which a hyperlink can be found - regular, visited, active and hover.

a:link { } - The regular state is how the link appears when the mouse is not on it, and it has not been clicked yet.
a:visited { } - The visited state is how the link appears after it has been clicked and the user has moved on to other links or sections of the page.
a:hover { } - The hover state is how the link appears when the mouse pointer is moved over the link.
a:active { } - The active state is how the link appears while it is being clicked.

Note that there is a colon between the a and the state, rather than a period. This is why it is called a pseudo-class - it is not designated in the same way as other classes. Within the curly braces, however, the declarations are done as with other rules.

The four pseudo-classes must be listed on the style sheet in this order to be able to work. The link states happen in this order, so the cascade rules require that 'normal' state is first, 'visited' is second, 'hover' is third, and 'active' is last.
You can remember this order with a mnemonic - love-hate.

a:link and a:visited must both be explicitly styled - a:visited will NOT depend on a:link for any settings.
a:hover and a:active states depend on a:link for their basic style, so all you need to add is any differences for these states, usually size, color or perhaps some text decoration.

Task 2 - Using Pseudo-classes and Combination Rules to Style Links

Open your mystyles.css file.
At the end of the style sheet, add the dt selector with a declaration for the font-size property with a value of 16pt.
Begin a new rule by typing the a:link pseudo-class, type a comma, then type the a:visited pseudo-class and add the curly braces in the normal way.
Create declarations to make the font-family property with the value arial, text-decoration property with value none, and font-size property with value 14pt.
Add the a:hover pseudo-class with a declaration for the font-size property with a value of 16pt.
Create a new combination selector named .html a:link. Add the curly braces. Make a declaration for the color property with the value darkred.
Create a new combination selector named .html a:visited. Add the curly braces. Make a declaration for the color property with the value indianred.
Create a new combination selector named .html a:active pseudo-class with a declaration for the color property with a value of orangered.
Create a new combination selector named .css a:link. Add the curly braces. Make a declaration for the color property with the value midnightblue.
Create a new combination selector named .css a:visited. Add the curly braces. Make a declaration for the color property with the value steelblue.
Create a new combination selector named .css a:active pseudo-class with a declaration for the color property with a value of dodgerblue.
Save the file.

Task 3 - Adding and Styling Links to Index Page

Open your index.htm file.
Inside the head element, add the link element and appropriate attributes to link the document with your external style sheet. (You will need to enter the correct path to the style sheet.)
Preview to make sure the style sheet is being properly applied.
In the left cell, containing the html practice page links, add the html class to the dl opening tag.
In the left cell, containing the css practice page links, add the css class to the dl opening tag.
Preview the page and test the links - the link colors should now be different in the two list cells.
In the css link list, add the new class file to the Classes term as a definition.
Link the titles to their appropriate files.
Test your links, as well as the link states, to see that all of your pseudo-links are working correctly.
Publish your new files as well as the edited index and style sheet files.