Since the invention of the hypertext markup language, HTML, the concepts of layout and layout of web documents have changed dramatically. With the almost complete support of popular browsers for the CSS and CSS2 cascading style sheet standards, it has become possible to influence almost any aspect of the visual presentation of a document. For example, you can make the background of a link colored, filled with some image, and also changing depending on the user's actions.
Necessary
- - the ability to edit the text of the document or the text of the style sheets of the document;
- - a text editor that allows you to save the document in the original encoding.
Instructions
Step 1
Make the background of the link uniformly filled with a random color by adding inline style information to the A element. Add style to the attributes of the A element corresponding to the link whose background you want to change. In the content of the style attribute, place the background-color CSS property with the given value, which is the correct identifier for the background color. For example, it might look like this:
link text
Step 2
Define the background of the link in an external or embedded style sheet in your document. In the appropriate style sheet, add a set of rules addressed by a selector of an acceptable level of specificity. In the ruleset, enter the background-color property in the same way as in the previous step. Select the specificity of the selector based on the CSS2 cascading rules and the desired scope. So, if you need to set the color of just one link, it makes sense to use an ID selector, if there are several such links, it is better to use an attribute selector based on the class value.
For example, to set a green background for a specific link in a document, you can add a set of rules to the style sheet:
A # ID_GREEN
{
background-color: # 00FF00;
}
You should also set the ID attribute of the A element corresponding to the desired link to ID_GREEN:
link text
Step 3
Fill the background of the link with an image. Follow the methods described in steps one and two, but instead of the background-color CSS property, use background-image. For example:
link text
If necessary, add a background-repeat property to the CSS ruleset to define options for duplicating the background image horizontally and vertically.
Step 4
Make the background of the link change when you hover over it or get focus. Add rule sets to an external or embedded document style sheet that define the background of a link or link group in different states. Use ID selectors and attribute selectors in conjunction with the dynamic pseudo-classes: hover,: active, and: focus. For example, in order for the background of a link with an ID attribute value of ID_DYNAMIC_BACKGROUND to be red in the inactive state and green in the state of being under the mouse cursor, the following rulesets must be added to the style sheet:
A # ID_DYNAMIC_BACKGROUND
{
background-color: # FF0000;
}
A # ID_DYNAMIC_BACKGROUND: hover
{
background-color: # 00FF00;
}
You can do the same to create a background with a dynamically changing image.
