In “An Introduction to CSS: Part 1,” we learned how to apply Cascading Style Sheets to HTML using tag selectors. With these tag selectors, we could format information using an external style sheet rather than putting all the formatting code into our HTML document. This allowed us to make multiple changes by simply changing our style sheet and thereby focus on our HTML structure. The result was a search-engine-friendly web page that was visually appealing.
This “Part 2” installment will introduce CSS class selectors. Remember that in our last tutorial, we wanted to apply styles to HTML tags directly, and in our example, we used these tags to structure our information: h1, h2, ul, and p.
We then applied styles to those tags to format the page and create rollover links to add interactivity. You may have noticed that every time you made a h1 tag, for example, it was formatted based on the styles we declared for h1 tags. This is not the ideal situation since there may be a time when we want to use more than one h1 tag, but we don’t want them to look the same. Or perhaps we want our links to be red and underlined in one section but gray with no underline in another. We need another way of declaring styles to pull this off.
Luckily, we aren’t the first to run into this problem. CSS has another type of selector called a class selector. Class selectors differ from tag selectors because they can be applied to nearly any HTML tag. By creating a style class in our CSS style sheet, we can apply that class to any number of HTML tags. Why is this powerful? It allows us to declare styles and apply them anywhere we need while keeping the ability to change them at any time by simply changing our style sheet.
For example, what if we wanted to show red and italic text on our web page in many places? We could put an HTML font tag around each instance of our red italic text. However, that would require a lot of extra code, and it would also mean that to change the color to blue, we would need to go into each page and edit each instance of that font tag. This is not a very efficient way to manage a website. Alternatively, we could assign a CSS class that makes the text red and italic and simply apply the style where we want it.
This tutorial will illustrate how to define and apply CSS classes to HTML tags. First, we will declare styles for h1 tags and examine how we use different formatting to multiple instances of an HTML tag. Once we have declared our styles, we will apply them to the HTML tags we want. Finally, we will apply rollover links to different web page sections, giving our users more advanced interactivity.
Instruction
At the end of our last tutorial, we created a simple HTML page structured around the importance of the information we wanted to convey. Then, using CSS tag selectors, we could go back and format our page to make it more appealing to our users. We introduced the idea that there are two distinct parts to a web page — the information or data that makes up the page’s content and the formatting of that page. While this is still a foreign concept to many designers, it is essential to create a website that will be search engine friendly and provide a quality user experience for your visitors.
However, as discussed above, using tag selectors like in our last tutorial has limitations. Tag selectors are a fantastic way to format all instances of a certain HTML tag on a page. But what happens when we want different instances of the same HTML tag to appear different? For example, if we use h1 tags to put importance on different section titles of our page, how do we make each look different? Consider the following HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" /> <html> <head> <title>CSS Classes Example 1</title> <meta http-equiv="Content-Type" content="text/html" charset=iso-8859-1" /> </head> <body> <h1>About Our Company</h1> <p>Our company is the world leader in whatever it is that we do. Our talented staff brings years of experience and proven results in whatever industry it is that we are in.</p> <h1>Privacy Policy</h1> <p>We respect your privacy and will not release your name, address, email, or any other personal information that is submitted to our website to any third party.</p> <h1>Conditions of Use</h1> <p>By using this website you agree to the following conditions of use. You will not participate in any illegal or unethical activities while using this website.</p> </body> </html>
While this is an excellent structure for search engines, it does not provide an engaging user experience for the website visitor. For this example, we want the paragraph about our company to stand out more while making the privacy information and conditions of use not quite as noticeable. Remember that if we used a tag selector to apply a style to our h1 tags, it would apply to all instances of that tag, and we would not accomplish our goal. Instead, we will use class selectors and apply those classes to the HTML tags we want to format.
First, remember to add the link to your external style sheet, as we did in the last tutorial. Once again, we will use a file called “stylesheet.css” as our style sheet, which should be in the same directory (folder) as the HTML file we are working with. Add this line to the HEAD section of the HTML document to link our style sheet:
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
We can now open our style sheet in a text editor and assign styles. First, we need to learn how to create classes. In our last tutorial, we declared a style for an HTML tag by simply putting the name of the tag as our style selector, such as the style declared below;
h1 { font-size: 16px; font-weight: bold; }
However, declaring a style class has a bit different syntax. In CSS, we define a class by putting a period (.) before our style declaration. This differentiates it as a class selector, telling the browser to apply this style to any HTML tag with this class assigned to it. Let’s cover creating class declarations first and how to apply styles to HTML later. So, let’s create a class that will give us a red underline for our “About Us” title.
.title { border-bottom: 1px solid #FF0000; }
Notice that I called our class “title” so I can easily remember what it is for later. By looking at the style declaration, you can see that I have added an underline to the text and changed the color to red. I also want to declare another style for the other <h1> tags we want to play down. In the case of these, I want them to be smaller text that is bold. We also want the size of the text in the paragraphs under these titles to be smaller and, therefore, draw less attention from the user. To do this, we will need to create two different classes.
.subtitle { font-size: 12px; font-weight: bold; } .subtext { font-size: 10px; }
Now that we have declared the styles and attached the stylesheet, you may have noticed that nothing seems to change when you view the HTML page in a browser. Contrary to the tag selector, class selectors will only apply to certain HTML elements, which requires that we go back into our HTML document and tell it which elements to apply to. So open up our HTML document again, and it should look like this by now:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" /> <html> <head> <title>CSS Classes Example 1</title> <meta http-equiv="Content-Type"; content="text/html" charset=iso-8859-1" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>About Our Company</h1> <p>Our company is the world leader in whatever it is that we do. Our talented staff brings years of experience and proven results in whatever industry it is that we are in.</p> <h1>Privacy Policy</h1> <p>We respect your privacy and will not release your name, address, email, or any other personal information that is submitted to our website to any third party.</p> <h1>Conditions of Use</h1> <p>By using this website you agree to the following conditions of use. You will not participate in any illegal or unethical activities while using this website.</p> </body> </html>
Remember that we want to apply our first class, called “title,” to the <h1> tag that encompasses the “About Us” title. To do that, we need to assign the title class to that <h1> tag. Doing this is very simple, and our <h1> tag becomes the following:
<h1 class=”title”>About Our Company</h1>
Notice that we simply added a class attribute to the tag and assigned it “title.” Remember that we do not include the period needed in the CSS document when assigning classes to tags. This is because that period (.title) is only used in our CSS style sheet to show that we are declaring a class selector with the name “title.” When assigning a class attribute, we only need to include the class title as the attribute value since the attribute name differentiates it as a class. This may seem complicated, but it will become clearer as we mix and match different selectors in future tutorials.
If you were to view our HTML document in a browser now, you will see that the styles we assigned to the title class are now being applied to our “About Us” title. Let’s assign our other classes to the other sections. Since we want both our “Privacy Policy” and “Conditions of Use” titles to be less noticeable, we will assign the class “subtitle” to each of the titles, and the class “subtext” to each paragraph below the titles:
<h1 class=”subtitle”>Privacy Policy</h1> <p class=”subtext”>We respect your privacy and will not release your name, address, email, or any other personal information that is submitted to our website to any third party.</p> <h1 class=”subtitle”>Conditions of Use</h1> <p class=”subtext”>By using this website you agree to the following conditions of use. You will not participate in any illegal or unethical activities while using this website.</p>
We have just outlined one of the most powerful uses for CSS classes: we can apply our classes to as many or as few tags as we want. Since the style will only be applied to the tags we have assigned, this gives us a whole new set of tools for formatting our web pages. If you view our HTML file in a browser now, you will see that the sections we just applied styles to appear to be subverted and do not draw as much attention from the user as our first sections do. Once again, we have used CSS to format the appearance of our web page without compromising the structure of the information contained in our page.
Our next challenge is to spice up our page using interactive links. If you look back to our previous tutorial, we did this using the following tag selectors:
a:link, a:visited { color: #FF0000; text-decoration: none; } a:hover { color: #666666; text-decoration: underline; }
Notice that this style will apply to all <a> tags on the page, and the special syntax differentiates between when a link has been visited (:visited), when a user has their mouse over the link :hover, and when neither is true (:link). However, we want to create different link behaviors for different areas of our web page, which can be accomplished by using CSS classes. Take a look at the final HTML for this tutorial and notice that I have added links in each paragraph;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > <html> <head> <title>CSS Classes Example 1</title> <meta http-equiv="Content-Type"; content="text/html" charset=iso-8859-1" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <h1 class=”title”>About Our Company</h1> <p>Our company is the world leader in whatever it is that we do. Our talented staff brings years of <a href="experience.html">experience</a> and proven results in whatever industry it is that we are in.</p> <h1 class=”subtitle”>Privacy Policy</h1> <p>We respect your <a href="privacy.html">privacy</a> and will not release your name, address, email, or any other personal information that is submitted to our website to any third party.</p> <h1 class=”subtitle”>Conditions of Use</h1> <p>By using this website you agree to the following conditions of use. You will not participate in any <a href=”activities.html”>illegal or unethical activities</a> while using this website.</p> </body> </html>
Preview this file in a browser, and you will see a link in each of the paragraphs, although they all show up blue with an underline beneath them, which is the default link appearance in most browsers. Our goal is to change the way that these links look. First, since our first paragraph has no style applied to it, let’s add our rollover link styles from the last tutorial to our style sheet:
a:link, a:visited { color: #FF0000; ext-decoration: none; } a:hover { olor: #666666; text-decoration: underline; }
Preview the file in a browser again, and you will notice that every link is now red and turns to gray and underlined when the mouse is over it. This is great so far, but we want to go further and make the links in our styled paragraphs gray with a red rollover effect. Again, since we want to subvert these paragraphs so that the user focuses on the first paragraph (and the links in it), it is a good idea to play down the links in these paragraphs so that they are not drawing the user’s eye. So let’s declare another couple of styles in our stylesheet to make this happen:
.subtext a:link, .subtext a:visited { color: #666666; text-decoration: none; } .subtext a:hover { color: #FF0000; text-decoration: none; }
Notice the way that we declared these styles. We started with the class name (.subtext) of the paragraph in which these links appear. Next, we put in a tag selector like in the previous tutorial. Be sure to note in the first declaration that we include the class name again after the comma since we are declaring styles for two elements (the a:link element and the a:visited element). Essentially we are telling the browser to apply this style to every instance of a <a> tag inside the subtext class. While this may seem confusing initially, it is an important concept in CSS since it allows us to declare formatting rules for certain web page sections.
Preview our HTML file again; you will see that we now have red links in the first paragraph and gray links in the bottom two paragraphs. We have successfully managed to format another web page without compromising the structure of the information in it. Using the class attribute for HTML tags, we can choose which elements we want to style, even if they differ. Since our formatting was once again done in an external style sheet, we can change the formatting of all pages linked to this style sheet by simply changing our style declarations.
In our “Part 3” installment, we will look at the CSS id selector and how we can use it to apply to HTML tags based on their id attribute rather than a “class” attribute. Usually assigned to only one element on each page, we will use CSS id selectors to illustrate more advanced layout options using CSS.