Using background colors are a great way to visually separate content on webpages. Learn how to apply this style to your projects.
- [Instructor] In this exercise, we'll add some colors to the top of the page. I've just added a temporary comment at the top of my page listing my color palette's hex codes, just to make it easier to copy and paste the values when I need them. Let's start with removing the testa background color in the body selector. I'll leave this body declaration here, because I will be adding styles to it eventually. Next, let's add the background color to each section. I'm going to be using the same color for both my header and footer, that dark blue color from my color palette.
So this will give me an opportunity to combine multiple selectors. I'm going to first put header comma footer to select both at the same time, and then I will give it a background color using my dark blue hex code. Save, and I will check in the browser that this new color has been added. Refresh the page, my header and my footer are now dark blue.
Let's go back to the CSS file. Now let's go down to the work experience and education section. So for these two sections, I can't use a type selector, because they are both contained within a section tag. Here's the work experience, and here's the education. I want each to have their own background colors, so to do so, I'll add a class to each section so that I can target them separately.
You could use an ID here as long as you only use the value once per page, but as I mentioned previously, I like to stick to using classes for all of my CSS. So I'll give my education section a class of education, and then, I'll go back up to the work experience section and give it a class of work. Adding a class to each section will allow me to target each element by the class name instead of the section tag.
Now I can add a background color for each in the CSS file that is different from each other. For classes, remember, the selector starts with a period. I named my work experience class work, and I will give it a background color, colon, let's grab that hex value from that comment, I'm going to make this the light, almost white, blue color.
Okay, and while I'm here, let me grab this light blue hex code as well to add it to my education section. Dot education... curly braces, background... colon, value, ends with a semicolon. Save it, and refresh the page.
Let's make sure those changes have been added. Both colors are now added to the education and the work experience section. Since I used a darker background color for the header and the footer, the black text is kind of hard to read now, so let's change the font color using the CSS color property, just for the header and footer. Back in the CSS file, we can add the color property to the existing header and footer block. I'm going to use this light blue color for the fonts in the header and footer.
Let's save that and refresh the page, and check that the color has been changed. Next, let's change the default link colors. I'm going to be using the red from my palette, just to give the page some pops of color. Let's go back to the CSS file and add a new declaration block. I want to select all the links on my page, so I'm going to use A as my selector, and add the opening and closing curly braces. We'll use the color property, colon, I'm going to use red for my links, and also add a style to the links hover.
So let's add another block to add the hover style. A, colon with no space, hover, then open the curly braces. For this style, I'm going to use a property called text decoration, text dash decoration, and set it to none. What this will do is remove the default underline when I hover over the element. Let's save it and refresh the browser and test for the changes.
Now my links are red, and when I hover over them, the underline is removed. Let's make one more change. In the header, I would like to change the H one and the H two to a different color, just to make it stand out a little bit more from the rest of the text. Here, we can use a descendant selector to make sure that we only target the headings in the header element. Back in our CSS file, and under the header and footer section, add a new declaration block.
So, I would like to target the H one and the H two in the header. When combining descendant elements, make sure to write the full combination. And apply the color. I'm going to use that light blue, almost white color. End with a semicolon, save, and refresh.
There, now it stands out a little bit more in the header section. Your project should look similar to this now. Feel free to add your own content, color options, or even use your own class names. Just make sure the general structure stays the same to be able to continue to follow along with the exercises.
- Creating a CSS file
- Writing basic selectors
- Setting properties
- Using different typefaces and web-safe fonts
- Understanding cascading and inheritance
- Setting a font family, font size, text color, and more
- Understanding the box model
- Using the float property