Getting Started with CSS Rules

In the HTML section, you created an "index.html" file that contained an image and list. This article explains how to add CSS to that document. You will define styles for the <h1>, <p>, and <li> elements. This example uses embedded CSS rules in an external .css file. This method is efficient for styling several documents.

Styling things based on state

The final type of styling we shall take a look at in this tutorial is the ability to style things based on their state. A straightforward example of this is when styling links. When we style a link we need to target the <a> (anchor) element. This has different states depending on whether it is unvisited, visited, being hovered over, focused via the keyboard, or in the process of being clicked (activated). You can use CSS to target these different states – the CSS below styles unvisited links pink and visited links green.

a:link {
  color: pink;
}

a:visited {
  color: green;
}

You can change the way the link looks when the user hovers over it, for example by removing the underline, which is achieved by the next rule:

a:hover {
  text-decoration: none;
}

 I have added the rules above to it, and now realize that the pink color is quite light and hard to read – why not change that to a better color? Can you make the links bold?

I am a level one heading

This is a paragraph of text. In the text is a span element and also a link.

This is the second paragraph. It contains an emphasized element.

  • Item one
  • Item two
  • Item three


CSS and HTML
a:link {
    color: pink;
}

a:visited {
    color: green;
}

a:hover {
    text-decoration: none;
}

<h1>I am a level one heading</h1>

<p>This is a paragraph of text. In the text is a <span>span element</span> 
and also a <a href="http://example.com">link</a>.</p>

<p>This is the
second
    paragraph. It contains an <em>emphasized</em> element.</p>

<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>Item
<em>three</em></li>
</ul>

We have removed the underline on our link on hover. You could remove the underline from all states of a link. It is worth remembering however that in a real site, you want to ensure that visitors know that a link is a link. Leaving the underline in place can be an important clue for people to realize that some text inside a paragraph can be clicked on – this is the behavior they are used to. As with everything in CSS, there is the potential to make the document less accessible with your changes – we will aim to highlight potential pitfalls in appropriate places.

Note: you will often see mention of accessibility in these lessons and across MDN. When we talk about accessibility we are referring to the requirement for our webpages to be understandable and usable by everyone.

Your visitor may well be on a computer with a mouse or trackpad, or a phone with a touchscreen. Or they might be using a screenreader, which reads out the content of the document, or they may need to use much larger text, or be navigating the site using the keyboard only.

A plain HTML document is generally accessible to everyone – as you start to style that document it is important that you don't make it less accessible.