CSS Link Properties
The links we create with the a tag are automatically displayed in the browser in blue and underlined. Visited ones also appear in purple. To change this situation, we should use Pseude classes and create templates for different states of links.
Pseudo Classes
Pseudo classes divide an element into different classes. For example, it divides the link (a) element into visited, active, hover, link classes.
The :link class of the a tag allows us to edit the normal appearance of links.
The :hover class allows us to organize the hovered appearance of links. For example, the hovered link changes color.
The :active class allows us to edit the appearance of links when they are clicked, that is, when the mouse button is pressed.
The :visited class allows us to change the appearance of previously clicked links.
Note: When we apply css to the "a" tag without specifying the state, the styles we write are applied to all states of the links.
In a use as above, the links will always be green.
If we want the links to appear different, normally different etc. on hover, we need to format the classes of the a tag separately.
Here is an example that formats each state of the links differently:
a:link{ color:red;
text-decoration:none; } //It is the initial state of the links.
a:visited { color:red;
text-decoration:none; } //The state of the links after they are visited.
a:hover { color:red;
text-decoration:none; } //This is how it is when the mouse hovers over the link.
a:active { color:red;
text-decoration:none; } //It is the state when the link is clicked with the mouse.
IMPORTANT NOTICE: When applying css to classes separately, they should be written in the above order. Otherwise, some situations may appear different in the browser.
More detailed examples of formatting links and menu building are available in our future topics.
We can divide pseudo classes into two as “Link pseudo classes” and “Dynamic pseudo classes”.
Link Pseudo Classes
They can only be applied to links. These are the :link and :visited classes.
Dynamic Pseudo Classes
There are many pseudo classes that fall into this class, and each has different uses. However, the most used classes are :hover, :active and :focus.
The :hover and :active classes work just like the narrator on links.
:focus is when an object is focused. For example, a text box normally has a black border, but clicking focus can change the border color.
Sample:
.box1 {border: 1px solid black;} //Here I defined a class called box1 and applied it to the text boxes I wanted. The borders of these text boxes will be black at first.
.box1:focus {border: 1px solid red;} //Here, I made the border color of the elements to which the class named box1 is applied, red when they are focused.
html links don't look the way I want, hovering over links, applying css to a tag, pseudo classes, using :focus, :hover, :active , :visited
EXERCISES
a:link {
color: #000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000;
}
a:hover {
text-decoration: underline;
color: #F00;
}
a:active {
text-decoration: none;
color: #FF0;
}
Read 775 times.