LEARN HOW TO INTERPRET YOUR ANALYTICS DATA WITH OUR NEW 1-DAY COURSEBook now

Place your mouse over this link: This is a link

How does that work?

Pretty neat! This link is created by nesting elements. Let's put the CSS code together, bit by bit:

a.example
{
color: #00f;
text-decoration: none
}

a.example:hover
{
color: #f90;
text-decoration: underline
}

<a href="#" class="example">This is a link</a>

...Giving you: This is a link

(#00f and #f90 are shortened versions of #0000ff and #ff9900 respectively - you can apply this shortened version to any value like this)

Nesting elements

Pretty straightforward so far. Now, here's the fun part! We can nest a <span> tag in the middle of the link:

<a href="#" class="example">This <span>is a link</span></a>

This doesn't actually change anything so we need to assign a value to the <span> tag in the CSS. In addition to the above CSS rule, we'll insert this CSS rule:

a.example span
{
color: #f00;
text-decoration: none
}

a.example:hover span
{
color: #00f;
text-decoration: underline
}

This gives us: This is a link

Nesting... again

Right, let's get nesting again:

<a href="#" class="example">This <span>is <span>a link</span></span></a>

Now let's create a new CSS rule for this <span> tag:

a.example span span
{
color: #0c0;
text-decoration: none
}

a.example:hover span span
{
color: #f00;
text-decoration: underline
}

Now we have: This is a link

The final nesting

<a href="#" class="example">This <span>is <span>a <span>link</span></span></span></a>

The new CSS rule is:

a.example span span span
{
color: #f90;
text-decoration: none
}

a.example:hover span span span
{
color: #0c0;
text-decoration: underline
}

And the final result: This is a link

All done... So now you've learnt how to change colours within the same link, using the power of CSS - congratulations!

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

Training academy

  • User experience

    Join up your customer touchpoints to deliver the best possible digital experience that is proven to deliver outstanding business results

  • Website optimisation

    Ensure your brand promises are delivered through your digital channels so that your customers return and bring others with them

  • Online copywriting

    Make sure all your customer touchpoints consistently deliver the very best in user experience, design and usability.

  • Web development

    Increase conversion across all your digital channels. Our clients sell more because they reap the benefits of our sales optimisation expertise.

  • Online marketing

    Get ahead of the competition with a customer-centered digital strategy designed to deliver long-term business success.

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

 

Skip to site navigation