Layout of any informative text implies the inclusion of semantic hyperlinks or anchors. These elements are added using the "a" tag (anchor). Modern browsers, by default, display a similar element with underscore. Often, typesetters or web designers prefer to either change this style or delete it altogether.
In some cases, this is really necessary. For example, in a dense reference block, where excessive design will only overload the perception, and make it difficult to read the document. However, in some cases it is advisable to maintain the distinction between text and links. If the site design completely excludes such formatting, then you should use any other type of selection of such elements. The most common type of demarcation today is the color contrast of anchors in the text. It is effective. The only minor drawback of this option will be the problem of highlighting text by people who can not perceive different colors (color blindness). But this is such a low percentage of users that they can be neglected.
If, nevertheless, it was decided to remove the underline of links, then some knowledge of the structure of the formation of the web page, namely CSS, will be required.
Remove underline links throughout the site
For a person who is well versed in web design and in particular in CSS, removing underline links is not difficult. To do this, you just need to find and open the file responsible for the style in the site files. It usually lies in the root directory and has a .css extension. You can remove the underline of links using simple code:
a {
text-decoration: none;
}
This small line will completely remove the underline of all elements registered with the "a" tag on the entire site.
But what if you don’t have access to the CSS file?
In this case, it is advisable to use the Style tag at the beginning of the document. Works the same as a CSS file. In order to apply styles, it is necessary at the very beginning of the document (or HTML page) to add a design in which the usual rules of CSS styles apply.
These styles apply only to a specific page. In other sections or documents of the site they will not work.
Remove hover links
But what if you need to remove the underline of the link on hover? CSS can help us in this case too. The code will look like this:
a: hover {
text-decoration: none;
}
It is the “: hover” pseudo-class that is responsible for decorating elements on hover.
Having put these two options together, we can make the link underline appear only on hover, otherwise everything will look like plain text:
a {
text-decoration: none;
}
a: hover {
text-decoration: underline;
}
Using identifiers and classes
As can be seen from the above, changing the styling of an element on a website or html document is quite easy. The disadvantages of such options are the impossibility of selective application of styles: not to the entire site or document, but to a specific link.
There are several solutions to this problem.
You can remove the underline of links inline. Although this is strongly discouraged from the point of view of optimizing the site.
To do this, you must specify the Style parameter directly in the link tag:
The second option is more acceptable.
We introduce an additional class or id into the element and we assign the styles we need to these selectors:
Further, everything is knurled. In the CSS file, we can remove the underline of links by applying the style we know for the class or identifier, depending on your choice.
The class is written with a dot before its name:
.none_ decoration {
text-decoration: none;
}
The identifier is indicated by the # sign:
#none_ decoration {
text-decoration: none;
}
This rule applies to both the CSS file and the Style tag.
Change the display style of the link in the text
In addition to the ability to remove the underline of the link, CSS allows you to apply other types of styling. Often web designers or layout designers use to highlight the link text, changing its color relative to the main text.
To do this is also quite simple:
a {
color : * specify the desired color in any format (* red, # c2c2c2, rgb (132, 33, 65) *) * ;
}
A similar stylization is applied according to the same rules that are described to cancel underlining a link. CSS rules in this case are identical. Changing the color of the link and canceling the underline can be applied as a separate stylization (then the link will remain underlined, but will change the color from standard blue to the one you need).
Replacing standard styling
Another remark for last. Instead of un-underlining the CSS link, you can replace the default look and feel. To do this, just substitute the following values into the text-decoration construct:
text-decoration-style:
- If you need a solid line, specify the value solid.
- For a wavy line - wavy.
- The double line is accordingly double.
- The line can be replaced by a sequence of points - dotted.
- Underline the dotted word - dashed
You can also change the position of the line relative to the text:
The line-text-decoration-line construct may take the following values:
- Standard (underline below) is underline.
- Cross out the word (phrase) - through.
- The line is on top - overline.
- The familiar to us none - without styling.
And color (not to be confused with text color!):
text-decoration-line: (any color in any format * red, # c2c2c2, rgb (132, 33, 65) * ).
For convenience, all three positions can be written together in a design:
text-decoration: red, line-through, wavy.