Viewers: in countries Watching now:
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
Although it's not technically a text formatting property, setting the color of text is usually pretty high up on the list of things that designers want to do with it. So I want to take a moment to talk about setting color here. In CSS, you apply color using two main properties. The Background property that allows you to control the content behind an element and the Color property, which some people refer to as foreground color to avoid any sort of confusion with the background property.
We're going to take a quick look at applying color to text in this movie and then go deeper into your options when applying color in a separate chapter a little bit later on. So I have the font-color.htm file open and if I scroll down into my content I can see that I've got a paragraph here, and then I've got a couple of headings. Two headings just below that, one has a class of foreground, the other one has a class of background, so those are the elements that we're going to apply with these color options too. So I'm just going to go right up to my styles, and just below where it says, /*add styles here*/ I'm going to type in .foreground, so I'm going to use that class selector, and inside that I'm just going to go ahead and set color to red.
Now we've been doing this all through out the title, so you're probably very used to doing this. This is the color property and it basically controls the color of the content of the element, so not the background, but the content color itself. We're using a defined keyword like red, but there are many other things that we can do. We can use hexadecimal notation, we can use RGB values, we can use HSL values. So we have some options here, we're going to explore those options a little bit later on when we have our chapter on color here in just a little bit.
For the background selector, I'm going to go ahead and do something a little bit different here. We're going to do background and then inside that I'm going to use the background-color property, background-color, and I'm going to use maroon for that value. So again, I'm just using one of the reserved keywords here. Now I'm going to set a foreground color here as well, so you can mix these together. So I'm going to say color for foreground here, and we're just going to do white and then just to make sure that the text isn't butting up right against the edge of the element, I'm going to give it a little bit of padding.
We'll talk more about padding in our controlling element sizing chapter in just a little bit. We'll go ahead and save that, and I'm just going to test that in one of my browsers, and indeed, I get exactly what I was wanting. So red for the foreground color here, and then I'm using maroon for the background color of this element, you'll notice the big difference between backgrounds and foregrounds, and here I'm using white for the foreground color on this element as well. Of course, there are tremendous amount of options regarding setting color that I haven't even covered yet.
So a little bit later on we're going to talk about hexadecimal notation, how to use RGB and HSL values, and even how to use transparency when defining color.
There are currently no FAQs about CSS: Core Concepts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.