Different pseudo classes can be used for styling the hyperlinks in a web document. The pseudo classes that can be used are: link, visited, hover and active. The pseudo class link represents all fresh hyperlinks, visited represents all visited hyperlinks, hover represents a hyperlink on which the mouse pointer is hovered and active represents a focused hyperlink. Below example demonstrates styling hyperlinks, the order of pseudo classes must be preserved:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Background Image:
A background image can be set for an element using the background-image property.
Background Image Repeat:
A small background image can be tiled along x and y-axis or along x-axis or along y-axis using the background-repeat property. Valid values for this property are: repeat, repeat-x, repeat-y and no-repeat. Among these values, repeat is the default value.
Background Image Position:
The position of the background image with respect to the element can be set using background-position property. Valid values for this property are: left top, left center, left bottom, etc.
Background Image Attachment:
To specify whether the background image scrolls along with the page or is fixed in a certain location, we use background-attachment property. Valid values for this property are: scroll, fixed, and local. Among these values, scroll is the default.
Below example demonstrates all the background properties mentioned above:
1
2
3
4
5
6
7
|
body
{
background-image: url(‘bg.jpg’);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
|
The properties that are used to set a background image or apply other effects to the background of elements are the background properties.
Background Colour:
The background colour of an element can be changed using the background-color property.
Background Image:
A background image can be set for an element using the background-image property.
Take your time to comment on this article.
EmoticonEmoticon