If you're used to using Word, InDesign or Quark to create styles, you are going to be really familiar with the concept of using Class Styles. Class selectors allow you to create a style with any name that you want. Any element that has that name as a class attribute is then styled with that formatting. The pros of using class selectors are that you can use them as often as you need, as many times as you need them, on any given page. The downside is that you have to apply them manually, so they take a little bit more effort to apply at first, when compared to element selectors.
Usually, when most graphic designers begin working in Web design, this is the type of selector they most often turn to to achieve targeted formatting. You need to be careful when using class selections, however. Often, designers will use them simply because they don't know of another, and usually more efficient, way to achieve the desired styling. This can cause an overabundance of class attributes in your code that don't really have any identifiable logic to them. So here we have the class selectors.htm, from 06_09 folder opened up. And there are a couple of things on the page that it's telling me it wants to do.
For example, this paragraph right here says, "This is also a paragraph, but I want it to look different than the other two." We will have to see how we can do that. Well, class selectors are an excellent way of doing that. And the paragraph right below it says "This is another paragraph, and I want it "to look as same as all my other paragraphs, but I want the word "alone" to look a little different." So we are going to figure out how to do that as well. Well, let's target our paragraph first. Now again, class selectors are kind of a two-part process: You create the class selector, and then you apply it.
So I am going to right over to my CSS Styles panel. I am going to click to create a New CSS Rule. And this time, from the Selector Type, I am going to choose Class. And if Class didn't come up automatically, you can just grab the pulldown menu and choose it. It's the first option there. Okay, so now we need to create our Selector Name. Now before, when we were creating Element selectors, we had a pulldown menu that we could choose from. But now that pulldown menu doesn't do anything for us. The reason for that, our class names are defined by you. You come up with them. So I want to create a class called greenText.
That's fairly descriptive. So I am going to type in .greenText, okay. So let's talk about the naming conventions of class selectors. First, class selectors need to start with this period right there. Please don't forget that. If you forget it, Dreamweaver will often save you a little bit by going ahead and placing it there for you. But you do not want to get in the habit of doing that, because if you began to hand-code your text, and you leave it off, well, you just don't have a selector at all.
So remember, class selectors start with that period. The next thing that you are going to is make sure that your names don't have any spaces in them. You can use underscores. You can use numbers, but you don't want to start off with the number. But avoid punctuation. Basically, just follow your standard naming conventions, no spaces. Don't use any punctuation. And you can either use CamelCase naming, which I have named here, lowercased g uppercase T, or underscores. Now again, I am going to apply this rule to this document only, and I am just going to go ahead and click OK. I am going to change my Font-size to 1 em.
And then I am going to change my Color to a green. And the easiest green for me is just #060. If you type in some hexidecimal values and hit tab, you can see the color that you are going to get. You may be wondering why I am using like three characters, because if you peruse through the Swatch panel that they give us, we get three characters, but often you are going to see hexadecimal values represented as six characters, so what gives there? While these three characters, 060, is exactly the same as 006600.
So it's just a way of short handing those hexadecimal values, if you're working with similar pairs. You can just type in 060 to represent those pairs. Okay, so I am going to go ahead and click OK, and nothing on my page changes. Well, remember, class selectors are two part process. In the first part, you create the selector, second part you apply it. So let's take a look at how we can do that. So I am going to go ahead and select that paragraph that says, "This is also a paragraph, but I want it to look different than the other two." Just clicking in it will focus on that element, but if you want to be absolutely sure that you have selected the paragraph, use the Tag Selector.
Remember, the Tag Selector can be found right down here below the Document Window. Hover over your paragraph and click once. All of your text will highlight, but more importantly, you've selected the actual tag itself. Okay, now I an actually going to switch over to my HTML Properties. That may seem a little weird to you, like why are we switching to that? Well, because the class attribute is actually an HTML Property. You are going to see, as soon as we apply this and when we look at the code, that what's going to happen is our paragraph is now going to have a class attribute. The value of that will match what you have in your styles, and that's what's going to give your styling.
So for my Class pulldown menu here, I am going to grab that, and the only thing that I see is the only class that we have created so far, greenText. So I am going to go ahead and create that. So you can see this paragraph is a little larger than the other ones, but it's also greenText. So now it looks totally different from the rest of the paragraphs, and that's all due to the class that we've applied to it. Now let's take a look at code to see exactly what happened. I am going to switch to a Split Screen View. And here I can see my Source Code and right there is my paragraph, and right there is the class attribute.
So that's how your browser is going to know which class selector you are wanting to apply there, so in that case, greenText. Now let's do this one more time so that we can see a slightly different way to apply styles. I am going to go ahead and create another New CSS Rule. Again, I am going to do a Class, and this time I am going to do .highlight. So .highlight, all one word, make sure it's This document only. And by the way, there is no space between the dot and the selector name. So .highlight is all one word. We're going to go ahead and click OK.
And here, I'm really going to change some things up. And feel free to play around with these Styles. If you want to experiment with the Property to see what's it going to do, no harm, no foul. You're not to break anything. Just go in there and have a little bit of fun. I am going to change Font-style to Italic. I am going to set Color to #000, which is black. And then I am going to switch over to the Background category. So in my Background category, I am going to choose a Background-color of #FF0, and that's yellow.
So this is going to put yellow background behind that text to make it look like it has been highlighted. We are going to put a little bit of padding, so that we have a little bit of space all around our text as well. So I am going to go down to the Box category on the left-hand side there. And for Padding, I am going to turn off Same for all. I am going to do 2 pixels of Padding to the Top and to the Bottom, and 5 pixels of padding to the right and to the Left, so 2/5 2/5. All right. Again, I am going to click OK, and once again, as we have mentioned before, nothing changes. And that's, of course, because we have to apply the Class.
Now before, we want to do it to an entire paragraph. Well, those are pretty easy. We just take the paragraph tag, and we apply a class attribute to it. But what about this word? This word, this word "alone." It's all by itself. It's actually part of the paragraph. So if we apply the Class highlight to that paragraph, the entire paragraph will get highlighted. So how can we choose just that one word and apply that class? Well, let's see. If I go down to my Properties Inspector - and once again, I'm looking at my HTML Properties - I can now grab on the pulldown menu for Class and choose highlight.
Now if I deselect that, I can see that it worked. Our word "alone" is no highlighted with a yellow highlight color. It's italicized and black. So we were entirely successful, but what happened behind the scenes? Well again, I am going to switch over to Code View, and I can see that that word "alone" was surrounded by a span tag. Now spans are generic inline-level tags. Browsers don't render them at all, but what they allow us to do is surround words, individual characters or entire passages and then use the Class or ID attribute to set that word apart, and say that there is something special about it.
In this case, we apply the Class attribute highlight to it. So as you can see, Class Styles are great for targeting specific instances of styling and addressing them. Now as I previously mentioned, and this is really important, you want to be careful about overusing Classes. Classes should be used either when no other means of styling the text exists or when the Class attribute is being used to add a meaningful name to the element. So learning how to target styles through descendant selectors - that we are going to cover in just a little bit - and ID selectors will be extremely helpful in making sure that you're not using, or overusing, your class selectors.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.