Get 30% off courses running in September - use code "SEPT30" View training courses

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!

What are you working on?

  • End-to-end customer experience

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

  • Customer loyalty & retention

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

  • User experience of digital touchpoints

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

  • Online sales & conversion optimisation

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

  • Digital strategy

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

  • Application & product design

    Deliver the best experience for your customers with intelligent digital applications tailored to your business goals and customer needs.

  • Mobile & tablet strategy

    Improve your mobile & tablet propositions with innovative, cutting-edge interface designs that work for you and your customers.

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