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:

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.

Sample code:

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.

Sample code:

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

1. 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

1. 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.
2. 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.
3. 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.
4. 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

1. 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 .
2. Since our links are now blocks, if necessary, we can change their width (CSS) or height (CSS).
3. 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

1. 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

1. 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.
2. 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).
3. 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.

Description of the example

1. To shorten the code, we use two classes in links - “links” (with common properties) and “image”, “audio”, “video” (personal for each link). This point is described in detail in classes CSS reference.
2. Our icons are 50x50 pixels in size and will be present on the links as a background (CSS), which we will center at the top (50% 0) and prevent it from replicating (no-repeat).
3. We add padding (CSS) to the links so that the text in the links does not adhere to the edges. At the same time, we make the top indent equal to the height of the icons so that the text does not overlap with them, because our icons are the background.
4. If there is very little text in the links, then the icon images will be cut off on the sides. To prevent this from happening, we set the links to a minimum width (CSS) so that it is at least equal to the width of the icons. In our case, we need to get a minimum width of 50px, but we set it to 40px, since another 10px will be added due to the side padding.
5. To make the minimum width work, we convert the links into inline blocks (CSS:inline-block).

IE6 will have to “cure” a little:

1. IE6 doesn't understand the minimum width property, but it does interpret the CSS property as a minimum width. Therefore, we use a simple one for it hack which will fix this problem.

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 */ )

Description of the example

We will not dwell on the rounding technology itself; if necessary, you can read about it in the corresponding section of the site.

1. Using the CSS property :inline-block we make links inline blocks. In particular, this is necessary so that we can give links an exact height that matches the height of the images.
2. Remove the underline and center the text (CSS:center). In general, in our case it is not necessary to center the text, since the links adjust to the size of the text in them and there is simply nowhere for it to be aligned. But if you need to increase the width of the links (for example, up to 150px), then this alignment will come in handy.
3. To change appearance links, when they are under the mouse cursor - we add additional selectors to the styles with a CSS pseudo-class, in which we indicate our parts of the images, but without a shadow.

For IE6 and IE7 we connect additional styles using conditional comments, but we change the CSS code itself a little and make it different from the one used in ways to round corners:

1. The essence of the change is that with the help of expression we integrate the same two tags inside the links, but only without the attributes containing styles. Instead, we add the classes “left_bok” and “right_bok” to the tags, and add styles for them and write them below. These styles are almost exactly the same as in the main CSS code, but here all the images are used as the background of the tags.

Rounded corners of links (option two)

Let's look at another example of rounding the corners of links, but using four separate corner images.

Description of the example

Here, too, we will not talk about the rounding itself, we will only outline the distinctive points.

1. Using the CSS property :inline-blok, we convert links into inline blocks. Then we remove the underline from them, add a frame and align the text to the center.
2. Since the pseudo-elements with which we round the corners are located inside links, their content is also centered, and, therefore, the picture corners added by the CSS property are not placed in the corners as we need. To fix this, we add :left to it, returning the value that browsers use by default.

You've probably noticed the animated underlining of links on many resources and wanted to know how to implement it on your website. To make something beautiful css underline elements we don’t need great knowledge, or connecting additional scripts, all we need is standard HTML and CSS.

Variations of underlining

Underlining links or any other elements, you can come up with anything you want. The underline can float up from the bottom, move out to the left or right, etc. We will look at more interesting example, in which the underline will spread out from the center to the edges, as in the demo below.

underscore demonstration

HTML

First, let's create some element, for example, take the A tag. Its attribute is not important to us, because most of the work will be devoted to styles.

CSS

The implementation will consist of two lines that will extend from the middle of the bottom of the element to its edges.

We are responsible for underlining text-decoration property, but it doesn’t make sense to use it here, because implementing our animation plans in this case is not entirely relevant. Let's not forget that each element can be assigned a pseudo-element::before or::after . Therefore, we will set all the properties to them, and immediately set the following parameters to our link:

A( display: inline-block; position: relative; text-decoration: none; )

Thus, we set block streamlining and positioning relative to the original location. All this is done so that the underline does not extend beyond the element when we assign absolute positioning to the ::before pseudo-element. After this, we need to set its clear location and size. And here we immediately create the first half of the underscore.

A::before( display: block; position: absolute; content: ""; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out, left .5s ease-in- out; left: 50%; bottom: 0;

Those. The height of the underline will be 2px, length 0, red, and the transition property is responsible for the animation. And of course, the left indentation is 50%, i.e. center point. We perform almost the same actions with the ::after pseudo-element:

A::after( display: block; position: absolute; content: ""; height: 2px; width: 0; background-color: red; transition: width .5s ease-in-out; left: 50%; bottom: 0; )

A:hover::before( width: 50%; left: 0; ) a:hover::after( width: 50%; )

It is worth noting that this is just one way to implement this idea. You can do the same thing using just one pseudo-element::before . Subscribe to materials and suggest topics for articles.