Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Prime CSS Marketing Link Colors
The primer CSS is a framework allowing users to add pre-defined styles to the HTML elements. We can use primer CSS to style the various HTML elements such as buttons, links, forms, etc.
In this tutorial, we will learn to style the HTML links with various colors using the primer CSS.
Syntax
Users can follow the syntax below to use the primer CSS to style the HTML link.
<a class="Link--primary" href="#url">Primary Link </a>
In the above syntax, we used the ‘Link-primary’ class with the ‘a’ tag to style it.
Example 1
We can style HTML links using the various class names of the primer CSS. In the example below, we used the ‘Link—primary’ class name to change the color to the primary color (blue) when users hover over the link.
Furthermore, we used the ‘Link—secondary’ to change the color of the link to secondary. Also, its color changes to blue when we hover over the link.
<html>
<head>
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
<style>
a {
font-size: 1.6rem;
}
</style>
</head>
<body>
<h1>Using the <i> primer CSS </i> to style links</h1> <br>
<div> <a class="Link--primary" href="https://www.tutorialspoint.com/javascript/index.htm"> Primary Link </a> </div>
<div> <a class="Link--secondary" href="https://www.tutorialspoint.com/codingground.htm"> Secondary link </a> </div>
</body>
</html>
Example 2
In the example below, we muted the link by adding the ‘color-fg-muted’ class to the anchor tag. Also, we added the nested link with the ‘Link—onHover’ class name to add a hover effect on the nested link only.
So in this way, we can manage the hover effect on the nested links.
<html>
<head>
<link href = "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel = "stylesheet" />
<style>
a {
font-size: 1.8rem;
}
</style>
</head>
<body>
<h2>Using the <i> primer CSS </i> to style links</h2>
<br>
<a class = "color-fg-muted no-underline" href="https://www.tutorialspoint.com/javascript/index.htm">
No hover --- <span class = "Link--onHover"> Hover on this</span>
</a>
</body>
</html>
Example 3
In the example below, we used the ‘no-underline’ class of primer CSS with links to remove the underline from the link. Also, we used the ‘color-fg-default’ class to set the default color for the link.
We added the nested link inside the link in this example.
<html>
<head>
<link href = "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel = "stylesheet" />
<style>
a {
font-size: 1.8rem;
}
</style>
</head>
<body>
<h2>Using the <i> primer CSS </i> to style nested links.</h2>
<br>
<a class = "color-fg-default no-underline" href = "https://www.tutorialspoint.com/javascript/index.htm">
parent link <span class = "Link"> nested link </span>
</a>
</body>
</html>
Example 4
We inserted the SVG icon inside the anchor tag in the example below. Also, we added the anchor text. In the output, users can observe the link with the svg icon as an anchor text.
<html>
<head>
<link href = "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel = "stylesheet" />
<style>
a {
font-size: 1.7rem;
}
</style>
</head>
<body>
<h1>Using the <i> primer CSS </i> to style nested links</h1>
<br>
<a class = "Link--primary text-bold" href="https://www.tutorialspoint.com/codingground.htm">
<svg xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" fill = "currentColor" class = "bi bi-code"
viewBox = "0 0 16 16">
<path
d = "M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z" />
</svg>
<span class = "color-fg-muted"> Coding Ground </span>
</a>
</body>
</html>
Users learned to use the primer CSS to style the links. Basically, developers just need to use the class names with regular HTML elements to style the particular element. Users can take a reference of all class names related to links from the official website of Primer CSS and customize links.
89 Views
