An Introduction to CSS: Part 1

Building HTML pages that are both search engine friendly and appealing to 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.

Implementing Cascading Style Sheets (CSS) has changed this, allowing designers to create HTML that is structured in a search-engine-friendly way and appealing to users.

Cascading Style Sheets allows designers to create HTML that is structured in a search-engine-friendly way and appealing to users.

Formatting a web page with HTML means using 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.

It also means that changing the appearance of a website involves edits to each page, which can take hours. By formatting a page using CSS, we can concentrate on structuring our HTML code around our content.

This, in turn, 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 the CSS.

This tutorial will be the first in a series that will introduce Cascading Style Sheets in the context of search engine optimization. This first lesson will address building an HTML page structured around the content and what we want search engines to see.

Rather than relying on tables, images, font tags, and other HTML, we will focus on the content of our page and how it is presented. We will then learn how to write a CSS document and link it to our HTML pages. We will also learn how to create CSS styles. In the example, we will use CSS to change the appearance of our headers, paragraphs, and links.

Instruction

The first thing to consider before creating a web page is our content. We will create a product page to show a widget for sale, displaying 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 product title is the most important information, we will want to include that as a header by enclosing it in <h1> tags. The product’s price will need to appear in a different color, which 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 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 the paragraph tags, we ensure 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:

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

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.

Next, let’s look at how to write the CSS.

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 “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:

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

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 an Arial font style. 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 potent tool to have when your website has a lot of pages. Let’s move on to formatting our other elements.

We will want to make our product title in the <h1> tags a little 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:

h1 { font-size: 16px; font-weight: bold; }

The same applies to 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 and also make it red. Here is the declaration that we have prepared for that:

h2 { font-size: 12px; color: #FF0000; }

Next, we 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:

li { font-size: 10px; font-style: italic; }

As you can see, applying CSS styles to HTML tags is quite simple. We have successfully created style declarations to format our headers and list items. The only other style 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. To do this, we must apply a style to the <a> tag that creates the link in HTML and also makes use of a CSS style called hover. Look at the two style declarations that we will make for links:

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

a:hover { color: #666666; text-decoration: underline; }

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 clicked and the mouse is not over it. Hover is how the link is displayed when the mouse is over it.

What we have done above is create 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 tell the browser to display the link in red, with no underline.

Our second declaration, which will apply to the hover state of our links, instructs the browser to make the link gray with an underline. This will add a small amount of interactivity to our pages, improving the user experience.

We have created our stylesheet, but you may have noticed that none of the styles appear in our HTML document. Thus our last step is to link our style sheet to our HTML document.

While you can declare styles inside an HTML page, that does not allow us to change the format of multiple pages. It also adds code to each page, which 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:

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

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:

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

View the file in a web browser to see that our styles are applied to headers and the features list. The link on the page appears in red. Roll the mouse over the link, and it will change color and show an underline.