News

How to apply individual styles to links using CSS

Discover how to create custom colour links with CSS using nth-child

8 hz-appoverride-cpuspeed

inspiration: bree.com

Minimal sites that utilise light backgrounds lend themselves to splashes of colour and well-procured photography. This adds style, which in turn adds interest to a page. The Bree site pulls off this technique well with plenty of white space and subtle tones interspersed with well-constructed and well-shot imagery.

It offers splashes of colour with its product shots, but also adds subtle tones via its navigation menu. The hover effect is called into action, switching from a standard background shade to a block of colour with a change of text colour. Nothing particularly radical, but where it gets interesting is that each has a different colour background when the hover state is called into action.

TECHNIQUE

CREATE CUSTOM COLOUR LINKS WITH NTH-CHILD

Create navigation

The first step is to create the navigation system to be used on the site. For this, the < nav> tag will be employed. Add a set of opening and closing < /nav>< nav > tags. Now populate the menu with the necessary text for the links. Wrap each link in an < a> tag and use the hash symbol to create an active link that does not redirect.

001 < nav>
 002 < a href=”#”>NEW< /a>
 003 < a href=”#”>LADIES< /a>
 004 < a href=”#”>MENS< /a>
 005 < a href=”#”>COLLECTION< /a>
 006 < /nav>

Styling < nav> tag

The navigation system is going to include a top and bottom border and will define the font size and weight, plus any margins and padding. To save on space and add more efficient CSS, use the shorthand option. The font size has been set to 32px, but this can be modified to suit; the weight has been set to 200 to make it as light as possible.

001 nav {
 002 margin: 10px;
 003 float: left;
 004 font-size: 32px;
 005 font-weight: 200;
 006 padding: 10px;
 007 border-top: 1px solid #EEE;
 008 border-bottom: 1px solid #EEE;
 009 }

Style links

The next step is to style the links inside the < nav> tags. By default, active text links are assigned an underline; to remove this, the text-decoration value is none. To space the links evenly a right margin is added. Adjust the size to suit the navigation system. Finally, apply padding to expand the link (use the same as for the < /nav>< nav> tag).

001 nav a {
 002 margin: 0px 20px 0px 0px;
 003 text-decoration: none;
 004 color: #999;
 005 padding: 10px;
 006 }

Text colour

The text colour is determined via the ‘nav a’ selector. This is the colour that is used when a link is in a non-active state. As a hover background colour is going to be used, the text needs to be modified to work effectively on a darker background. For this the link hover state has the colour text set to white.

001 nav a:hover 
 002 {
 003 color: #FFF;
 004 }

Individual background colour

To create a different background colour for each link, nth child is needed. The property will need to include the parent element and the link hover option with nth-child added. The number in the nth-child relates to each link, with the first being number 1, the second link being number 2, and so on. To complete the styling, pick the desired colour code.

001 nav a:hover:nth-child(1) {
 002 background:#ffc60a;}
 003 nav a:hover:nth-child(2) {
 004 background:#d5b692;}
 005 nav a:hover:nth-child(3) {
 006 background:#394a97;}
 007 nav a:hover:nth-child(4) {
 008 background:#6f7072;}
×