Practical Ecommerce

An Introduction to CSS – Part 3

Overview

In our last two tutorials about Cascading Style Sheets, we covered how to apply styles to all instances of an HTML tag, and also how to create style classes and then selectively apply styles to only certain HTML tags. For the most part, our styles were limited to font treatments, such as the color and size of text, as well as defining link colors and subsequent rollover behaviors. In this tutorial we will introduce the idea of using CSS to format a webpage by using ID selectors. By using some of the techniques from our previous tutorials we will create an entire webpage formatted using only CSS.

Formatting with CSS allows web developers to create more search engine friendly HTML code, as well as control the placement of keywords and important content in the code. For example, many websites feature complicated navigation composed entirely of images, often times with JavaScript rollover effects. The HTML code behind such design elements is often bulky, and in the eyes of a search engine is not the easiest to read. Using CSS we can replace bulky image tags and JavaScript calls with simple HTML links, and rely on CSS to do the visual work. This allows us to provide code that search engines really like without compromising the visual appeal of our website.

In this tutorial our aim is to replace tables in our design. We will start by identifying the information that we want to present and structuring it in a way that is appealing to search engines. By doing this we ensure that our page is optimized to a search engine, and that we have included all the information that we want to include in our site. Once we have our information structured, we will look at formatting it and presenting it to our users.

The webpage that we will build in this tutorial will be relatively simple, consisting of a header, navigation bar, content area, and footer. Often times a designer would place a table into their page to create these areas, using another table each time they need to format information vertically or horizontally. We will use ID selectors to create formatted regions on our webpage, replacing the need for tables. We will also touch on what are called contextual selectors, which allow you to apply styles to specific tags within identified regions, as an introduction to next month’s tutorial, which will cover them in depth.

We are going to create a simple webpage layout for demonstration purposes, however the techniques used in this tutorial can be expanded and applied to create extremely intricate designs with a minimum of code. Examples of such techniques can be seen at CSS Zen Garden, a website dedicated to showcasing impressive CSS design techniques.

Instruction

The first order of business when creating any website is to understand the content in advance. Without understanding what information will be contained in a web page, it is extremely difficult to envision an overall strategy to make sure that the site is appealing to both search engines and visitors. In our example here, we will be creating a simple web page that consists of a header, a vertical navigation bar, an area for our content, and a footer. Take a look at the page that we want to build below:

<code>&lt;img src="/images/article_images/sample_site.jpg" alt="Sample Site" /&gt;
</code>

We will first start with our HTML, since we want to ensure that the code for our web page is search engine friendly. Once we have finished that, we will look at formatting our page using CSS. To start, we want to make our header. In the body section of our HTML document, we begin by placing our web page title inside a <div> element. I have also put the title inside <h1> tags to indicate its importance. Take a look at the following code:

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /&gt;
&lt;title&gt;Our Example Website&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;h1&gt;Our Example Website&lt;/h1&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

As you can see, we are putting everything that we will want in our header to be inside this <div> element, which we will use later to format the header. Continuing on to our navigation, we want to insert all of these links inside yet another <div> element, which will serve as our vertical menu:

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /&gt;
&lt;title&gt;Our Example Website&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;h1&gt;Our Example Website&lt;/h1&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;a href="about.html"&gt;About Us&lt;/a&gt;
&lt;a href="products.html"&gt;Products&lt;/a&gt;
&lt;a href="downloads.html"&gt;Downloads&lt;/a&gt;
&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

Notice that our links are very clean, and easy for a search engine to navigate. Now that we have done that, we will create our content area using another <div> element. I have placed some dummy text in to represent our content:

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /&gt;
&lt;title&gt;Our Example Website&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;h1&gt;Our Example Website&lt;/h1&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;a href="about.html"&gt;About Us&lt;/a&gt;
&lt;a href="products.html"&gt;Products&lt;/a&gt;
&lt;a href="downloads.html"&gt;Downloads&lt;/a&gt;
&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam scelerisque, leo a pharetra pretium, eros ligula dapibus felis, eget convallis tortor lectus at sem. Quisque quis odio. Etiam nec pede. Etiam vitae metus in augue scelerisque molestie. In non lacus. Proin ultricies, diam id hendrerit semper, nulla ipsum fermentum leo, nec vulputate nibh lorem id mi. Nulla congue pretium nibh. Vestibulum ultrices neque at mauris. In hac habitasse platea dictumst. Fusce interdum, massa eu gravida pulvinar, tortor metus sollicitudin massa, vitae lacinia enim lacus consectetuer augue. Quisque at ante. Sed justo odio, congue eu, congue non, accumsan et, nisl. Mauris non enim. Praesent aliquet. Sed scelerisque, nisl eu lobortis suscipit, mi sapien tempus mi, sed fermentum neque massa in metus.&lt;/p&gt;
&lt;p&gt;Curabitur et tortor ac diam tristique feugiat. Duis euismod semper dolor. Sed sapien erat, rutrum et, viverra bibendum, dictum quis, nulla. Morbi nunc nulla, adipiscing at, gravida vitae, ultricies vitae, eros. Nunc feugiat, sem ut congue ultrices, justo libero dignissim felis, nec hendrerit sem erat vitae quam. Curabitur eu purus. Suspendisse sit amet purus. Nulla facilisi. Fusce fringilla interdum leo. Nullam nibh nisi, porta et, feugiat eget, porta sed, sapien.&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

Again we have used our <div> tag to create a region that will be our content. Finally, we do the same thing for our footer region. In addition to that, I am placing another <div> tag around all of our content (just inside each <body> tag), which we will use later to define the layout of the page. Take a look at the final HTML code:

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /&gt;
&lt;title&gt;Our Example Website&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;div&gt;
&lt;h1&gt;Our Example Website&lt;/h1&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;a href="about.html"&gt;About Us&lt;/a&gt;
&lt;a href="products.html"&gt;Products&lt;/a&gt;
&lt;a href="downloads.html"&gt;Downloads&lt;/a&gt;
&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam scelerisque, leo a pharetra pretium, eros ligula dapibus felis, eget convallis tortor lectus at sem. Quisque quis odio. Etiam nec pede. Etiam vitae metus in augue scelerisque molestie. In non lacus. Proin ultricies, diam id hendrerit semper, nulla ipsum fermentum leo, nec vulputate nibh lorem id mi. Nulla congue pretium nibh. Vestibulum ultrices neque at mauris. In hac habitasse platea dictumst. Fusce interdum, massa eu gravida pulvinar, tortor metus sollicitudin massa, vitae lacinia enim lacus consectetuer augue. Quisque at ante. Sed justo odio, congue eu, congue non, accumsan et, nisl. Mauris non enim. Praesent aliquet. Sed scelerisque, nisl eu lobortis suscipit, mi sapien tempus mi, sed fermentum neque massa in metus.&lt;/p&gt;
&lt;p&gt;Curabitur et tortor ac diam tristique feugiat. Duis euismod semper dolor. Sed sapien erat, rutrum et, viverra bibendum, dictum quis, nulla. Morbi nunc nulla, adipiscing at, gravida vitae, ultricies vitae, eros. Nunc feugiat, sem ut congue ultrices, justo libero dignissim felis, nec hendrerit sem erat vitae quam. Curabitur eu purus. Suspendisse sit amet purus. Nulla facilisi. Fusce fringilla interdum leo. Nullam nibh nisi, porta et, feugiat eget, porta sed, sapien.&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;Copyright &amp;copy; 2006 Practical eCommerce Magazine&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

The main thing to notice is that there is no extra code in there that is used for formatting. To achieve the same result that we will get using tables in our HTML, we would have had a whole bunch of extra code that search engines would have to get through to read our content. However, preview this page in a browser at this point, and you will see that it is not very appealing to our visitors.

We need to use some CSS to format things a bit. First we need to create a new style sheet (I am calling mine styles.css) and link it to our HTML page. Place the following code into the header of our HTML document:

<code>&lt;link rel="stylesheet" type="text/css" media="screen, projection" href="styles.css" /&gt;
</code>

This will link to our stylesheet in browsers that understand CSS styles. Those that do not will ignore this piece of code altogether, and the site will appear as it does above. We can now begin to add ID attributes to our <div> tags, which will allow us to style them each individually using CSS. For example, our header area <div> tag will be given an id of header. Take a look at the code from the body section of our document after assigning id attributes to each <div> tag:

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /&gt;
&lt;title&gt;Our Example Website&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="wrapper"&gt;
&lt;div id="header"&gt;
&lt;h1&gt;Our Example Website&lt;/h1&gt;
&lt;/div&gt;
&lt;div id="nav"&gt;
&lt;a href="about.html"&gt;About Us&lt;/a&gt;
&lt;a href="products.html"&gt;Products&lt;/a&gt;
&lt;a href="downloads.html"&gt;Downloads&lt;/a&gt;
&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;
&lt;/div&gt;
&lt;div id="content"&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam scelerisque, leo a pharetra pretium, eros ligula dapibus felis, eget convallis tortor lectus at sem. Quisque quis odio. Etiam nec pede. Etiam vitae metus in augue scelerisque molestie. In non lacus. Proin ultricies, diam id hendrerit semper, nulla ipsum fermentum leo, nec vulputate nibh lorem id mi. Nulla congue pretium nibh. Vestibulum ultrices neque at mauris. In hac habitasse platea dictumst. Fusce interdum, massa eu gravida pulvinar, tortor metus sollicitudin massa, vitae lacinia enim lacus consectetuer augue. Quisque at ante. Sed justo odio, congue eu, congue non, accumsan et, nisl. Mauris non enim. Praesent aliquet. Sed scelerisque, nisl eu lobortis suscipit, mi sapien tempus mi, sed fermentum neque massa in metus.&lt;/p&gt;
&lt;p&gt;Curabitur et tortor ac diam tristique feugiat. Duis euismod semper dolor. Sed sapien erat, rutrum et, viverra bibendum, dictum quis, nulla. Morbi nunc nulla, adipiscing at, gravida vitae, ultricies vitae, eros. Nunc feugiat, sem ut congue ultrices, justo libero dignissim felis, nec hendrerit sem erat vitae quam. Curabitur eu purus. Suspendisse sit amet purus. Nulla facilisi. Fusce fringilla interdum leo. Nullam nibh nisi, porta et, feugiat eget, porta sed, sapien.&lt;/p&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;
&lt;p&gt;Copyright &amp;copy; 2006 Practical eCommerce Magazine&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

As you can see, I have created a <div> section called wrapper that contains everything on the page. Inside of that are <div> sections called header, nav, content, and footer. Each of these will become an area of our web page.

Let’s start to declare styles for each of our sections, starting by formatting all the body content on our page. We want to set our font size, color, and margins for the entire page, so we use the following CSS declaration:

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

Now we are ready to format our <div> tags using ID selectors. Each ID selector begins with a # symbol before it’s name, similar to the period before class selectors. Our first step is to format the wrapper section, which contains the rest of our content. We want our page to be 770 pixels wide, with a slight margin on the left so that it does not push up on the edge of our browser. I am also going to put a border around three sides (excluding the top) so that we have a container for our page. The following CSS declaration will apply these styles to our wrapper section:

<code>#wrapper {
margin: 0px 0px 0px 10px;
padding: 0px;
width: 770px;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #666666;
}
</code>

If you preview the page now, you will see that all of our content is surrounded by a gray border (except the top), and that the content is limited to 770 pixels in width. This is a good start. Since all of the rest of our content is contained within our wrapper section, they will all be 770 pixels wide. Next we want to start on our header. If you preview our page, you notice that the text bumps right up to our border, which doesn’t look right. We also want to set a height for our header section and separate it from the rest of the page. Notice what happens when we apply the following code to our header section:

<code>#header { 
margin: 0px;
padding: 15px;
height: 50px;
border-bottom: 1px solid #666666;
}
</code>

You can see that we now have a border on the bottom that separates our header, as well as a space between the border and the text. This is due to our padding setting, which is similar to the cell pad attribute from an HTML table. We are getting better, but our title text still looks a little weird. Let’s declare a style to apply to only the <h1> tags that appear inside our header section. Here we are touching on contextual selectors, which we will cover in the next tutorial. This is the same technique that we used in our last tutorials about CSS classes. Here is our declaration:

<code>#header h1 {
font-size: 18px;
font-weight: bold;
color: #FF0000;
}
</code>

As you can see, we are telling the browser that any <h1> tags inside our header section should be displayed bold and red at 18 pixels in size. One important trick to mention is that using CSS you can replace text with images, and since many websites use graphical headers it is important to note that we can achieve the same visual effects using the same images with CSS. The advantage to CSS is the clean code and effectiveness of HTML text versus image alt attributes. However, that is much more advanced than this tutorial.

Next let’s look at our navigation section. For this part, we want our navigation to only be about 180 pixels wide. We also want it to be on the left side, with our content directly to the right of it. I am going to add a border to the right side of our navigation to separate it from our content. Here is our style declaration for the nav section:

<code>#nav {
margin: 0px;
padding: 0px;
float: left;
width: 180px;
border-right: 1px solid #666666;
}
</code>

However, this is not enough to achieve our effect. It won’t be until we style our content section that things really start to take shape. However, we have a bigger problem right now. Notice in the browser preview that our links are appearing in a line, which is because links are inline HTML elements. We want our links to appear on separate lines, and also with some styling to them. First let’s look at the style declaration, and then we will go through what we have done:

<code>#nav a {
display: block;
font-size: 14px;
font-weight: bold;
color: #333333;
text-decoration: none;
padding-left: 15px;
padding-top: 5px;
padding-bottom: 5px;
margin: 0px;
border-bottom: 1px solid #666666;
}
</code>

Once again we are targeting a tags that are within a specific<div> tag, in this case the nav section. What this will do is apply this style to any instances of the <a> tag inside our nav section. To start, we have set the display value to block, which will force each link onto a new line. We then set the text styles- in this case gray, bold text that is larger than the other text. I also removed the underlines from the links as well. In addition, I have set the padding of the links in order to space out the text a little bit. In combination with the bottom border this will make our links look more like buttons. Preview our page in a browser and you begin to see our page taking shape.

However, we also have an opportunity here to set the rollover styles of our links, which will add some interactivity for our users. Since we want our links to change color when the mouse is over them, we will add the following style declaration to our style sheet:

<code>#nav a:hover {
color: #FF0000;
text-decoration: none;
background: #CCCCCC;
}
</code>

Since styles are inherited, our links will maintain their border and other styles when the mouse is over them. However, we have now told the browser to change the text to red and display a gray background when the mouse is over our links. Our button creation is complete, which you can see if you preview our page in a browser.

Our next challenge is with our content area. This will be a simple one since we have dummy content, but remember that we are able to style individual tags inside our content section. This is important since often times content needs to be styled for better presentation. First thing first, let’s get our content section formatted to look right. If you notice the text is flowing around our navigation currently, which is not ideal. We also don’t have any space between our navigation area and our content text. Let’s fix all of that using the following style declaration:

<code>#content {
margin-left: 200px;
margin-right: 20px;
margin-bottom: 20px;
}
</code>

We change the margins to position our text a little better. Our left margin we set to 200 pixels, which will leave a 20 pixel space between our navigation section and our content section. We also need another 20 pixel space on the right side, so that the text does not push up on our border. In addition, I put a 20 pixel margin on the bottom, just to make sure that there is a separation between the content and our footer.

Speaking of the footer, that is all we have left to do. The style declaration is similar to the one we used for our header. We will put a border on top to separate it from the rest of the page, and I am going to make the footer text a bit smaller than our other text. Also, notice that we need to pad the footer so that our text does not touch any borders:

<code>#footer {
border-top: 1px solid #666666;
padding: 15px;
font-size: 10px;
}
</code>

Now if you preview our page in a browser, you should see a nice site that looks as though it were formatted with tables. While this was an extremely simplified example, experiment with the various settings for CSS styles to find ways to make this page better. The important thing to keep in mind is that your goal is always to present your information in a visually appealing way while using as little code as possible. CSS helps us to achieve this by eliminating the need for HTML tables.

Brian Getting

Brian Getting

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

Comment ( 1 )

  1. Legacy User May 24, 2007 Reply

    good

    — *dfdf*