If the browser of the website visitor does not find any indication of the color design of the hyperlinks in the page code, then it uses the default values. These values are blue for passive links, red for active (on hover) links, and the magenta color tint for already visited links. This color scheme is not always combined with the color scheme of the page design, therefore, a block of link style descriptions is usually included in the code.
Instructions
Step 1
Create a set of instructions for the browser that will describe the link colors in three states. For example, it can look like this: a: link {color: Red;}
a: visited {color: Yellow;}
a: hover {color: Orange;} Here the "a" at the beginning of each line is called the "selector" and specifies the tag to which the browser should apply the style description enclosed in curly braces. "A" is the hyperlink tag. The word added to the selector separated by a colon is called a "pseudo-class" -that the browser uses to determine which link state the style in curly braces belongs to. link matches a regular link, visited a link that has already been visited, and hover a link when the cursor is hovering over it. The colors assigned to the color parameter inside the curly braces can be specified either by the name of the color shade or by its hexadecimal code.
Step 2
If you need to assign different colors to different groups of links on the page, then assign each group its own designation ("class") and make a separate description of the styles for each of them. For example, name one group LinksRed and the other LinksGreen. Then the style description will look like this: a. LinksRed: link {color: Red;}
a. LinksRed: visited {color: Yellow;}
a. LinksRed: hover {color: Orange;} a. LinksGreen: link {color: Green;}
a. LinksGreen: visited {color: DarkGreen;}
a. LinksGreen: hover {color: Lime;} And in the tags of links of each group, you must indicate to which class they belong. For example: Red link
Green link
Step 3
These instructions are written in CSS (Cascading Style Sheets), so they need to be placed inside a style tag that separates them from other instructions in the page's source code, written in HTML (HyperText Markup Language)):
a. LinksRed: link {color: Red;}
a. LinksRed: visited {color: Yellow;}
a. LinksRed: hover {color: Orange;} a. LinksGreen: link {color: Green;}
a. LinksGreen: visited {color: DarkGreen;}
a. LinksGreen: hover {color: Lime;}
Step 4
Place the prepared link style description block in the header part of the page source code - it is delimited by the and tags.
