As web designers and developers, we are constantly looking for ways to enhance the user experience on our websites. One way to do this is by styling external links in a visually appealing way. This not only adds a nice touch to the design, but also serves as a helpful indicator for users that clicking on the link will take them to another website.
In this article, we will explore how to use CSS to style external links and provide examples of how it can be implemented on your own website. So let’s dive in and learn how to make those external links stand out!
CSS for Styling Links That Are Not Your Domain
Cascading Style Sheets, widely known as CSS, is a fundamental tool in the world of web design. The power of its application extends to manipulating the appearance of links that lead to external domains. Styling these external links is a valuable practice, offering users a visual cue that they are about to navigate to a different website.
This visual differentiation is particularly advantageous for websites heavy with reference links, such as Wikipedia. With appropriately styled external links, users can anticipate the transition, enhancing their overall browsing experience.
CSS Code for External Link Styles
The secret to styling these external links lies within the CSS coding. A typical CSS code snippet for external links looks like this:
/* Initial version */
a[href^="http://"]:not([href*="mywebsite.co.uk"]),
a[href^="https://"]:not([href*="mywebsite.co.uk"]),
a[href^="//"]:not([href*="mysite.com"]), {
}
/* Alternative version */
a[href*="//"]:not([href*="mywebsite.co.uk"]) {
/* external link styles, use :before or :after if needed! */
}Here’s how it works: The CSS code compares the links with the website address (in this case, “mywebsite.co.uk”). If the link does not match this, the CSS applies a specific style to it.
The beauty of this code is that it can be customized. Replace “mywebsite.co.uk” with the desired website address to apply the new style against.
Applying CSS Styles to Links: A Practical Example
Let’s delve deeper with an example. Assume we have two links: one leads to an external website (For instance, the BBC website), and the other one directs to our CodePen example.
a[href*="//"]:not([href*="codepen.io"]){
background-color: #3FA09D;
}
a{
background-color: #F26522;
color: white;
text-decoration: none;
padding: 10px 20px;
font-size: 20px;
border-radius: 4px;
}With the above code, we use the :not pseudo-class to specify that the styles should not apply to the domain “codepen.io”. Here, the result is that all links not leading to “codepen.io” will have a blue background (#3FA09D). Conversely, links that do point to “codepen.io” will adopt an orange color (#F26522).
Conclusion
The realm of CSS for enhancing external link visualization is a dynamic and remarkable one. Web designers leveraging these strategies not only create a more visually stimulating interface, but they also contribute to a more user-friendly and accessible site. Armed with the knowledge and practical application of CSS for external links, designers are in a powerful position to create engaging and intuitive websites that stand out in the digital crowd. The future holds exciting possibilities for further exploration and innovation in this area. Through continuous learning and adaptation to changing web design trends, harnessing the full potential of CSS for external links remains an exciting endeavor for every web designer.
