Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding the structure of an HTML or XHTML document
- Creating and using templates
- Controlling white space and line breaks
- Making effective use of tables and frames
- Flowing text around an image
- Formatting tables with CSS
- Creating web pages that work properly across platforms and devices
- Reviewing a case study of a complete web site
Skill Level Beginner
In this chapter, we are going to look at the syntax of CSS so you'll know how to read the CSS that you see and you'll be able to write your own CSS. So here we have a document that is formatted with CSS and here we have that same document in the editor and here we have the CSS style sheet. You'll see we are using an external style sheet that's called in right here and there's the style sheet there. This is the same style sheet that we are using throughout this chapter and so you see it is possible and common to use an external style sheet for multiple documents.
It makes it very easy to keep track of the styles and the formatting across different documents. Before we get into the syntax of the CSS itself, there's one subject that I'd like to cover in the XHTML on how the styles are applied. There are two special tags in XHTML and HTML called span and div. Div is a block level element and span is an inline element. So they are used like this. They don't have any properties of their own.
They are used for applying styles. So if I say div over here and I say style equals color blue and then I close that down here with the end tag for div. I'll go ahead and I'll save that. Now this section of the document will come up with blue text whereas the rest of the document will have the text that's defined in the body element in the CSS.
So I'll go ahead and I'll reload this. There you have it. This section is now blue and the rest of the document still has the color that's defined in the body element of the CSS. So that's how div works. Div is for applying style to a section of a document at the block level. In other words, these are block level elements. The <h1> and the paragraph are block level elements. So I need a block element to wrap around them so that I can have blocks inside of that tag. Likewise, if I wanted to do the same thing but on the inline level, I would use <span>.
So <span> is an inline level element that has no properties of its own but is used for applying style. So here we have span and a style of color red. So the text of this word, originally, will be red, whereas the rest of this paragraph will still have the color that it's inherited from this <div> element that we just inserted. So I'll go ahead and I'll save that and we'll see that the word, originally, will now turn up red and there we have it. You'll notice that they inherit just as you would expect them to because the <div> element is outside and the <span> element is inside.
So <span> inherits its properties first from the paragraph, which is just outside of it and then from the <div>, which is outside of that. So it still follows the same hierarchy as rest of the rules for applying CSS. So let's take a look at the style sheet itself and we'll understand some of the elements of how the style sheet works and how the syntax of the style sheet works. Here we have the words body and h1 and p, and these are selectors. So the selector is the first thing that you'll see in a style in the style sheet.
There are three different kinds of selectors. This is a tag selector and this is a tag selector and this is a tag selector. So these are names of tags and you don't see any special punctuation around them. When you see a period before the name, as in the case of .first, and in the case of .highlight, those are called class selectors and those are applied using the class attribute in XHTML. So here, instead of using style, if I simply said class equals highlight, that selects the class style using the class selector.
So I'll go ahead and save that and we'll look at in CSS. So we have this highlight selector with the dot before it. That makes it a class selector. So we use the class attribute to select that. So class equals highlight and the class attribute selects that. Notice that there's no period here. We don't use the period in the name on the XHTML side. We just say the word highlight. The period is used in the CSS just to say that it's a class selector. I've saved that and I'll go ahead and reload in the browser and we see that now it has that bold font and the highlighting behind it.
In fact, if we wanted to, we could apply the class selector to any element in the HTML. We could apply it to this <a>. We can say class equals highlight and now the anchor link will be highlighted in the HTML, see there, or we could apply it even to the entire paragraph if we wanted to. And then the entire paragraph would be highlighted like that and that's a block level, so it highlights all the way from margin to margin which is how block levels work.
So that's the class selector. Like I said, there are three different types of selectors so we've seen two of them. We've seen the tag selector and we've seen the class selector. Let's take a look at the third type, which is called the id selector. So here I've created a style and it's called whois and it uses an id selector. The id selector uses a pound sign where the class selector used the period. So that's the pound sign or the hash mark, the tic-tac-toe looking thing that's in the Shift+3 on my keyboard.
So that's the id selector. So I'll go ahead and I'll save this and we'll go into the XHTML. Take this highlight out there. It doesn't get too confusing. So you see here we have style color equals blue in div. I'm going to go ahead and I'm going to say id equals whois and this is how this is typically used. I'll save this. So now, this entire section here with the div is going to use this whois selector and that is an id selector. Now the major difference between an id selector and a class selector is that a class selector can be used over and over whereas an id selector can only be used once.
So I'm really only allowed to use this at one place in a document. If I wanted another div around this other section here, I would have to name that something else. So this is used for marking up an entire section of a document. It might have like a main article, it might have a sidebar, it might have something else and you can separate those sections of the document with id selectors and that allows you to apply a style to that whole section of the document. We'll see a number of examples of this when we look at building a website in the next chapter.
But let's just take a look at how this works for now. We've set up this id selector with the class name of whois and here it is, id whois with the id selector in the CSS. I'll go ahead and reload the document and you see that this is all blue, just like we expected because we have set it to be blue. We can make it something else just so you can see it and say 606 and it will be a sort of a purple color. We'll save that and go ahead and reload in here. So that's sort of a burgundy color there.
That's how the id selectors work. So those are the selectors and there are three different kinds. Then there's a pair of curly braces and the curly braces actually delimit the style itself. So all of this is within the style and it's within these curly braces. So that's part of the body style. Then inside of the curly braces, we have the style itself. Now the style has two parts. It has the property part, which is to the left of the colon, and to the right of the colon, it has the value. So each of these styles, there is a background-color property, a color property, font-family property and the value there is helvetica, the value here is #630, the value here is #ffc.
So we have the property and the value, property-value, property-value, and then each property-value combination is separated by a semicolon. So you have a semicolon there and a semicolon there and a semicolon there. Now, technically, the semicolon is not required on the last property-value combination, but I usually include it when I'm writing style sheets like this and the reason is that it's just hard to keep track of which is the last thing. If I omit it here and I decide I want to add a property after it and I say color equals green then it's just not going to work.
You are not going to see the color equals green. You also won't see the indent. I'll go ahead and I'll save that and I'll show that to you. This is an error. So the reason for that is that I eliminated this semicolon. I didn't use it as the last one and then I added something and I forgot to put it in there. So if I put this back in, then we'll see the color will become green and we'll have the indent again. So that's why I go ahead and I use them anyway, even though they are not required on the last element. They are technically supposed to be separators.
Most people will use them as terminators instead. In other words, they'll put them on every line and that's the reason for that because otherwise, you have to keep track of it and it's just too hard to do. So there you have it. That is the syntax of the CSS. You have the selector, you have the curly braces, you have the properties and values, you have your semicolons. I just want to cover one other thing that's easy to get wrong and I'm going to do this here. I'm going to say in this div, instead of saying id equal whois, and I'm going to go ahead and put in a style using the style attribute and I'm going to say color equals green and we are going to try and set the color here and it's not going to work because I've made a mistake.
I made a very, very common mistake. I am going to ahead and I'm going to save that and we'll load it up over here and we'll see that the color is not green. Can you see the mistake? Aha! I used an equal sign instead of a colon. The colon and the space isn't required but I like putting a space after a colon and most people do. Not everybody though. You won't always see the space. And I made this mistake because I'm so used to in HTML and in XHTML typing an equal sign. So often times, I'll set up a style in my XHTML like that and I'll use an equal sign and I won't notice and I'll save it and I'll load it up and it won't be working.
I'll say why isn't that working and sometimes it will take me a while before I notice that I use an equal sign instead of a colon. So I'm just warning you. Then you'll see that this works now. I'll go ahead and load that up and now it's green. It works with the colon; it does not work with the equal sign. So that's just something that you can be on the watch out for and it's a little gotcha that happens a lot when you are writing the CSS in the XHTML file using the style attribute like that. So there you have it. That's the syntax of CSS. That's how CSS works. We also talked about the <div> and the <span> tags, which are really useful for applying style in a document.