Anchor links use CSS in three places: inside a <style> tag in your HTML file's <head> section, in a separate CSS file linked from your <head>, or inline on the element itself using the style attribute

The most common approach is a <style> block in your <head>. This keeps your CSS organized and separate from your HTML markup. The second option — a linked external CSS file — scales better for larger projects because one file can style multiple pages. Inline styles (the style attribute on individual elements) work but make your code harder to maintain.

Anchor links themselves are just HTML: an <a> tag with an href that points to an id on the same page or another page. The CSS you write controls how those links look and behave — their color, whether they're underlined, what happens when you hover over them.

Key Takeaways

  • Put CSS for anchor links in a <style> block inside your <head> section, before the closing </head> tag.
  • Link to an external CSS file from your <head> using <link rel="stylesheet" href="styles.css"> if you want to reuse the same styles across multiple HTML pages.
  • Inline styles using the style attribute work for single elements but become difficult to manage as your project grows.
  • The anchor link HTML itself (the <a> tag and href) goes in your <body>, but the CSS that styles it goes in your <head>.

Using a <style> block in the <head>

Open your HTML file and find the <head> section — it's the part between <head> and </head> at the top of the file, before the <body>. Inside that section, add a <style> tag. Everything you write between <style> and </style> is CSS that applies to your page.

For anchor links, you might write something like this in your <style> block:

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

The first rule styles all <a> tags — making them blue with no underline. The second rule uses :hover to change the color to red and add an underline when someone moves their mouse over the link. This approach works well for small projects or single pages because all your CSS is in one place and easy to find.

Linking to an external CSS file

For larger projects, create a separate file called something like styles.css and put all your CSS there. Then link to it from your <head> using a <link> tag. The tag goes inside your <head> section, usually near the top:

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

The href should point to wherever you saved your CSS file. If styles.css is in the same folder as your HTML file, just write the filename. If it's in a subfolder called css, write href="css/styles.css".

Inside styles.css, write your anchor link CSS the same way you would in a <style> block — no <style> tags needed, just the rules themselves. This approach lets you link the same CSS file from multiple HTML pages, so you only have to update your styles in one place.

Inline styles on individual anchor tags

You can also put CSS directly on an anchor tag using the style attribute. This goes in your <body> where you write the actual link:

<a href="#section2" style="color: blue; text-decoration: none;">Jump to Section 2</a>

Inline styles work, but they're harder to maintain because the styling is mixed into your HTML. If you have ten links and want to change their color, you have to edit ten different tags instead of one CSS rule. Use inline styles only for quick tests or single elements that truly need unique styling.

Targeting specific anchor links with classes and IDs

If you want different anchor links to look different, use class or id attributes to target them in your CSS. Add a class to your anchor tag in the <body>:

<a href="#top" class="nav-link">Back to Top</a>

Then in your <style> block or external CSS file, write a rule that targets that class:

.nav-link { color: green; font-weight: bold; }

Use a dot (.) before the class name in CSS. If you use an id instead, use a hash (#) in your CSS. Classes are better when multiple elements share the same style; IDs are better when only one element needs that style.

Common CSS properties for anchor links

Once you know where to put your CSS, here are the properties you'll use most often for anchor links:

  • color — changes the text color (e.g., color: blue;)
  • text-decoration — controls underlines (e.g., text-decoration: none; removes the underline, text-decoration: underline; adds one)
  • font-weight — makes text bold (e.g., font-weight: bold;)
  • background-color — adds a background color behind the link
  • padding — adds space inside the link (useful if you have a background color)

Use the :hover pseudo-class to style what happens when someone moves their mouse over the link, and :visited to style links the user has already clicked. These go in your CSS like a:hover { color: red; }.

Frequently Asked Questions

Do I have to put CSS in the head, or can it go in the body?

CSS should go in the <head> section, not the <body>. Browsers expect stylesheets to load before they render the page, so putting CSS in the <head> prevents flickering or unstyled content appearing briefly. Inline styles on individual elements are the only exception — those go in the <body> with the HTML they style.

What's the difference between a class and an ID in CSS?

A class can be used on multiple elements, so it's good for styling groups of similar things. An ID should be unique — only one element per page should have a given ID. Use classes most of the time. IDs are useful when you need to target one specific element or when you're using JavaScript to interact with that element.

Can I use both a style block and an external CSS file on the same page?

Yes. You can link an external CSS file in your <head> and also have a <style> block. If both define the same property for the same element, the one that appears later in the <head> wins. This is useful when you want most styles from the external file but need to override a few for one page.

Why do my anchor link colors not change when I add CSS?

Browsers have default styles for visited links (usually purple) and unvisited links (usually blue). Your CSS overrides these, but make sure you're targeting the right element. If you wrote CSS for a class called .link but your anchor tag doesn't have class="link", the CSS won't apply. Also check that your CSS file is linked correctly and that there are no typos in your selectors.