Where to Put Anchor Link CSS Code in Your HTML File

Anchor link CSS goes in your stylesheet, not in the HTML markup itself

When you style anchor links with CSS, the code lives in a separate stylesheet file (usually named something like style.css) or in a <style> block at the top of your HTML document. The HTML file contains only the anchor tag itself — the <a> element with an href attribute. The CSS that controls how that link looks — its color, whether it's underlined, what happens when you hover over it — belongs in your CSS, not mixed into the HTML.

This separation matters because it keeps your code organized and lets you change how all your links look without touching the HTML. If you put styling directly into the HTML tag using the style attribute, you end up repeating the same code over and over, and changing it later becomes a mess.

Key Takeaways

Anchor link CSS code goes in a separate stylesheet file or in a <style> block in the <head> section of your HTML, never inside the anchor tag itself.
The three most common anchor states to style are a (default), a:hover (when the mouse is over it), and a:visited (after the user has clicked it).
You target anchor links in CSS using the a selector, or more specifically with class names like .button-link if you want to style only certain links differently.
External stylesheets (separate .css files) are the standard approach because they keep your code clean and let you reuse the same styles across multiple pages.

The three places where CSS code can live

Your anchor link CSS can sit in one of three locations, and each has a different use case. The most common is an external stylesheet — a separate file with a .css extension that you link to from your HTML using a <link> tag in the <head> section. This is what professional websites use because one stylesheet can style links on every page of your site.

The second option is an internal stylesheet, which is a <style> block placed inside the <head> section of your HTML file. This works when you're styling a single page and don't need the styles elsewhere. The CSS sits right in the same file as your HTML, but still separate from the actual anchor tags.

The third option — inline styles — is to put the style attribute directly on the anchor tag itself. This works, but it's considered poor practice because you can't reuse the code and it clutters your HTML. Most developers avoid this unless they're making a one-off exception.

How to write anchor link CSS in an external stylesheet

Create a file called style.css (or whatever you want to name it) and save it in the same folder as your HTML file. Inside that file, write CSS rules for the a selector. Here's what basic anchor link CSS looks like:

a { color: blue; text-decoration: none; } a:hover { color: darkblue; text-decoration: underline; }

Then, in your HTML file's <head> section, link to that stylesheet with this line:

<link rel="stylesheet" href="style.css">

Now every anchor tag on that page will follow those rules. The a selector targets all links. The a:hover selector targets links when someone's mouse is over them. You can also use a:visited to style links the user has already clicked, and a:active for the moment while they're clicking.

Targeting specific links with classes and IDs

If you want different links to look different, don't create separate HTML files — use class names or IDs in your CSS. In your HTML, add a class attribute to the anchor tag:

<a href="page.html" class="button-link">Click Here</a>

Then in your CSS, target that class with a dot:

.button-link { background-color: green; color: white; padding: 10px 20px; text-decoration: none; }

This way, regular links styled by the a selector look one way, but links with the button-link class look like buttons. You can explore the same class to multiple links across your site, and change how they all look by editing the CSS once.

Using an internal stylesheet for a single page

If you're building a single HTML page and don't need to reuse styles elsewhere, you can put your CSS directly in the <head> section using a <style> tag. This keeps everything in one file:

<!DOCTYPE html> <html> <head> <style> a { color: purple; text-decoration: underline; } </style> </head> <body> <a href="page.html">My Link</a> </body> </html>

The CSS still lives separately from the anchor tag itself — it's just in the same file. This approach works fine for learning or for pages you're not planning to expand, but once you have multiple pages, moving to an external stylesheet saves you time.

Common anchor link CSS properties you'll use

Color changes the text color of the link. Text-decoration controls the underline (use none to remove it, underline to add it). Background-color adds a background behind the link, useful for button-style links. Padding adds space inside that background, and border lets you draw a box around the link.

Font-weight makes the text bold, font-size changes the size, and cursor changes what the mouse pointer looks like when you hover (usually pointer to show a hand). The transition property lets you animate the change when someone hovers, so the color fades in smoothly instead of snapping when ready.

Here's an example that uses several of these together:

a { color: #0066cc; text-decoration: none; transition: color 0.3s; } a:hover { color: #004499; cursor: pointer; }

This creates a link that's blue by default, smoothly fades to a darker blue when you hover over it, and shows a pointer cursor.

Why external stylesheets are the standard approach

Professional websites use external stylesheets because they solve real problems. If you have 50 pages and want to change how all your links look, you edit one CSS file instead of 50 HTML files. If you're working with other developers, one person can manage the styles while another builds the HTML structure. External stylesheets also load once and get cached by the browser, so your site loads faster.

The workflow is straightforward: create a css folder in your project, put your stylesheets in it, and link to them from every HTML page. As your site grows, you might have multiple stylesheets — one for general styles, one for navigation, one for forms — all linked from the same <head> section. This organization makes your code easier to maintain and easier for other people to understand.

Frequently Asked Questions

Can I put CSS directly in the anchor tag with a style attribute?

Yes, you can write <a href="page.html" style="color: blue;">Link</a>, and it will work. But this is considered bad practice because you can't reuse the code, it clutters your HTML, and it makes changes harder. Use it only for one-off exceptions, not as your main approach.

What's the difference between a:hover and a:active?

a:hover applies when the mouse is over the link. a:active applies during the exact moment the user is clicking it. You'll almost always style a:hover because that's what users see. a:active is useful if you want visual feedback during the click itself, like a button that appears pressed.

Do I need to put the link tag in the head section?

Yes, the <link rel="stylesheet" href="style.css"> tag must go in the <head> section of your HTML, not in the body. The browser reads the head first and loads all the stylesheets before it starts displaying the page, so your links are styled from the moment they appear.

Can I style links differently based on where they go?

Yes. You can use attribute selectors like a[href^="https"] to target only external links, or a[href$=".pdf"] to target links to PDF files. But the clearest approach is usually to add a class name to the anchor tag in your HTML and style that class in CSS, because it's easier to read and maintain.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.