How To Make A Beautiful Link

Table of contents:

How To Make A Beautiful Link
How To Make A Beautiful Link

Video: How To Make A Beautiful Link

Video: How To Make A Beautiful Link
Video: How to Use the Pretty Links Plugin in Wordpress for FREE 2024, December
Anonim

Links significantly affect the appearance of a web page. Whether it's your website or blog, beautifully customized links will change the design of your website for the better. Even without knowledge of html and css, making a nice link is pretty easy.

How to make a beautiful link
How to make a beautiful link

Instructions

Step 1

First of all, let's create a regular link. This is done using the following code: link name. In this code, the tag is a link. Its "href" attribute indicates the address of the page to which the link leads. Instead of "link title" write a word or phrase that will represent the link

You can also add text that will appear when you click on the link. The "title" attribute of the tag will help you with this.

Step 2

Now let's get started with the links. The easiest way to do this is in cascading style sheets (css). Open the file containing the styles for your site and write further code there. Alternatively, you can insert styles directly into the html page. To do this, use the site style setup code.

Step 3

Let's get down to the design. The syntax for the entry would be a {style parameters}. What should I write here?

First, change the color of the links to your liking. This code will help you with this:

a {color: # 00000;}. Of course, instead of "# 00000" you have to insert your own color. You can find out the color code in this form in different graphics programs (for example, in Photoshop) or find a web palette.

Step 4

By default, the browser makes links underlined. This can be canceled with the following code: a {text-decoration: none;}

To create bold links, use the font-weight: bold; parameter. It is inserted into the style code in the same way as color, underline.

Step 5

You've probably noticed that on some sites, when you hover over a link, its appearance changes. You can do this too. A code like this will help you: a: hover {style parameters}. Parameters are specified in the same way as for a regular link, the only value is the "hover" pseudo-class, which notifies the browser that these settings should be applied when hovering over the link.

Similarly, you can highlight visited links: a: visited {style parameters}

Recommended: