Adding CSS to Hyperlinks

Hyperlinks are one of the backbones of the web.  They are an important navigation tool to guide users to additional pages and further content.  Hyperlinks can also be interactive and display different states to users on a web page.  In the following examples, we will use CSS Styles to make hyperlinks interactive.

Default State

a: link {} or just the letter a {} is the default state of a hyperlink.  The default state is the appearance of the hyperlink when it is first created or never modified.  The following example demonstrates how to add CSS Styles to the default state of a link.

See the Pen CSS for links by Stuart (@bystuart) on CodePen.

Hover State

a: hover {}  is the state of the hyperlink when a mouse cursor is above the link.  When the mouse cursor’s position is above the link, the link will become interactive and change its state to the referenced CSS Style.

See the Pen a:hover by Stuart (@bystuart) on CodePen.

Active State

a: active {} is the state of the hyperlink as the user is clicking on the link.  This state is often very fast, since the browser is in the process of moving the user to a new web domain specified in the link address.  Nonetheless, when the user looks closely they will see the state of the link change to the referenced CSS Style.

See the Pen a:active by Stuart (@bystuart) on CodePen.

Visited State

a: visited {}  is the the state of the hyperlink when the user returns to the page after previously clicking on the hyperlink.  The visited state is most prominent when an individual uses a search engine.  After the search, the user will receive a list of search results.  The individual who is doing the searching will often return to the search results page numerous times reviewing which resource is the best fit for the information they are looking for. [PLACE A PICTURE ] The visited link is very helpful for users, as they will be able to identify which web resources they had previously reviewed.

See the Pen a:visited by Stuart (@bystuart) on CodePen.

Focus State

a: focus {} is the state of the hyperlink when the user does not uses the tab key on the keyboard to navigate the web page.  Some users of web pages may not be utilizing a mouse to navigate a web page.  When the user presses the tab key, the cursor will jump in a chronological order through the content on a web page.  The focus state is very closely linked to making web pages accessible for individuals with visual impairments.

In the codepen example below you can try this out by clicking in the white area above the links then using your tab key to jump between them.

See the Pen a:focus by Stuart (@bystuart) on CodePen.