Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now let's talk about Class Selectors. Class Selectors let you create a custom selector name, kind of like you can do with ID selectors, and then apply that style to an XHTML element using the class attribute. But unlike the ID selector, which should only be applied to one element on the page, Class Selectors can be applied to as many elements as you need. Here's an example of how to a Class Selector is written out. We have the name of the class, in this case .smallprint. Class Sectors always start with a period, followed by the name that you come up with, in this case we've named it smallprint. Then we have the declaration, in this case, which is font size is 10 pixels. This is how the style would appear on our style sheet.
To apply this style to a paragraph, like this, where we have, "This is some small text" surrounded by two paragraph tags,
we're going to add the name of the Class Selector as an attribute, like this. The tag would be followed by tags. Class Selectors can also start with the tag name
tag would be followed byclass="small print" so the browser would then look, and say the small print attribute is font size should be 10 pixels, and it would apply that style to the text within those
tags. Class Selectors can also start with the tag nameif the class should only be applied to particular elements. For example, if you want small print text in paragraphs to be 10 pixels, but you want small print inside div tags to be 12 pixels, you would use Class Selectors that look like this: p.smallprint, and div.smallprint. Now, because Class Selectors are only the easiest selectors to understand once you start playing with them, they're probably also one of the most abused selectors. A lot of people get class crazy, and start applying classes all over their pages to get the formatting they want, like this.
1, 2, 3, 4, 5 of these paragraphs all have the same body text class, and then the last one for some small text has the
small print class. But, this really defeats the purpose of separating presentation and content,
because every paragraph here has to be told how it should be styled. In particular example it would be much more
efficient to redefine the tag using a type selector, and reserving the class selector for the occasional paragraph tags can be styled in a specific way,
tag using a type selector, and reserving the class selector for the occasional paragraphthat needs to be different, like this last line here. So all
tags can be styled in a specific way,and just for the small print text, I could create a class called small print and just apply that as an attribute to the paragraph. Much more efficient, much cleaner looking. So, just be careful not to abuse the class selector. Let's see how these work. Let's go back to Dreamweaver. Back here in Dreamweaver I'm still working with the about tea.html file. We still have our styles.css file open. I'm going to create a new CSS rule from over here in my Styles panel, and we're going to select class as our selector type, and I'll create a style called small print. Now, if you want to, you could type .smallprint, but Dreamweaver were automatically add the necessary dot inside the actual style sheet for you. Click on OK after making sure that we're applying this to our current style sheet.
Let's create a rule definition to create some smaller text. We'll make this 10 pixels, and we'll click on OK. You can see the small print class has now been added to my styles. Notice that the styles.css file has an asterisk next to it telling me that it's changed, and right down here near the bottom we can see the class style we just created. So, now let's take a look at how to apply this class style to something. Inside the table cell I'm going to click at the bottom of the layout, next to the text containing the words "Send us your thoughts", and down here in the Property Inspector, under the Style menu, if we click there we can find all the class attributes we've created, in this case we just have the one, small print. I'll select that. You can see the text has just gotten a little bit smaller.
Because I was clicked inside that table cell, notice that the class was added to that particular table cell. If I go look in the code, you can see it added that attribute to the
I'm going to click somewhere inside of here, and then I'm going to come in here and right-click the div tag here. And I'm going to set the class to the div tag. I also want us to a small text. So I'll apply that to the div tag. Click small print, and now that has also become smaller. If I go and look at the code, there's the div tag, and it's added that class of small print, right there. Now, this text doesn't really look that good flush to the left side of the window here, so I also want this text to be centered on my screen. We need to create a new rule to center any text that's inside a div tag that also has that small print class applied to it. Let's go back to our Styles panel.
Click New rule. In this case we need to do an Advanced tag. Since we want this rule to apply to div tags that have small print applied to it, we'll type div.smallprint. Click on OK. And we'll go over to the Block category, where we know we can find our text alignment, and we'll choose center. Click on OK. And sure enough, now it's been centered. Notice that style has been added here. We created the small print class, which we've applied to this text here and this text here. But, because we want it to center, we would create a very specific class selector that only applies to div tags that have that class applied to it. We'll see that better if we preview this in our browser.
Make sure we save. This dialog box, saying "Some files needed to accurately preview this page have been modified but not saved." Should we save them now? That's referring to my actual style sheet, which I definitely need to save if I want to see this properly. I'll click yes. Refresh my browser. And now we can see the results of our rules. So, that's how you create and work with Class Selectors
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 61159 Viewers
61 Video lessons · 93433 Viewers
82 Video lessons · 104355 Viewers
56 Video lessons · 107766 Viewers
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.