An Introduction to CSS

Overview

Building HTML pages that are both search engine friendly and appealing to your users is crucial to the success of an online business. In the past, there was a give-and-take relationship between the structure and the formatting of websites. The more appealing the site was to the user, the less appealing it was to the search engines, and vice versa. The implementation of Cascading Style Sheets (CSS) has changed this paradigm, allowing designers to create HTML code that is structured in a search engine friendly way that can also be displayed in a manner that is appealing to users.

Formatting a web page with HTML means the use of tables, font tags, and other redundant code that can build up fast. More code means longer download times, and a lower ratio of content to code on a page. In addition, it means that in order to change the appearance of your website someone must edit each page individually, which can take hours, which costs you time and money. By formatting a web page using CSS, we can concentrate on structuring our HTML code around our content. Since search engines are changing to put more emphasis on content, this allows us to concentrate on search engine placement and content quality. Formatting the web page will come later by applying CSS styles to our optimized HTML code. Changing our website design can become as simple as changing our CSS code. An impressive illustration of this can be seen at cssZenGarden.com, where different designers submit various CSS formatting approaches to the same HTML code.

This tutorial will be the first in a series of tutorials at Practical eCommerce that will introduce Cascading Style Sheets (CSS) in the context of search engine optimization. In this first lesson we will build an HTML page structured around the content on that page and what we want search engines to see. Rather than relying on tables, images, font tags and other HTML formatting code, we will focus on the content of our page and how it is presented. We will then learn how to write a CSS document, learn how to link that CSS document to our HTML pages, and learn how to create CSS styles. In our example we will use CSS to change the appearance of our headers, paragraphs, and links.

Let’s get started on this first in a series of Cascading Style Sheets tutorials aimed at creating better looking, more effective web pages.

Instruction

The first thing that we need to consider before creating a webpage is what our content is going to be. For our example, we will be creating a product page to show a widget that we are selling on our website. We will want the webpage to display the following information:

Extra Large Widget (Price: $34.99)

• Durable plastic design.
• Fits most applications.
• Guaranteed satisfaction.

Our extra large widgets are some of the best widgets in the world. Made in the USA, these widgets outlast all other widgets available, and are backed by our 100% satisfaction guarantee. The durable plastic design makes these lightweight widgets ideal for your next project.

Our next goal is to create an HTML document. Since the title of the product is the most important information, we will want to include that as a header by enclosing it in <h1> tags. The price of the product will need to appear in a different color, and is also important, so we will enclose the price in another header tag, the <h2> tags. Our list of product features is an unordered list, meaning that we will use the <ul> and <li> tags to display a list of items with bullets in front of them. Finally, our product description will be a paragraph, so we will enclose it in <p> tags. This is our first step into search engine optimization, as the text contained in header tags is given more importance than the text in paragraph tags. By including our keywords in the title, the header tags, and also in the paragraph tags, we are ensuring that our page relevance is ranked well by search engines. Take a look at the following HTML code that we are working with so far:

<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;Extra Large Widget&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;Extra Large Widget&lt;/h1&gt;
&lt;h2&gt;Price: $34.99&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Durable plastic design.&lt;li&gt;
&lt;li&gt;Fits most applications.&lt;/li&gt;
&lt;li&gt;Guaranteed satisfaction.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Our extra large widgets are some of the best widgets in the world.   Made in the USA, these widgets outlast all other widgets available, and are backed by our &lt;a href="guarantee.html"&gt;100% satisfaction guarantee&lt;/a&gt;.  The durable plastic design makes these lightweight widgets ideal for your next project.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

If you view this code in a browser, the result is not very appealing. As you can see, I have also added a link to information about our guarantee. Along with the other information on this page, we will be changing the appearance of this link. Now that we have our code structured, let’s take a look at how to write a CSS style sheet.

First we will create a new text file called stylesheet.css. Save this file in the same folder as our HTML file above, and open it in a text editor. CSS uses what are called selectors to determine which HTML elements to apply the styles to. Elements can be selected based on the HTML tag, a class (which can be applied to any HTML tag), or by id selectors (which apply to elements of a certain id). While we will learn about classes and id selectors in the future, our tutorial today will focus solely on applying styles to HTML tags using tag selectors. Consider the following style declaration:

<code>body { font: 11px/1.2em Arial, Helvetica, sans-serif; color: #000000; }
</code>

This is the syntax for declaring CSS styles, which you can learn more about from the resources available by the W3C. Notice the tag selector, body, which tells the browser to apply this style to everything inside the <body> tags. In this instance, we have assigned a font size of 11 pixels, a line spacing of 1.2 em, and a font style of Arial. If Arial is not available to the user, then Helvetica will be used, and if that is not available the browser is told to use a sans-serif font. With this one style declaration we can change all the fonts on the entire page in one step. This is a very powerful tool to have when your website has a lot of pages on it. Let’s move on to formatting our other elements.

We will want to make our product title contained in the <h1> tags a little bit smaller, as most browsers will display header content as larger and bold. We will retain the bold but make the text only 16 pixels tall by using the following style declaration:

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

The same applies for our product price, which is enclosed in <h2> tags. By creating a style declaration for <h2> tags we can make the price appear a bit smaller than the default header tags size, and also make it red. Here is the declaration that we have prepared for that:

<code>h2 { font-size: 12px; color: #FF0000; }
</code>

Next we will want to display our product features in a smaller, italic font. Since they are contained in an HTML list, we simply need to create a style declaration that will apply to our HTML <li> tags:

<code>li { font-size: 10px; font-style: italic; }
</code>

As you can see, applying CSS styles to HTML tags is really quite simple. We have successfully created style declarations that will format our headers and our list items. The only other style that we need to apply will make our links appear different than the default blue color with an underline. We want to make our links appear red, with no underline. However, when the user puts the mouse on the link, we want it to turn gray and display an underline. In order to do this, we must apply a style to the <a> tag that creates the link in HTML, and also make use of a CSS style know as hover. Take a look at the two style declarations that we will make for links:

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

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

As you can see, these style declarations are a bit different than the others. Links have three states: normal, visited, and hover. Normal is how the link is displayed when the mouse is not over the link and it has not been visited. Visited is how the link is displayed when it has been clicked and the mouse is not over it. Hover is how the link is displayed when the mouse is over it. So what we have done above is to create first a style declaration that applies to both the normal (using the link style) and the visited (using the visited style). Notice the colon after the tag selector to denote which state we want to choose. In our first declaration, we are telling the browser to display the link in red, with no underline. Our second declaration, which will apply to the hover state of our links, we have told the browser to make the link gray with an underline. This will add a small amount of interactivity to our pages, making the user experience a little better.

Well, we have now created our stylesheet, but you may have noticed that none of the styles are actually appearing in our HTML document. Our last step is to link our style sheet to our HTML document, so that the styles will be applied. While you can declare styles inside an HTML page, that does not allow us to change the format of multiple pages and also adds to the amount of code in each page, so it is not recommended. The CSS page that we created (stylesheet.css) can be linked to our HTML document by placing the following code in the head section of our HTML:

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

This tells the browser to ask for the file called “stylesheet.css” in the same directory as the HTML document, and apply the styles within it. Now the head section of our HTML document looks like this:

<code>&lt;head&gt;
&lt;title&gt;Extra Large Widget&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;
</code>

View the file in a web browser and you will see that our styles are applied to our headers, our features list, and the link on the page appears red. Roll the mouse over the link and it will change color and show an underline. While this is a simple example, we have covered some very important points. The first is to structure your HTML code around your content, not to try and fit your content into a design. Next, by putting our CSS style declarations in an external file (stylesheet.css) and linking it to our HTML page, we have created a method of changing the formatting of as many HTML pages as we want, simply by changing the CSS file that they are linked to.

In our next tutorial, we will take a look at CSS class selectors to add to the amount of formatting that we can do to our HTML. CSS classes can be applied to nearly any HTML element, and allow us to format the same element in different ways, such as showing two paragraphs, but one in italics and the other in colored text.

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