Some tips on how to remove underline links in HTML using CSS. How to Bold, Italicize, and Underline Text Without Standard HTML Tags
The layout of any informative text involves the inclusion of semantic hyperlinks or anchors. These elements are added using the “a” (anchor) tag. Modern browsers by default display a similar element with Often, layout designers or web designers prefer to either change this style or remove it altogether.
In some cases this is really necessary. For example, in a dense reference block, where unnecessary design will only overload perception and make it difficult to read the document. However, in some cases it is appropriate to maintain a distinction between text and links. If the site design completely excludes such formatting, then it is worth using any other type of highlighting such elements. The most common type of distinction today is color contrast anchors in the text. It's effective. The only small disadvantage of this option will be the problem of highlighting text by people who cannot perceive different colors (color blindness). But this is such a low percentage of users that it can be neglected.
If you decide to remove the underlining of links, then you will need some knowledge of the structure of the Internet page, namely CSS.
Remove link underlining from entire site
For a person who is well versed in web design and CSS in particular, removing link underlines will not be difficult. To do this, you just need to find and open the file in the site files that is responsible for styling. Usually it lies in root directory and has a .css extension. You can remove underlining from links using this simple code:
text-decoration: none;
This small line will completely remove the underlining of all elements written using the “a” tag throughout the entire site.
But what if you don't have access to 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 pages) add a construction in which the usual CSS rules styles.
These styles only apply to specific page. They will not apply to other sections or documents of the site.
Remove link underline on hover
But what if you need to remove the link underline on hover? CSS can help us in this case too. The code will look like this:
text-decoration: none;
It is the pseudo-class “:hover” that is responsible for decorating elements when hovering over them.
By combining these two options, we can make the link underline appear only on hover, otherwise it will look like regular text:
text-decoration: none;
text-decoration: underline;
Using Identifiers and Classes
As you can see 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 selectively applying styles: not to the entire site or document, but to a specific link.
There are several options to solve this problem.
You can remove the underlining of links inline. Although this is strictly not recommended from the point of view of optimizing the site.
To do this, you need to 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 assign the styles we need to these selectors:
A 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
Changing the display style of links in text
In addition to the possibility, it allows you to apply other types of stylization. Often, web designers or layout designers use to highlight link text by changing its color relative to the main text.
This is also quite simple to do:
color :*specify desired color in any format (*red, #c2c2c2, rgb (132, 33, 65)*)*;
Similar styling is applied according to the same rules as described for de-underlining a link. CSS rules in in this case identical. Changing the link color and removing the underline can be applied as a separate styling (then the link will remain underlined, but will change the color from the standard blue to the color you want).
Replacing standard styling
One last note. Instead of de-underlining a link, CSS gives you the option to replace standard values registration 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.
- Double line - respectively double.
- The line can be replaced with a sequence of dots - dotted.
- Underline a word as a dotted line - dashed
You can also change the position of the line relative to the text:
The line-text-decoration-line construct can take the following values:
![](https://i1.wp.com/fb.ru/misc/i/gallery/68656/2177826.jpg)
And the color (not to be confused with the 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 the construction:
text-decoration: red, line-through, wavy.
Underline for block elements like tag
can be done in two ways. For example, set the line under the text to the entire width of the block, regardless of the volume of the text. And also underline only the text. Next we will consider both options.
Line under the text across the entire width of the block
To create a line under the text, you should add the style property border-bottom to the element; its value is both the thickness of the line, its style and color (example 1).
Example 1. Full width line
HTML5 CSS 2.1 IE Cr Op Sa Fx
Example text
The distance from the line to the text can be adjusted by adding the padding-bottom property to the H1 selector. Result this example shown in Fig. 1.
Underline text
To underline just the text, you need to use the text-decoration property with the value underline , again adding it to the H1 selector (example 2).
Example 2. Line to text width
HTML5 CSS 2.1 IE Cr Op Sa Fx
Example text
The black headline attracts attention even though it is black and not white.
The result of this example is shown in Fig. 2.
When using the text-decoration property, the line is rigidly attached to the text, so its position and style cannot be determined.
There are many tags for formatting text. Some of them are used often (and you will quickly remember them), others - rarely (you don’t need to remember them).
Here we will look at those that are used frequently.
Tags that make text headings
These tags highlight text as headings. Those. each heading starts with new line, is highlighted in bold and has its own size (the first level heading is the largest, the sixth level is the smallest).
These tags can be used with the parameter horizontal alignment align. Possible values for this parameter:
- left- left,
- right- on the right,
- center- in the center,
- justify- in width.
Paragraph break and line break tags
Tag
- forced line feed tag. The text after this tag starts on a new line.
Tags
divide the text into paragraphs. Before the beginning of each paragraph you should place a tag
, the closing tag is optional. Unlike the tag
Paragraphs are separated from each other by a blank line.
At the tag
there is a parameter align, which specifies how text within a paragraph is aligned. Possible values for this parameter:
- left- left,
- right- on the right,
- center- in the center,
- justify- in width.
HTML formatting
This is a paragraph, it is separated from the rest of the text empty lines top and bottom and aligned left.
This is a paragraph, it is separated from the rest of the text by blank lines at the top and bottom and is aligned to the right.
This is a paragraph, it is separated from the rest of the text by blank lines at the top and bottom and aligned to the center.
It's just text.
This is text on a new line.
In the browser window it will look like this:
Tags that make text italic
These tags italicize text, but they do so by various reasons.
Tags
used to logically highlight titles of books, articles, and quotes.
Tags
are used to highlight definitions.
Tags
And
highlight important parts of the text. The latter is not recommended for use.
Sample code:
HTML formatting This text is in cite tags
This text is in dfn tags
This text is in em tags
This text is in i tags
In the browser window it will look like this:
Tags that make text bold
Both are used to highlight important sections of text, but the former is preferable.
Sample code:
This text in tags strong
This text is in b tags
In the browser window it will look like this:
Tags that highlight text with underlining
Both are used to underline important passages of text, but the former is preferred.
Sample code:
HTML formatting Just text
This text is in u tags
In the browser window it will look like this:
Tags that display text in monospace font
The text is displayed in a monospace font, but it is preferable to use the first one.
Sample code:
HTML formatting Just text
This text is in kbd tags
This text is in samp tags
This text is in tt tags
In the browser window it will look like this:
Tags that display text in superscript and subscript
Tags
display text below line level in a smaller font size.
Tags
display text above line level in a smaller font size.
Convenient for deriving mathematical and chemical formulas.
Sample code:
HTML formatting y=x 2 - equation of a parabola.
H 2 O is the formula of water.
In the browser window it will look like this:
font tag and its parameters
Tags indicate the text font parameters:
face- name of the font. You can list several font names, separated by commas. In this case, if the first specified font is not found (you don’t know what fonts are installed on the user’s computer), the browser will use the next one in the list.
size- font size in conventional units from 1 to 7. The default font size is 3.
color- text color (default - black).
There are two ways to set a color: by name and by specifying hexadecimal code colors.
With personalized colors (there are 156 of them) everything is simple, look at the corresponding table, select the color you like and write its name in the parameter value (for example, color="blue").
But the second method provides much more choice. Here we can choose from a million colors by specifying its hexadecimal code. This code is 6 digits long and starts with the "#" character. We will not go into details of how the color code is formed, we will only point out that it can be obtained, for example, in Photoshop program. Read about how to do this on the page
It will be clearer with an example:
Let's highlight the word "text" in red:
Text
Now let’s add italic tags (opening on the left, closing on the right):
Text
And now - bold tags:
Text
Each time we place all previous tags into new ones. This is called nesting order. You can use different tags To format the text, the main thing is not to violate the nesting order.
This concludes the third lesson, we looked at the main ways of formatting text, in the next lesson we will look at less applicable formatting tags. Nevertheless, it will not be a bad idea to familiarize yourself with them.
On this page you will find examples on how to change HTML links when CSS help, which allows you to make them block links, icon links, without underlining, with rounded corners, change the distance between them and much more. In the future, based on these examples, you can create various options navigation menus for the site.
Before you start studying the examples, I want to make a small clarification. In all examples, for greater clarity, a CSS pseudo-class will be used, which is used to change the styles of links when the mouse cursor hovers over them. It must be said that this practice is common and is used to one degree or another on almost all Internet sites.
In this example, we will remove the underline from the links, and then add or remove them on mouseover.
HTML and CSS example: how to remove and add underlines from links
Description of the example
- Default is all popular browsers add underlining to links, which is adjustable CSS property. That is, by default this property, for links, has the value underline . Using this knowledge, we change the underlining of links in their different states.
Initially, the underlining of links is a solid thin line, pressed almost closely to the text. And in most cases, this option is quite sufficient. However, sometimes a design requires that links be underlined with a dotted line rather than a solid line, or that the distance from the underline to the links be greater than the standard, or that the underline itself be bolder. And sometimes you need to make some kind of exotic underlining, for example, with a wavy or multi-colored line. All these options will be discussed in this example.
HTML and CSS Example: Dotted Link Underline
Description of the example
- First, we remove the standard underline from all links, since we will use non-standard methods. Then we add a bottom border to the first link using the CSS property and make it dashed. This will be our underscore. To remove the underline when you hover over a link, we use a pseudo-class and make the background of the frame the same as the background of the page, that is, we simply hide it. In theory, it would be better to make the background of the frame transparent, but IE6 misunderstands this meaning.
- With the second link we do the same as with the first, but we just draw a solid line. To increase the distance from the text to the underline, we give the link a small bottom margin using the CSS property.
- Our third link has a multi-colored underline, so we will add it using background image. For this we use a small image, which we connect via CSS. Position the background in bottom part links (0 100%) and allow it to be duplicated only horizontally (repeat-x). The underline is ready, but it is too close to the text; to fix this, we add a small indent to the link below. Now that's it.
- In the old IE6 and IE7, there may be problems with displaying the underscore on the first and second links. To fix this, add the zoom :1 property, which includes the so-called layout. This property is invalid and only these browsers understand it, so it is better to enable it conditional comments.
Very often, to create a menu, you need to make not just text links, but block links, in which the active area will be both the text itself and a certain area around it.
Description of the example
- To create block links we use the CSS property :block, which turns them into block elements, creating a newline before and after itself. If line breaks are not needed, you can replace the value with inline-block .
- Since our links are now blocks, if necessary, we can change their width (CSS) or height (CSS).
- In this example, we do not specify the height of the links at all, but simply give them internal padding (CSS), which expands the blocks.
Description of the example
- Everything is very simple - using the CSS property we add the desired frame to the links under the cursor. However, please note that we add exactly the same frame to regular links, but we make it the same color as the page background. That is, we simply hide the frame for the time being. This is done so that when you hover the mouse cursor, the links do not start to “jump” due to the drawing of the frame.
Instead of making the border color match the background of the page, it could be set to transparent and made transparent, but as I said, IE6 does not handle it correctly.
HTML and CSS Example: Creating 3D Links
Description of the example
- Using the CSS property we add frames to the links, and with the help we set their color. At the same time, we indicate a light shade of color for the left and top borders, and a dark shade for the bottom and right. It is thanks to this distribution of colors that we get links that look like three-dimensional buttons.
- To make it seem like the buttons are being pressed when you hover the mouse cursor, we invert the frame colors of links with a pseudo-class. For an additional click effect, set the relative positioning (CSS :relative) and make a one-pixel upward offset (CSS :-1px).
- Well, to make everything absolutely beautiful, we set the text and background color of the links under the cursor a little darker than usual. Ready.
In this example, we will make links with icons that will contain not only images of these icons, but also the text under them. However, in the future you can easily change them and leave, for example, only icons.
Before starting work, we will prepare several images of icons, in two sets - for regular links and links under the mouse cursor. The second set should be externally different from the first, with us this is expressed in the color palette.
In this example, we will round the corners of the links using one of the methods rounding corners, described in the next subsection. We will not consider the option using CSS 3, since everything is very simple there, but it would be better to make roundings using images.
To do this, first we will cut out several blank images in two sets - for regular links and links under the cursor. For us, it will differ in the presence/absence of shadows in the images.
absolute positioning*/ top: 0; /* zero top offset */ ) .links:before ( content: url("images/left_bok.png"); /* left side image */ left: 0; /* zero left offset */ ) .links:hover: before ( content: url("images/left_bok_hover.png"); /* image of the left side under the mouse cursor */ ) .links:after ( content: url("images/right_bok.png"); /* image of the right side * / right: 0; /* zero offset to the right */ ) .links:hover:after ( content: url("images/right_bok_hover.png"); /* image of the right side under the mouse cursor */ )