This video contains an exercise intended to help you practice using selectors and the color property by adding color styles to the course project.
- In this exercise, we're going to add some color to our projects. I have my project open in the browser, this is where we left off the last time we worked on it, as well as my color pallette generator, just as a reference. Now let's go to the text editor and take a look at the CSS file. I've added a comment to my CSS file listing my color pallette text code, just to make it easier to copy and paste as I move throughout the project. So let's start by adding in some more comments to organize the CSS into related blocks. So, for organizational comment blocks, I like to use dashes to create a visual divider. So, I'm going to call this global styles, and then add the dashes. After my global styles, I like to add more specific groupings, so I'm just going to copy and paste this comment and add them underneath. So the first one is going to be for my profile section, then I'll add one for the projects, and I also have the work experience, education, and contact info. So let me update that. Okay. Now as the project progresses, I'll add the latest CSS styles into these groupings. Let's start with adding the base font color for all the text on the page. We use the color property for that. I'll be using hex values, but you can use any of the other type of color values that we discussed earlier. Going to start with the body selector, open and close my curly braces, and since body is the most general style that you can make, I'm going to put it above the IMG tag, and I'm going to set the color to my dark gray, almost black. It's a subtle change, but personally, I just like to use a very dark gray, instead of the default black for my text. This style will be inherited by all the nested elements, except for links, since they have their own default color. We'll update the link styles in a later exercise. Let's go back to the browser and check for the change. It might be a little bit hard to see because the color I chose is a very, very dark gray, almost black, but I can see it, so, I know that the style has been added. So I'll go back to my editor. I like to write maybe one or two lines of code at a time, and then check for the changes in the browser, just to make sure it applied the way I expected it to. Now let's add a background color to each section, starting with the header area. I only have one header on my page. So I can use the type selector for the CSS. So the header is under my profile section. So I will put the declaration block here. And for the background color, I'm going to go with this dark blue. Save your file and go back to the browser, and check for the changes. Refresh the browser, and the blue has been added. But now that I've used a dark color, the text is hard to read. I'm just going to finish adding all the background colors first and then I'll go back and change the text colors. With Lightning CSS, we have to build it out bit by bit, so that often means going back and forth, and coming back to update something later. So back in the editor, we're going to add some styles to our project section. But we're actually using section elements for the project, work experience, and education areas. So, we can't use section as our CSS selector. So we're going to have to go back to our HTML file and add some classes. By adding classes, we'll be able to create some custom selectors for each section. So for the projects, I'm going to give this a class of projects. So class equals projects in quotes. Scroll down to my work experience area, space class equals work dash experience. And then, in the education section, I'll add a class here as well. And save my file. So now I can add different background colors to each section using these new class selectors. So for projects, I'm going to use a light color for my background here. So, I'm going to grab this almost white color. And, for my work experience, so for the work experience section, I'm going to use my new class of work dash experience, add the background property. And for this one I'm going to use this light blue color. Add my spacing for readability. I'm just going to leave the education section for now because I'll be adding a background image to this section later. So we've added in a couple lines of code, so let's save the file and check it in the browser. Okay so now there's my project section, hence the light color on it. Work experience is light blue, education is blank. So, now I just need to add a color to my footer. Let's go back to the CSS file. For the footer, I plan to only use one footer element on this page. So, I don't need to create another class. I'll just add it using the type selector. So for the background color here, I'm going to use a dark color as well. For the footer, I'm going to use this dark gray. Okay let's save our file. And, refresh the browser. So for the sections with the dark background, we're going to have to change the text color to something lighter. So to change the font color, use the color property. I'll add it to my header and footer declaration blocks since those are the ones that are using the dark background color. I'm going to use this almost white color. So let me copy this here. Add color, colon, hex value, end with a semicolon. And I'll just copy the whole thing and put it down in my footer area. Okay. Your project should now look something like this.
- Writing basic selectors
- Setting properties
- Cascade and inheritance
- Setting a font family, font size, text color, and more
- Working with the box model
- Leveraging Grid and Flexbox
- Using the float and position properties
- Working with advanced selectors
- Creating fluid layouts