Quick Contact

    CSS Links

    Styling Links with CSS

    An integral component of a website is a link or hyperlink. It enables site navigation for visitors. As a result, appropriately designing the links is crucial to creating a website that is user-friendly.

    For further information on links and how to make them, see the HTML link tutorial.

    A link has four different states — link, visited, active and hover. These four states of a link can be styled differently through using the following anchor pseudo-class selectors.

    • a:link —

      Set styles for regular or inactive links.

    • a:visited —

      Styles for links that the user has already visited should be defined.

    • a:hover —

      When a user hovers their mouse pointer over a link, provide styles for that link.

    • a:active —

      Link styles should be defined for when a link is clicked.

    To change the style of links, just as you do with regular text, you can specify any CSS property you’d want to any of these selectors, such as colour, font, background, border, etc.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Styling Different Link States using CSS< /title>
    < style>
        /* unvisited link */            
    a:link {
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
        }
        /* visited link */
    a:visited {
    color: #ff00ff;
        }
        /* mouse over link */
    a:hover {
    color: #00ff00;
    border-bottom: none;
        }
        /* active link */
    a:active {
    color: #00ffff;
        }
    < /style>
    < /head>
    < body>
    < p>< a href="https://www.https://tutorials.ducatindia.com" target="_top">Visit Ducat Tutorial< /a>< /p>
    < /body>
    < /html>
    

    It’s crucial to establish the styles for various states of links in the correct order since the rules that are stated last take precedence over those that are defined earlier.

    Note:
    For them to function properly, the pseudo classes should generally be in the following order — :link, :visited, :hover, :active, :focus in order for these to work properly.

    Modifying Standard Link Styles

    If you don’t define the styles specifically for them, links on web pages in all popular web browsers, including Chrome, Firefox, Safari, etc., have underlines and use the browser’s default link colours.

    In the majority of browsers, text links will typically appear as follows by default:

    • An unvisited link as underlined blue text.
    • A visited link as underlined purple text.
    • An active link as underlined red text.

    In the case of the hover state, the link’s appearance does not change. Depending on their current state (i.e., unvisited, visited, or active), it remains blue, purple, or red.

    Let’s now have a look at how to alter the links’ default design.

    Setting Custom Color of Links

    Simply define the colour of your choice for each state of a link using the CSS colour attribute. However, while selecting colours, make sure the user can distinguish clearly between regular text and links.

    To see how it essentially operates, let’s use the example below:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Set Link Colors using CSS< /title>
    < style>
    a:link {
    color: #1ebba3;
        }
    a:visited {
    color: #ff00f4;
        }
    a:hover {
    color: #a766ff;
        }
    a:active {
    color: #ff9800;
        }
    < /style>
    < /head>
    < body>
    < p>< a href="https://www.tutorials.ducatindia.com/" target="_top">Visit Ducat Tutorial< /a>< /p>
    < /body>
    < /html>
    

    Removing the Default Underline from Links

    If you don’t like the default underlining on links, you can easily remove it using the CSS text-decoration property. To make links stand out from regular text a little more, you may also style them with a different background colour, a bottom border, a bold font, etc.

    The example that follows demonstrates how to alter the underline of a link for various conditions of a link.

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Remove Default Underline from Links using CSS< /title>
    < style>
    a:link, a:visited {
    text-decoration: none;
        }
    a:hover, a:active {
    text-decoration: underline;
        }
    < /style>
    < /head>
    < body>
    < p>< a href="#">Place mouse pointer over me< /a>< /p>
    < /body>
    < /html>
    

    Making Text Links Look Like Buttons

    Using CSS, you can easily make regular text links resemble buttons. Additional CSS attributes like background-color, border, display, padding, etc. must be used in order to do this.

    Let’s look at the sample below to see how it actually functions:

    Example

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>Customize a Link as Button using CSS< /title>
    < style>
    a:link, a:visited {
    color: white;
    background-color: #1ebba3;
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #099983;
    text-decoration: none;
    text-align: center;
    font: 14px Arial, sans-serif;
        }
    a:hover, a:active {
    background-color: #9c6ae1;
    border-color: #7443b6;
        }
    < /style>
    < /head>
    < body>
    < p>< a href="#">CSS Link Button< /a>< /p>
    < /body>
    < /html>
    

    FAQS

    Q1. How do you select a link in CSS?

    To select unvisited links, use the:link selector.Note: Links you’ve already visited are not styled by the:link selector. Use the:visited selector, the:hover selector, and the:active selection to style links to previously visited pages, links that are hovered over, and links that are clicked.

    Q2. What is the correct CSS link tag?

    You must utilize the link element and give it some pertinent properties in order to connect your CSS to your HTML. The link element is a self-closing tag that belongs in the HTML head section. This is how you link CSS to HTML with it: < link rel=”stylesheet” type=”text/css” href=”styles.css” />

    Q3. What is CSS example?

    Web pages are styled and completely exhausted using CSS (Cascading Style Sheets), which can be used to change the font, colour, size, and spacing of your text, divide it into numerous columns, or add animations and other creative elements.

    Q4. Why do we use CSS in HTML?

    The web pages’ design, layout, and differences in display for various devices and screen sizes are all styled using CSS.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.