In this installation of our “Start Here” series, you’re going to breathe some life into the site you’ve been creating by using CSS colors and backgrounds.
In this course you’ll learn all about the visual techniques that make sites stand out from one another, and bring the “design” into web design. So let’s get going with “Start Here: Learn CSS Colors and Backgrounds”.
More from our Start Here course series:
Learn CSS: The Complete Guide
We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.
1.Introduction1 lesson, 00:58
2.Learn CSS Colors and Backgrounds5 lessons, 34:24
3.Conclusion1 lesson, 02:54
1.1 Start Here: Learn CSS Colors and Backgrounds
If you're an aspiring web designer and you wanna learn how to breathe life into your designs using CSS colors and backgrounds then start here. In this course, we're gonna take the layout that we finished in the last course, and we're gonna give it some personality by turning it into this. In this course you're gonna start by learning how to add background colors and in the process you're gonna learn about some different types of colors that you can work with in CSS. From there you're going to learn about how to set text colors on headings and regular text and also on links. You'll learn how to insert and control background images, you'll learn how to work with border colors and you'll also learn how to add some cool effects using CSS three shadows. By the end of this course, you'll have completed the site that you've been working on since the beginning of the start here series and you'll also have all the most important information on how to work with colors and backgrounds in CSS. So let's go ahead and jump in to Start Here Learn CSS Colors and Backgrounds. I'll see you in the first lesson.
2. Learn CSS Colors and Backgrounds
2.1 Background Colors
Hi, welcome to Start Here, Learn CSS Colors and Backgrounds. This is the final course in our Start Here, Learn Web Design series. In this course, we're gonna take the site you've been working on throughout the duration of this series, and it currently looks like this, and we're gonna add CSS colors and backgrounds, and we're gonna turn it into this. The first place that we're gonna start is with CSS background colors, but before we get into adding background colors into a design, let's quickly go over the basics of how background colors work and also the different types of colors that you can use in CSS. All right, so what we have here is just the basic HTML page. We've got two divs. We've got a div with the class parent, and inside that, we've got a div with the class child. And you can see the layout when we hover over the parent element in Chrome web developer tools inspector. Now right now you can't see those divs because they have no color. So over in our CSS, we're gonna add some background colors to each of these divs. Now to add background color, the property that you wanna use is background-color. Now as for values, when you're working with color in CSS, there are a few different types of colors that you can use, and in this course, we're gonna look at three of those types. We'll look at CSS color names, we'll look at hex codes, and we'll also look at RGBA colors. The first thing that we're gonna look at is CSS color names. Now, these are words that represent specific colors. Below this video, you should find a link to this page here which gives you a list of all the different CSS color names that are available to you. So let's have a quick look through, and we'll pick out a couple of these colors. Let's try antiquewhite, so we'll just copy and paste that and use that as a value for our background-color on our parent class. And let's try aquamarine, As a value for the child class. Bring up our page, save our CSS. And now you can see we've got our antique white background color on the parent and our aquamarine background color on the child. So that's the first type of color value you can use when you're working with color in CSS. The second type that we're gonna look at is called hex codes. Now hex represents six. So what hex code means is a code that has six places in it. Now I'll give you an example of a hex code. Hex codes always start with the hash symbol, and then after that, you have your six characters. Each character can be a number zero through nine or a letter a through f. So I'll just gonna put in six zeros. Then we'll save, and then you can see that our hex code has given us the color black. Now the way that hex codes work is the first two characters represent the color red. And the characters that you use in these two places determine how much red is gonna be in your color. Now we've set this to 0, and that means there will be no red in the color. The second two characters represent the color green, and once again by setting these characters to 0, we're saying there's gonna be no green in this color either. And then finally the last two characters represent blue. And once more, we're setting this to 00, saying there's gonna be no blue in the color either. And you'll probably will have noticed that those three colors that are represented here are RGB. So what you doing with a hex code is specifying an RGB color value. Now on one end of the scale, you can set the characters 00 to say you don't want any red or any green or any blue in your color. On the other end of the scale, the highest end of the scale, you can use the letter f, and when you use the letter f, you're setting the maximum amount of red, green, or blue into your color. So now let's do that on a child class. So for red, we gonna use FF to set it to the maximum. For green, we'll use FF again, setting that to the maximum, and then for blue we'll also set FF to set that to the maximum, and we'll save. And now that set the background color of our child element to white. So these two hex codes are at either end of the color spectrum. When you turn everything down to 0, you get black, and when you turn everything up to F, the highest value, you get white. And to correct colors in between, you mix up these values. So for example, let's say we wanna make the brightest red possible. We know that these first two characters represent red, so we're gonna leave those at FF dialed up to the highest point. But for the last characters, we wanna have no green in the color, so we'll set that to 0, and we also wanna have no blue in the color, so we'll set that to 0. Then that gives us red. We can do the same thing if we wanna create a bright blue. We don't want any red in the color, so our first two characters will be 00. We don't want any green, so again 00. But we do want the brightest possible blue, so we'll set that to FF. There we have blue. So from here, we can start mixing things up. So let's say you wanna create magenta. Now in the RGB color space, if you mix red and blue, you get magenta, so we'll change our first two characters to FF, so that we add red. Leave a second two characters at 00, so we have no green. And then we'll add blue by setting the last two characters to FF, now we'll save, and there's our magenta. Now as you can see, this is fairly lurid right now because, everything is dialed up to the maximum. So let's say we wanna have a red color, but we don't want it to be quite so bright. Now the hex code that we used to create red before was FF0000. Now if we wanna make that a little softer, what we can do is choose one of the values that somewhere in between 0, the lowest, and F which is the highest. And these values count up from zero so go 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 and then instead of counting at 10, 11, 12 and so on, we use letters instead, so once we get to nine, we move on to A, B, C, D, E, F. So let's insert AA instead. There now we've got to red, but it's much darker than what we had before. Now let's make it even dark again by using some numbers. Now let's use 66. So now the red has darkened off even further. So you can mix these letter and number characters up in any way that you want to to create all sorts of different colors. If we go over to the color name list that we're looking at before, then you can see the corresponding hex codes that match the color names we used early, so we can get the antique white color back again, and we'll put that on to our parent. We'll put the aquamarine color onto our child, and now we get the same colors that we had just a moment ago, but instead of using color names, we're now using hex codes. So by using all of these different letter and number values in mixing together different amounts of red, green, and blue, you can create all kinds of different colors. And that brings us to the third type of color that we're going to look at ,and that is RGBA colors. You've already seen how you can use RGB to create different colors. And with RGBA, you add an extra value, and that is alpha. Now what alpha does is allows you to add transparency to a color so an alpha value. Now let's look at an example. So we're just going to delete these two colors. And instead we're gonna add in RGBA, and then we're gonna add a set of brackets. Now we're gonna add values for r, g, and b similarly to what we just did with our hex codes, only this time we're gonna use commas separated numbers. And the first three of these numbers represent our RGB values. They can be set anywhere from 0, which is the lowest up to 255, which is the highest and is the equivalent to FF in a hex code. At first we'll add a value for r which is red, and we'll set that to 0, and we'll add a comma. Now add a value for g which is green, and we'll set that to 0. Then we'll add a value for b which is blue, and we'll set that 0 as well. Now we need to add a value for a, which is the alpha value, and this determines how see through the color is. Now if we don't want it to be see through at all, then we'll add 1 as the value which is the highest possible alpha value, and we'll save. Now both of our divs have been set to black. Now this is just like the hex code that we created earlier where we had six zeros. We've said that there should be no red, green, or blue in our color, which just leaves us with black. But now what we can do with our fourth value is we can change the opacity. One is the highest, which means that this is not see through at all. If we change it to 0, it'll be completely see through. So if we change it to 0.5, it's gonna be halfway in between the two. Now, let's see what the effect is. So now what we've got is a black color with 50% opacity. So our parent div here is allowing the white color of the background to show through, which is why it comes up looking a little bit gray. But our child div here is letting both the white of the background and the color of the parent div show through as well, which is making it look darker. Now RGBA colors can be very useful for when you want to do things like creating shadow effects that will let background images show through and for giving you different sorts of subtle ways to blend colors together, and you'll see that in action a little bit later in the course. All right, so that covers the essentials of CSS color names, hex codes, and RGBA colors. Let's take that and use it to apply some background colors to our design. Okay, so here we are at the site that we've been working on throughout the duration of this series. And in the source files that come with this course, you'll also find a set of starter files that will let you just pick up where you need to, to carry on with this course. So open up a preview of that site from the starter files and the style CSS file. And we're gonna add three background colors. We're gonna add a background color to our body, so that everything in our whole site is colored. We're gonna add a background color to our wrapper, so that our main content area here is colored. And then we're also gonna add a background color to fill in our image frame here. All right, so let's start with our body color. So in the body style, add the property background-color. We're gonna use a hex code, and we're gonna set it to 75A1A0 and then end the line with a semicolon. Right, so now that has put a background color across our whole site. Now we're gonna color our wrapper here, so we'll find our wrapper class. Add the background-color property again. This time our hex code is going to be CEC9B6. So now we've got a color to our wrapper, and you can see that the background and foreground colors that we have here match and work in with the logo that we already have set in our design. Now finally, we're gonna add a background color into at image frame. So we'll find an image frame class, add the background-color property again, and now we'll add the hex code 443D3B. Right, and then that gives us a brown that matches the brown from our logo. So now we have all of our background colors in place, and we're ready to continue laying more color and polish on to our site. So in the next lesson, we're gonna move on to setting text and link colors. And right now, we've still just got our default black text in place, and we're gonna change that to suit something a little bit more in keeping with our color scheme. And we've also just got default link colors here. So we're gonna change that to suit our color scheme too. And you learn how to do all that in the next lesson. I'll see you there.