Practical Ecommerce

An Introduction to CSS – Part 2

Overview

In our last Cascading Style Sheets (“CSS”) tutorial we learned how to apply CSS styles to HTML tags using tag selectors. Using these tag selectors we were able to format information using an external style sheet rather than putting all the formatting code into our HTML document. In addition to giving us the ability to make changes to multiple pages by simply changing our style sheet, using CSS also allowed us to concentrate more on the structure of our HTML code. The end result was a web page that was search engine friendly and also looked appealing to our users.

Continuing with our introduction to CSS, this tutorial will introduce CSS class selectors and how they are used. Remember that in our last tutorial we wanted to apply styles to HTML tags directly, and in our example we used the h1, h2, ul, and p tags to structure our information. We then applied styles to those tags to format the page, as well as creating some rollover links to add interactivity. If you did any experimenting with our last lesson, you may have noticed that every time you created an h1 tag, for example, it was formatted based on the styles we declared for h1 tags. This is not the most 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 exactly the same. Or perhaps we want our links to be red and underlined in one section of our page, but gray with no underline in another section. Obviously, we need another way of declaring styles in order to pull this off.

Luckily enough, we aren’t the first people to run into this problem and there is a solution. CSS has another type of selector called a class selector. Class selectors are different from tag selectors in that 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 text on our web page that is red and italic in many different places. We could go through and 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 in order 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.

In this tutorial we will illustrate how to define CSS classes and apply them to HTML tags. First we will declare styles for h1 tags and look at how we apply different formatting to multiple instances of an HTML tag. Once we have declared our styles, we will apply them to the HTML tags that we want. Finally, we will look at how to apply rollover links to different sections of a web page, giving our users more advanced interactivity.

Instruction

At the end of our last tutorial, we had created a simple HTML page that was structured around the importance of the information that we wanted to convey. Then using CSS tag selectors we were able to 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 content of the page, and the formatting of that page. While this is still a foreign concept to many designers, it is an important realization with respect to creating a website that will be search engine friendly and also provide a quality user experience for your visitors.

However, as we touched on above, using tag selectors like we did 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 are using h1 tags to put importance on different section titles of our page, how do we make them each look different? Consider the following HTML page:

<code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" /&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;CSS Classes Example 1&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html" charset=iso-8859-1" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;About Our Company&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h1&gt;Privacy Policy&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h1&gt;Conditions of Use&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

While this is great structure with regards to the search engines, it does not provide an engaging user experience for the website visitor. For this example, we want the paragraph that is about our company to stand out more, while making the privacy information and conditions of use not quite as noticeable. Remember that if we were to use 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 are going to use class selectors, and apply those classes to the HTML tags that 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 are going to 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:

<code>&lt;link href="stylesheet.css" rel="stylesheet" type="text/css" /&gt;
</code>

We can now open up our style sheet in a text editor and begin assigning 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;

<code>h1 { font-size: 16px; font-weight: bold; }
</code>

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 cover 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;

<code>.title { border-bottom: 1px solid #FF0000; }
</code>

Notice that I called our class “title” so that I can easily remember what it is for later on. 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 that 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. In order to do this we will need to create two different classes.

<code>.subtitle { font-size: 12px; font-weight: bold; }
.subtext { font-size: 10px; }
</code>

Now that we have declared the styles and attached the stylesheet, you may have noticed that nothing seems to be changing 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:

<code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" /&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;CSS Classes Example 1&lt;/title&gt;
&lt;meta http-equiv="Content-Type"; content="text/html" charset=iso-8859-1" /&gt;
&lt;link href="stylesheet.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;About Our Company&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h1&gt;Privacy Policy&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h1&gt;Conditions of Use&lt;/h1&gt;  
&lt;p&gt;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.&lt;/p&gt;  
&lt;/body&gt;  
&lt;/html&gt;
</code>

Remember that we want to apply our first class called title to the <h1> tag that encompasses the “About Us” title. In order 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:

<code>&lt;h1 class=”title”&gt;About Our Company&lt;/h1&gt;
</code>

Notice that we simply added a class attribute to the tag, and assigned it the name title. Keep in mind that when assigning classes to tags, we do not include the period that was needed in the CSS document. 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 of title. When assigning a class attribute, we only need to include the title of the class as the attribute value, since the attribute name differentiates it as a class. This may seem a little complicated, but it will become much more clearly in future tutorials as we begin to mix and match different selectors.

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 get in there an 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:

<code>&lt;h1 class=”subtitle”&gt;Privacy Policy&lt;/h1&gt;
&lt;p class=”subtext”&gt;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.&lt;/p&gt;
&lt;h1 class=”subtitle”&gt;Conditions of Use&lt;/h1&gt;
&lt;p class=”subtext”&gt;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.&lt;/p&gt;
</code>

We have just outlined one of the most powerful uses for CSS classes, and that is that 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 that we have assigned it to, 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 does. 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:

<code>a:link, a:visited { color: #FF0000; text-decoration: none; }

a:hover { color: #666666; text-decoration: underline; }
</code>

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;

<code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" &gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;CSS Classes Example 1&lt;/title&gt;
&lt;meta http-equiv="Content-Type"; content="text/html" charset=iso-8859-1" /&gt;
&lt;link href="stylesheet.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1 class=”title”&gt;About Our Company&lt;/h1&gt;
&lt;p&gt;Our company is the world leader in whatever it is that we do. Our talented staff brings years of &lt;a href="experience.html"&gt;experience&lt;/a&gt; and proven results in whatever industry it is that we are in.&lt;/p&gt;
&lt;h1 class=”subtitle”&gt;Privacy Policy&lt;/h1&gt;
&lt;p&gt;We respect your &lt;a href="privacy.html"&gt;privacy&lt;/a&gt; and will not release your name, address, email, or any other personal information that is submitted to our website to any third party.&lt;/p&gt;
&lt;h1 class=”subtitle”&gt;Conditions of Use&lt;/h1&gt;  
&lt;p&gt;By using this website you agree to the following conditions of use. You will not participate in any &lt;a href=”activities.html”&gt;illegal or unethical activities&lt;/a&gt; while using this website.&lt;/p&gt;  
&lt;/body&gt;  
&lt;/html&gt;
</code>

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 appearance for links 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:

<code>a:link, a:visited { color: #FF0000; ext-decoration: none; }

a:hover { olor: #666666; text-decoration: underline; }
</code>

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 a step 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 they user focuses on the first paragraph (and the links in it) it is a good idea for us 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:

<code>.subtext a:link, .subtext a:visited { color: #666666; text-decoration: none; }

.subtext a:hover { color: #FF0000; text-decoration: none; }
</code>

Notice the way that we declared these styles. We started with the class name (.subtext) of the paragraph that these links appear in. Next we put in a tag selector, just like we did 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 an <a> tag that is inside the subtext class. While this may seem confusing at first, it is an important concept in CSS, since it gives us the ability to declare formatting rules for certain sections of our web page.

Preview our HTML file again and 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 are able to pick and choose which elements we want to style, even if they are different. Since our formatting was once again done in an external style sheet, we retain the ability to change the formatting of all pages linked to this style sheet by simply changing our style declarations.

In our next tutorial we will look at the CSS id selector, and how we can use it to apply styles 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 begin illustrating more advanced layout options using CSS.

If you have any questions, comments, or feedback about this tutorial please visit our contact form.

Brian Getting

Brian Getting

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

  1. Legacy User November 16, 2007 Reply

    GREAT CSS tutorial! How about including links to the last and next sections so we can find them easily. I picked up your site from a Google search, what
    I really need is in the previous tutorial. Many thanks again!

    — *Happy1*