This chapter will cover more exciting ways to use CSS, through colour, borders, margins, padding, floats and more.
Let’s move on now to something a bit more exciting. Colour, or more precisely, using colours on webpages. Colour is everywhere online and its uses are endless. It can be used to add emphasis to important information, break up the flow of a webpage, reflect corporate branding, incite emotion, tell a story or simply just indicate that an element can be clicked. Thankfully, as a developer, adding colour to your website is a fairly straightforward affair. Using colour effectively on your webpage – well, that’s a little bit more challenging. This section will show us how to apply colour to our HTML elements. Along the journey we will also look at some professional tips for using colour effectively in our webpages through some real-world examples.
As with a lot of CSS attributes, background colour somewhat speaks for itself. It literally applies a colour of your choosing to the background of an element. Remembering what we’ve already learned about colour, we can apply colour using any of the methods specified (HEX, RGBA, keyword).
It is important to understand that this property will only change the colour of the background inside the element. Remembering the box model concept, this means that any padding will be coloured too, but any margin applied to the element will not. Borders also exist outside the box, so they would not be affected either. Let’s see this in action: