Learn CSS colors in 4 minutes! 🖌️

hey everybody in today's video I'm going to show you how we can apply CSS colors to our website so sit back relax and enjoy the show we'll need four paragraphs to begin with I'll name the first paragraph P1 the second will be P2 followed by P3 then P4 we can change the background color of an element or the font color let's begin with the background color of the body of our document within our external style sheet I will select our body element I'll change the background color property to be now with colors we can use names we can use RGB values hexadecimal values or hsl values for the first example we'll use named colors there are multiple sites in which you can find named colors let's go with this one slate gray background color slate gray save your changes and there you go the background color is now slate gray let's change the font color of our P1 paragraph I will select the ID of P1 I will change the color that's the font color to be do they have tomato yes there is for P1 let's change the color to be tomato because I like tomatoes those are named colors another option is RGB values for paragraph two we will set the color to be a set of RGB values RGB then a set of parentheses R meaning red G meaning green B meaning blue I would recommend looking up a Color Picker for this I would like a light bluish color so let's select uh that's good you'll find a set of three values for RGB these values range from 0 to 255. we will paste those three values within the set of parentheses and there's that blue color let's do this with the background color too let's change the background color from a named color to RGB values RGB parentheses let's go with whatever color this is 41 41 41. and there's that new color then we have hexadecimal values for P3 we will change the color to B some hex value let's go with the green color that's decent hexadecimal values are a combination of numbers and letters the letters range from a to F we'll copy this hex value then paste it hex values with CSS should start with the hashtag and there's that green color let's change the background color again let's go with the lighter color this time 54 54 54. there we are okay lastly we have hsl values or P4 color colon now if you're using vs code here's a little trick we can pull up a Color Picker let's type a color like black click on the box and there's a Color Picker that's built in for hsl we can click the top bar here H meaning Hue s meaning saturation l meaning lightness let's go with the purple color we have one value then two percentages let's change the background color again using hsl I'll pick something a little bit darker that's good all right everybody so in conclusion with CSS colors you can pick either color names RGB values hexadecimal values or hsl values through the remainder of the series we'll be using hsl and well everybody that's an introduction to CSS colors thank you

Channel: Bro Code

Views: 8,277

Keywords: CSS colors, CC course, CSS tutorial

Id: LwbKb2J8iy8

Length: 4min 12sec (252 seconds)

Published: Thu Sep 21 2023