Site Development
Downloads
Help!!
Home
What Are "Classes"?"Classes" allow a single element to be styled different ways Lets say you have a page that presents an interview with someone. You want a way to distinguish the questions asked from the responses. You want both the questions and responses to be in <p> tags. So how can we style the "p" element two different ways to distinguish the questions from the responses? This is the problem that CSS Classes solve. Please note that this is entirely different than styling several elements with one style rule. To do that we only need to list the elements in the style rule and separate them with commas. Classes allow us to do the opposite. We can take one element and give it multiple possible styles. Making Classes For HTML ElementsLets begin by considering the interview example above. Both the questions and responses will be put in <p> tags. To distinguish between a "question" paragraph and a "response" paragraph, we'll color the question paragraphs blue and the response paragraphs red. Good taste might dictate you use different colors, but the principle is the same. First lets make an overall style rule for the "p" element. This will effect all paragraphs:
<style type="text/css"> You should be able to recognize all of the elements of the style rule above. This makes some standard, black reading text for the regular, "non-interview" paragraphs on your page. The size might be a little big for some tastes, but otherwise it's a pretty standard styling for the "p" element. Now lets make a class of paragraph that's blue for the question paragraphs:
<style type="text/css"> Not too hard to figure out, huh? The p.question is the name of the new class we created. To make a class, first decide which element you want to attach a class to. Next, make up a name for your class. I used "question" in this case. It's a good idea to use a descriptive name. Now all you need to do is type in the element followed immediately (no spaces) by a dot ( . ). The dot is followed immediately (no spaces) by the name you chose for the class. Now all you have to do is to make the declarations. Remember that classes inherit the style of their parent. In this case, "p.question" inherits the font-family, font-size, etc. from "p". All you need to style is the stuff you want to change or add. I made "p.question" blue and gave it more margin so as to be indented from regular paragraphs. Now we need to apply the new class to our page. To do this we just add a CLASS attribute to our HTML tags as needed:
<body> Here's an example of the above styling in action. To apply the new class, you just need to add the CLASS attribute in the appropriate HTML tag and set it to the name of the class. You do not include the dot in the CLASS's value. The dot used in making the class is just a delimiter so the browser knows that you are making a CSS class. Now lets wrap up the styling by making the red "response" paragraphs:
<style type="text/css"> The new "p.response" class of paragraph can be applied using <p class="response">. The two classes each inherit from the parent "p" element's style rule, but not from each other's. Anything you want to add or change must be in each class's style rule. Making Custom ClassesCustom class are made by making a style rule without any HTML element at all. You just use a dot and a name and then code the declarations. This class is applied by using the CLASS attribute in any tag in which you want the style rule applied. Lets say you want to add the color red to your italicized text by styling the "i" element. You get to thinking that coloring some other text red, like headers or even whole paragraphs, might come in handy, too. So, instead of making a class called "i.red", we'll just make a class called ".red" and apply it wherever we want:
<style type="text/css"> Notice that we didn't use an HTML element. We just used a class name ("red") alone preceded by a dot. Don't forget the dot. That's what tells browsers that you're making a CSS class. We can apply this new "custom class" in our HTML by using the CLASS attribute in any tag that supports CLASS (which is about all of them). Some examples:
<h3 class="red"> This doesn't effect anything except text color. The <h3> will still be a big header and the <i> will still be italicized. But, now, they will all be red, too. There are two other very important tags that can help you apply custom classes: <div> and <span>. You can use these tags to apply style rules wherever you want. Taking the ".red" class above, I can make any text red by using the <span> tags: <p>Taking the ".red" class above, I can make <span class="red">any text red</span>....</p> The text between the <span> and </span> tags will apply any custom class you make. Any characteristic not defined in the class will be inherited from the parent element. In other words, the class will only change the color (in this case), not the font-family or anything else. The <span> tag is an "inline" tag meaning that it doesn't cause a line break and should be used for small strings of content. Sometimes you'll find that inheritance is different between Netscape and Internet Explorer. Generally, the problem is that something is not inherited as expected in Netscape. This is easy to get around. Just add the declarations that aren't being inherited into the class style rule. This may seem like redundant coding, but it's what you have to do to get things looking right in Netscape. The same goes for parent/child elements like "body"/"p". We've already had some experience with the <div> tag. We used it to center content: <div align="center>. We can add a CLASS attribute to the <div> tag to apply style rules to blocks of content: <div align="center" class="red">. The <div> tag is a block level tag and does cause a line break. It's used for larger blocks of content. So, remember to use <div> for blocks of content and <span> for smaller inline strings. Practice making custom classes and applying them in HTML tags and with <div> and <span>. The most common problems in making and applying classes is forgetting the dot when making classes and misspelling a class name in the CLASS attribute when applying them. If something goes buggy, check these things first. Next, we'll learn how to style our links. Links are different than other text because they don't just sit there like text. They're active elements and each action can be made to change the links appearance like the links in the column to the left of this page. |
To Next Beginning CSS Lesson
Back To Beginning CSS Index