4.2 CSS Selectors

In the previous lesson I very briefly introduced you to CSS, the technology that we use for applying style to our documents. In this lesson we are going to look at a couple of different things. We will look at the more common CSS properties that we would use within our web pages. We will also look at more selectors, so that we can select more elements and apply styles to them. Well, first let's talk about the terminology because we have some new terminology that we use with CSS. The first is a CSS rule, which is made up of two parts. We have what's called the selector and then we have the declaration. Now, the selector selects the elements that we want to apply style to, so this selector is for the body element. So the style that we have declared here will be applied to the body element, and the only thing that we are doing right now is changing the text color to red. So if we look at this in the browser, we of course have red text, but this isn't something that we would normally do. With a white background, we usually just keep the text black, or it might be a darker shade of gray. So we're just going to remove this property, and that is going to revert back to the default value of black. Now, we don't control the default values that's done within the browser, and the user can change those values in most browser. But most, don't so, we don't have to worry about that, okay, so, we have our body, but let's change the font of our body. Because, yeah, this is fine but this is the default font, we want something a little bit more modern, I guess you could say. So we can type font, and brackets is going to give us a variety of suggestions that we might wanna use to modify the font for the body. Now, what I wanna do is change the font size. So you can see that the property is font-size, followed by a :, and then our values. So, let's do something that's fairly large and let's do a team. Now it's not enough to just use a numeric value here, there are different units that CSS supports. And we need to supply the unit, because by itself it's unclear if this is using points or pixels or if it's a relative value. So let's stick with something, that's an absolute size and we'll just go with pixels. This means that the font is going to be, 18 pixels high. And if we go back to the browser and refresh the page, we're going to see that the text does indeed change, it is much larger than it was before. But let's also change the font face itself, and that's actually called the font family, so font-family. And we can do a variety of different things here, we can use a named font arial in this case, which every Windows machine has this font. So if we go back to the browser and refresh, we see that the font does indeed change. Now, there are some computing systems that might not have the Arial font, in which case, we would need to supply a fallback font. We do that with a comma, and then whatever name that we wanted to use. So we could say Helvetica, and so if a browser or a computer doesn't support Arial, then it would fall back to whatever we specify here, Helvetica. So if we go back to the browser and refresh, we're not going to see any difference here because Arial is being used. Now, we can add as many fallbacks as we want, we can say that, okay, we want to use Arial. But if that's not available, we can use Helvetica, but if that's not available, then we might want to use something a bit more generic. And CSS has a variety of generic font names, in our case Arial is without any serves. So it's sans-serif, and I think Helvetica is as well, really not sure about that. So we can come in here and we can say that, okay, if the computer doesn't have arial or Helvetica, then we just want to use a font that is sans-serif, and that would be fine. Now we have two properties here, but there's also a font property that combines several of the other font properties. So with just font we can say that we want a font that is 18px high and it is arial or Helvetica or sans-serif and that will give us the same results. Now, I'm going to comment out these two just for the sake of having them in code download, so that you know that hey are available. Because if you want to change one of these properties, then it's more useful to use that property itself instead of fonts. Now, it's a comment out CSS use a slash followed by an asterisk. And then everything that follows that is going to be a comment until it reaches an asterisk followed by another slash. So these two lines are commented the browser isn't going to use them, it's going to use this single font property. So, just to show you that we get the same results, there you go. Now, we might want to adjust the line-height, that is the space between the lines and we can do that with the line-height property. That is line-height, and then once again, we want a numeric value. Now, you can see that brackets is suggesting two values, inherit and normal. Now, inherit is a CSS keyword, that means that it is a special word that is used in CSS. And it basically means that we want to use whatever value has been applied for the line-height in any parent element. Now, the body element doesn't have a parent element, although it really does, it's HTML. HTML is a parent element and it has a child called body. However, we don't really apply any line-height to the HTML element. So in our case inherits really isn't gonna give us anything, instead, we would want to specify some numeric value. And I really have no idea what this is gonna do, so I'm going to do 24px, and we will just see what this looks in the browser. And I'm not really clear if that added space, [LAUGH] or removed it, so let's do something like 32. And that should definitely add more space there. And really, that might be too much, but we're going to leave that alone. Now, we might want to change the background color of an elements. In this case it's the body, and we can say background-color, and we have a variety of named colors that we can use. We can also use hexadecimal numbers, a hexadecimal number starts with a pound sign and it's broken up into three groups. We have red, green, and blue, a background color of #000000 is black. So if we go back to the browser and refresh, we're not going to see anything because our text is black, and the background color is black. Now for this lesson, we're going to leave the background color as white or whatever the default is for the browser. So I'm going to comment that line out, so that you can have that in the code download. And for now we're going to skip on to the selectors, because there are a lot of properties that we can use. There are too many to list within this course. And I will be using more properties in the following lessons and I will tell you what they are, and what they're used for. But for now let's just skip onto our selectors. So we want to add some more style, we have changed the text of our body, but now we want to do some special things for the headings. And somewhere in here, I believe we still have a span element. So let's start with the headings, let's do something special there. They of course are different from normal text because they are typically larger and they are usually bold, but let's also do something like italicize them. So our selector is going to select both the h1 elements and the h3 elements. And we can use multiple selectors within a single rule, all we have to do is just separate them with a comma. So we have h1, and then we also want to select the h3 elements, so we have h1, h3, and then our declaration. Now, usually you would see this done on two lines, so that it's very clear that this rule is for h1 and h3 elements. And we are going to italicize this, and we do that with a property called font-style. And the value is you can see here, brackets is prompting us with italic, normal or oblique. We're going to go with italic and that will give our heading elements and italic fonts. Now, it's going to keep the size as well as the weight of the font because we didn't change any of those. The only thing that we did is added the ability to make it italicized. So if you wanted to change the weights or the size, you would have to explicitly specify those properties. So for the size, we would have to go and use the font-size property and then give it whatever size that we wanted to. However, in that case, we wouldn't want to use both the h1 and the h3 elements in the selectors, because we wouldn't want those to be the same size. But we're not going to worry about that, so let's just get rid of this font-size property. Now, if we look at our markup, we have two div elements that have id. One is an id of sidebar, the other is an id of main content. And we want to style these elements differently, and we can reference both of these by their id. So we go back to our CSS file, let's start with the sidebar. In order to select an elements by its id, you start with a # sign, and then the name of the id, sidebar. So # in CSS means id, so this is the id of sidebar, and let's give this a background color of green. Eventually, we are going to change this so that it is actually a sidebar. But for now, we're going to give it a different background color than what we would have for the main content. And we would do the same thing for main content. We start with the # sign, and then main-content, and this is going to have a background-color. Let's do something like gray or we can choose one of these values. Let's do lightgray, and then we will see in the browser that our sidebar is green, and then our main content is gray. So we can select elements by their name, we can also select elements by their id. Well, let's go to our markup, because we've used a span element in one place, but let's use it in a couple of different ones. And it doesn't matter where, just pick some random spots, and surround it with an opening and closing span tag. And I'm going to add a total of three and we are going to style these. However, we want to style some of these spans differently. Let's say that we want this ipsum to be red, because this would be considered an error. Of course, it's not but just for the sake of this demonstration, the ipsum is going to be an error. But we want to use these other two span elements for something else. So we can go to our style sheet, we can type span, and if we do color is red, then we're going to see that all of the span elements in our document. Now have a color of red, but we don't want that, we want only the span elements that are considered an error to have a color of red. So we need some way to make our error span to be different from the others, and for that we can use something called a class. A class is a classification, it's something that we would apply to multiple elements. So we're going to give this first span elements a class attributes, and it's value is going to be error. And we will go back to our CSS, and instead of this span rule, we're going to specify that, if it has a class of error, it's going to have a color of red. To specify class, you start with a period, and then the class name, error. So the # sign is for id, the period or the dot is for classes. So if we go back to the browser and refresh, now we see that ipsum is red, but the other span elements are not. But let's give those other elements a style, so we're going to add span once again. And let's give this a color of purple, something that's not red, but it will be visible against the green and the gray. So let's refresh, and now we have our red for the error, then we have the purple for our other spans,. But then later on if we wanted to one of these to also be error text, we can go to that element, and we can add that class. So let's add this third element with a class = error, and it's going to apply that style to that element. So now we have an error here, and we have an error here, and then we have this purple text here. Now we can apply this class to any element. So if we wanted to say that, okay, this heading is going to have the error color as well, so we can say class = error. And then what you need is going to be in red, and that's the beauty of a class, you can apply it to any element that you want to. However, if you wanted to only apply the color of red to span elements that have a class of error, you can go back to the selector, and you can say that span.error will have a color of red. So this means that all span elements that have a class of error is going to have a color of red, and only those elements. So if we go back to the browser and refresh, our heading is going to go back to black, although it helps if you save the document first. So let's refresh and you can see that that has gone back. However, if we wanted to have a different color for that heading elements, we could say h3 and then error. And for our headings if they are an error, then we would do something not necessarily red but redish. So crimson that looks like a good color, so let's use crimson for our headings. And we will go back and we can see a noticeable difference between the crimson color and the red color. Now, just like properties, there are a variety of different CSS selectors. And we could spend a lot of time talking about them and how they work. However, for the sake of this course, we're going to move on to the next lesson. And we will modify the layout of our page using CSS.