11. Links And Links Classes In CSS



As you probably know if you create a text link in HTML it will automatically changes its color to make it different from normal text. Using the CSS you can define different styles and apply them to different text links so you'll not have all the text links in the same font, color, weight etc. You will be able to make the text links look different one from another.

Open the file index.html from template/html/html_version.

As you can see we have 3 different looking text links:

Now let's take a look at our CSS Styles palette in which we can see all the style in the external CSS file to see the special created styles for links:

As you can see we have a default set of styles for the 3 states of the link (link - up state, hover - over state, visited - visited state). That means that when you define a new text link the "a:link" style is automatically applied to that link. If you want to make links different you have to apply one of the user styles. You can define as many as you want but keep in mind that if you want the link to have different look when you place your mouse over it or when it is visited you must define the 3 states as in the classes above (a to g).

Now let's go and change a text link class. To do that you must place your cursor inside the text that contains a link and in the Properties palette from Style to choose another class:

Select the "b" class for example and now the "read more" link will have the same style with the one from the "Our Partners" paragraph.

If you need more classes than defined in the external CSS file you can duplicate one of the existing classes but giving it a new name. To do that go to the CSS Styles palette and right-click over the "a.a:link" style. From the menu choose Duplicate:

The Selector window pops up and here you'll have to give a new name to the style:

The name of the style in "a" and must be changed to "h" in our example. As you can see the name of a link style has a pretty confusing topic: a.[name of the style]:[state]. So you have to change the middle "a" with an "h" or any other name you want. This name will be visible in the Style drop-down menu of the Properties palette. After changing the name press OK and the Properties window will appear and now you have to modify the properties as you like it. To create the other 2 states of a link you have to duplicate in the same way the "hover" and "visited" states from an existing style. You can duplicate any style defined according to your need.