CSS Colours for beginners

Let's talk about using colours in CSS!!

It is very easy to use colours in CSS, in this blog I will tell you how to use them.

CSS uses Hexadecimal colours to get the precise colour you want. I use something called a colour picker extension, or I will use a website called colorhunt.co, and this is full of colour palettes that you can copy and paste into your CSS. I also use a chrome extension called ColarZilla and it is fantastic! It is easy to download and once it is in your chrome bar, you're able to use it whenever you see a specific colour you like. Just copy it to your clipboard, then paste it into CSS, but how do you use colours in CSS....well now I'm going to tell you.

Here we have the body of a HTML document in CSS (in CSS we use the curly brackets):

body {


}

I want to now add a specific colour for my background...so this is what I will do:

body {
background: #ffc106;
}

Now the colour will be a very specific shade of yellow. Now I want to change the colour of the font to purple...

body {
background: #ffc106;
color: purple;
}

Firstly, to change the colour of the font you have to use color. Secondly, as you can see, I didn't use a specific hexadecimal colour for the purple I chose. I have used CSS's version of purple. CSS has all the general colours going from a black to a light blue, I'll show you...

body {
background: darkgreen;
}
h1 {
color: lightorange;
background: black;
}

You see, it is that easy to apply whatever colour you want. I will show you now using hexadecimal examples:

body {
background: #003001;
}
h1 {
color: #f96c00;
background: #000000;
}

EASY!!!

I hope that this has helped you with understanding colours in CSS. Thank you for reading and I'll see you in the next blog!!

In the meantime....KEEP CODING!