Style Internal Links and External Links Differently Using CSS

Styling internal and external links differently helps users distinguish between links that navigate within your website and those that lead to external sites. You can achieve this using CSS attribute selectors like [href^="/"] for internal links and [href^="http"] for external links.

Below is the basic CSS code to apply different styles for internal and external links:

</>
Copy
/* Style internal links */
a[href^="/"] {
  color: green;
  text-decoration: underline;
}

/* Style external links */
a[href^="http"] {
  color: blue;
  text-decoration: none;
}

Examples

Example 1. Styling Internal and External Links Differently

In this example, internal links (starting with /) are styled with green text and underlined, while external links (starting with http) are styled with blue text and no underline.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    /* Internal links */
    a[href^="/"] {
      color: green;
      text-decoration: underline;
    }

    /* External links */
    a[href^="http"] {
      color: blue;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <p><a href="/css/">Internal Link (CSS Tutorials Page)</a></p>
  <p><a href="https://www.example.com">External Link</a></p>
</body>
</html>

Output:

Example 2. Adding an Icon for External Links

In this example, we add an icon after external links to indicate they lead to another website, while internal links remain unchanged.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    /* Internal links */
    a[href^="/"] {
      color: green;
      text-decoration: underline;
    }

    /* External links */
    a[href^="http"] {
      color: blue;
      text-decoration: none;
    }

    /* Add an icon after external links */
    a[href^="http"]::after {
      content: url("https://www.tutorialkart.com/cdn/outlink.png");
      margin-left: 5px;
    }
  </style>
</head>
<body>
  <p><a href="/css/">Internal Link (CSS Tutorials Home Page)</a></p>
  <p><a href="https://www.example.com">External Link</a></p>
</body>
</html>

Output:

Example 3. Styling External Links to Open in a New Tab

In this example, we apply a hover effect to external links, making them bold and changing the color, while ensuring they open in a new tab.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    /* Internal links */
    a[href^="/"] {
      color: green;
      text-decoration: underline;
    }

    /* External links */
    a[href^="http"] {
      color: blue;
      text-decoration: none;
    }

    /* Hover effect for external links */
    a[href^="http"]:hover {
      color: darkblue;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p><a href="/css/">Internal Link (CSS Tutorials Home Page)</a></p>
  <p><a href="https://www.example.com" target="_blank">External Link</a></p>
</body>
</html>

Output:

Conclusion

Using CSS attribute selectors, you can easily style internal and external links differently to improve user experience. Internal links can be styled distinctly from external links, and additional enhancements like icons and hover effects can be applied for clarity.