HTML & CSS for Absolute Beginners: CSS color basics

Key Takeaways

colors are a huge Topic in CSS and we're just going to scratch the surface of it a little bit uh one of the things that I want you to avoid is actually what I've done so far which is using Color keywords as you can see I've said orange I've said red but like orange like what's the Orange is it you know in this case it's sort of a a brightish orange but we have dark oranges and and all the you know there's lots of different types of oranges out there right and same with red like you could have a deep red and other versions of red and so like when we use a keyword we don't really know what version of the color we're getting we just see that we have a color coming in and just to hammer home why this could be a little bit problematic is I'm going to uh we'll keep both of those for now but I'm going to choose my body again so we'll say body and I'm going to say background color and just really fast those are sort of the two main areas there's a few other things we'll see as we keep going where there's colors that we can use but color is the color of your text and background color is the color of your background and so I'm going to say background color and I'm Gray and we're going to go take a look at what that looks like it's gray it's what you'd expect right uh I'm going to update this now I'm going to write dark gray and watch what happens when I refresh this it gets lighter slightly but it's a little bit lighter and just in case you didn't see that let's go back to regular gray I'm going to hit refresh and you can see it gets a bit darker why is dark gray lighter than gray it's a little bit strange right and that's why I would suggest not using the color keywords cuz you really don't know what you're going to be getting so instead of that you can either be using hex codes hsl values RGB values and there's some others that you can use as well but we're not going to worry too much about that the main one that I would actually suggest using for now is hex which looks really strange but it's generally what you get out of design software and other things and it's probably the most common one you'll see uh even if it's the hardest one to look at and know exactly what color you're getting but just like we get these little color swatches that come up in vs code that also happens with hex codes as well and to highlight this let's delete our are these ones here and just focus on our background color on the body and I'm going to come in with a hex code and a hex code will always start with a hashtag and then it's generally followed by six characters so let's just do 6 a 3B FF and you can see that comes in and VSS code is showing me what that color looks like I'm going to save that refresh and you can see that color coming in uh it looks a little bit weird it just looks like this random string of numbers and letters and it sort of is uh but this is actually an RGB value so the first two are the red value the second two are the green value and the FF here at the end the last two characters are the blue value and the way the scale works is actually you have all the numbers from 0 to 9 and then the letters go from a all the way up to F and let's just to do a really quick example if we did all zeros and I hit save it's pure black so that means we have nothing of any of the colors we have zero of any of everything and then if we did the opposite FF FF FF it means we have full of everything so that's going to give us white instead uh and then so that means if I wanted just red remember the first two values are red ff0000 0 would mean I have full red and then nothing of the other ones and we can come in refresh and we see it there it's a bit harsh on the eyes and I want to put it back to White so white was FF FF FF and I think another one there we go and we bring it back now sometimes you might see it where you only have three letters or numbers used instead of six like this so if I bring this down to just FFF and I hit save it's actually still going to stay White and the reason for that is if you put only three it's sort of like a shorthand so just as an example here I could write a BC and hit save and it gives me sort of this light grayish blue color that would be the same as having a a BB CC so if ever you're repeating the value twice for red for the blue or for the green you can actually skip doing that so we can say an A B C like that so it's either three or six now I don't want to dive too deep into how hex works because in general I don't write my own hex codes um we're going to be using Color Pickers often to get them or you just get them directly from the design so don't worry too much about it I just want to give a quick rundown if you are interested down below there is a link to a free code Camp article that does dive more into hex and how it all works so yeah if you if you're into this type of thing definitely go check it out but if not don't worry about it too much now in this case we actually have a design that we're trying to create and there's specific colors that are being used so once again those colors are down below so you can get them uh underneath this video and I'm going to do the first one here just for the title so you you know you can follow along with me on that one and then I'm going to encourage you to change this one and the footer on your own uh before I go and do it so I'm going to remove this body one cuz without any body Declaration on there it will keep that white background that we have there and the first thing I want to do is the H1 so as a reminder we want to select the element so H1 is the element open and close braces go on a new line and then I don't want to change the background I just want to change the color itself and the color I want for this one is a 46 76 A9 H I'm putting them all as uppercase it's tends to be how you see hex codes but it is okay if you write them in lowercase as well it doesn't change anything so if I refresh that you can see the color has switched over now we need to make it bigger and do other stuff with it if you know how to do that or you remember from when I was playing around before by all means you can do that but we'll cover those in other lessons as well but I'd encourage you to pause the video right now and add the correct colors to the H2 and add the background color and the text color on the footer now for the footer we are able to do it by selecting the entire footer and not selecting the paragraph inside of the footer so set both the background color and the color on the footer and not on the paragraph just to let you know and we'll talk more about how that works in a future lesson so I'm going to assume that you've done both of those so I'll walk through doing it as well and so we'll do my H2 open and close curly brace color and in this time the color is a CB 731 C and you can see here I did it as lowercase and it works perfectly fine and then the footer so for the footer as I mentioned we could do this directly on the paragraph but uh we're going to put it on the footer itself and talk more about that later so then on this one I'm going to do the background color is the uh 22466 C and then my color itself is white so FFF FFF and if you just put three FS that's perfectly fine that will also work and hit refresh and all the way down there at the bottom we can see that that's changed on over now if you do want to play around with changing the color of the body's background color change your paragraphs other things here by all means play around with it a little bit and once you're happy with how things are looking you can head off over on into the next lesson