Style class links css

CSS Links

With CSS, links can be styled in many different ways.

Styling Links

Links can be styled with any CSS property (e.g. color , font-family , background , etc.).

Example

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• a:link — a normal, unvisited link
• a:visited — a link the user has visited
• a:hover — a link when the user mouses over it
• a:active — a link the moment it is clicked

Example

/* unvisited link */
a:link color: red;
>

/* visited link */
a:visited color: green;
>

/* mouse over link */
a:hover color: hotpink;
>

/* selected link */
a:active color: blue;
>

When setting the style for several link states, there are some order rules:

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:visited text-decoration: none;
>

a:hover text-decoration: underline;
>

a:active text-decoration: underline;
>

Background Color

The background-color property can be used to specify a background color for links:

Example

a:link <
background-color: yellow;
>

a:visited background-color: cyan;
>

a:hover background-color: lightgreen;
>

a:active background-color: hotpink;
>

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Example

a:link, a:visited <
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: red;
>

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

Example

Another example of how to create link boxes/buttons:

a:link, a:visited <
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
>

a:hover, a:active background-color: green;
color: white;
>

Example

This example demonstrates the different types of cursors (can be useful for links):

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Styling Links with CSS

CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:

• normal links
• links that have already been visited
• links that are being clicked on, and
• links that are hovered over with the mouse.

You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.

Different link states

CSS distinguishes between 4 different states for a link using a concept called pseudo-classes. A is a way of selecting page elements based on special characteristics such as whether an element is being rolled over with a mouse, or whether the element has focus.

Here are the 4 pseudo-classes that you can use to select and style the different link states in CSS:

a:link Selects links that have never been visited in the browser a:visited Selects links that have been visited before in the browser a:active Selects links that are being clicked on or otherwise activated by the user a:hover Selects links that are being hovered over by the user’s mouse cursor

Selecting links regardless of their state

As well as using pseudo-classes to select particular link states, you can of course use the a selector on its own to select links in general:

However, note that using a pseudo-class overrides any styling that you’ve set using the a selector. For example, the following code makes all links pink except visited links, which become green:

Mixing pseudo-classes with classes and ids

You might want to style only certain types of links within your website. To do this, assign a class to the links:

You can then style those links using pseudo-classes as follows:

 /* Make all navigation links red when hovered over */ a.nav:hover

If you only want to style a single link on the page, you can use an id instead of a class, and select the link’s pseudo-classes in the same way — for example:

 Home . /* Make the "home" link yellow, whether visited or not */ a#home:link, a#home:visited

Some examples

Once you’ve selected the particular link state you’re interested in, you can apply any styles you want to that state, as you’ll see in the following examples.

Styling link colours

It’s easy to change the colour of links from the default values. On most browsers, the default link colours are:

:link blue :visited purple :active red

Here are some examples of how to change link colours:

 /* Make all links grey on black, whatever their state */ a < color: gray; background-color: black; >/* Use the default colours except for links that are being clicked on, which become yellow instead of red */ a:active < color: yellow; >/* Set unvisited links to green; visited and hovered links to brown */ a:link < color: green; >a:visited, a:hover

Use caution when changing link colours. Most visitors expect normal links to be a shade of blue, visited links to be a shade of purple, and links generally to be underlined. If you deviate too wildly from these standards then visitors may have a hard time navigating your site.

Turning off underlines on links

To remove the underlining from text links, use the text-decoration property, as follows:

To remove the underlining from links except when they’re hovered over, use:

Giving links a button effect

You can style links — and their pseudo-classes — pretty much any way you like. This example turns a standard text link into something more closely resembling a form button:

Adding background images to links

Here’s another example of styling a link purely using CSS. It adds an arrow graphic to the link by inserting the graphic as a background image and moving the link text to the right to allow space for the image:

Replacing link text with an image

What if you wanted to use just an image for a link, without any text? It’s a good idea to keep the link text in your HTML markup, so that non-graphical browsers and search engines can still read and understand the link. However, you can still hide the link text within your CSS. Here’s how it’s done.

First, put your link text within a span element in your markup:

Then you can style the link as follows:

First the CSS sets the button as a background image on the link, and adjusts the link’s width and height to match the dimensions of the image. Then the a span selector ensures that the link text is hidden from CSS-aware browsers.

Here’s how the above example looks:

Why the display: block ? Well, links are inline elements, which means that (amongst other things) you can’t apply certain properties such as width and height to them. If you want to specify a width and height for a link, you first need to make it display as a block-level element using the display: block property.

Creating image rollover effects

Finally, if you really want to go to town with your links, you can add nice-looking image rollovers to them. Find out how to do this in Making CSS rollover buttons.

Reader Interactions

Leave a Reply Cancel reply

To include a block of code in your comment, surround it with

.

tags. You can include smaller code snippets inside some normal text by surrounding them with . tags.

Allowed tags in comments: .

Primary Sidebar

Hire Matt!

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Recent Posts

Источник