CSS Colour

It’s easy to spice up your website with some colourful links; in some tutorial, you’ll be shown how to use Hex colour codes and the CSS colour property to give your anchor tags some much-needed pop and how to use CSS to change the link colour on hover. As far as CSS colour is concerned, links, or tags, behave in the same way as regular text. This means to change the colour of a link all you need to do is use the CSS colour property on the anchor tag with whatever colour Hex you want.
Hex code byte values range from 00, which is the lowest intensity of a colour, to FF which represents the highest intensity. The colour white, for example, is made by mixing each of the three primary colours at their full intensity, resulting in the Hex colour code of #FFFFFF.

IDs are another way to style a tag using CSS. They are prefixed with a ‘#’ sign in CSS and are generally meant to be used only once on any given webpage. Classes, on the other hand, are intended to be reused throughout a webpage and are much more common than IDs. CSS classes are prefixed with a ‘.’ and multiple classes can even be attached to the same HTML element. Here we use a class with the same red Hex colour code.

To change the colour of your link on hover, use the: hover pseudo property on the link’s class and give it a different colour. The hover property can similarly be used on both IDs and elements themselves. Colour is just one of many properties you can change using: hover, try experimenting with underlines, border colours and backgrounds for fun.

Facebook Comments