In Part 1 and Part 2 of this Cascading Style Sheets tutorial, we covered how to apply styles to all instances of an HTML tag, create style classes, and 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 web page using ID selectors. Using techniques from our previous tutorials, we will create an entire page formatted with only CSS.
Formatting with CSS allows more search-engine-friendly HTML code and controls the placement of keywords and content in the code. For example, many websites feature complicated navigation composed entirely of images, often with JavaScript rollover effects. The HTML code behind such design elements is frequently bulky, which makes it difficult for search engine bots to access. 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 provides code that search engine bots can easily crawl without compromising the visual appeal of our website.
In this “Part 3” tutorial, we aim to replace tables in our design. We will start by identifying the information we want to present and structuring it so that it is accessible to search engines. Once structured, we will look at formatting and presenting it to our users.
The web page we will build in this tutorial will be relatively simple, consisting of a header, navigation bar, content area, and footer. Often a designer would place a table into the 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 page, replacing the need for tables. We will also touch on “contextual selectors,” which apply styles to specific tags within identified regions.
We are going to create a simple page layout for demonstration purposes. However, the techniques can be applied to create extremely intricate designs with minimum code. Examples of such techniques can be seen at CSS Zen Garden, a site dedicated to showcasing impressive CSS design techniques.
Instruction
The first step in creating a website is to understand the content. Otherwise, it is extremely difficult to envision an overall strategy for both search engines and humans. In this example, we will create a simple web page with a header, a vertical navigation bar, an area for our content, and a footer. Look at the page that we want to build below:
<img src="/images/article_images/sample_site.jpg" alt="Sample Site" />
We will first start with our HTML since we want to ensure that the code for our web page is search engine friendly. Next, we will look at formatting our page using CSS. We first 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 signify its importance. Lok at the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /> <title>Our Example Website</title> </head> <body> <div> <h1>Our Example Website</h1> </div> </body> </html>
As you can see, we are putting everything in our header inside this <div> element, which we will use later to format. Continuing to our navigation, we want to insert all of these links inside yet another <div> element, which will serve as our vertical menu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /> <title>Our Example Website</title> </head> <body> <div> <h1>Our Example Website</h1> </div> <div> <a href="about.html">About Us</a> <a href="products.html">Products</a> <a href="downloads.html">Downloads</a> <a href="contact.html">Contact Us</a> </div> </body> </html>
Notice that our links are clean — easy for search engine bots to navigate. Next, we will create our content area using another <div> element. I have inserted dummy text to represent the content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /> <title>Our Example Website</title> </head> <body> <div> <h1>Our Example Website</h1> </div> <div> <a href="about.html">About Us</a> <a href="products.html">Products</a> <a href="downloads.html">Downloads</a> <a href="contact.html">Contact Us</a> </div> <div> <p>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.</p> <p>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.</p> </div> </body> </html>
Again, we have used a <div> tag to create a region for our content. Finally, we will do the same for our footer region. In addition to that, I am placing another <div> tag around all of our content — inside each <body> tag), which we will use later to define the layout of the page. Here’s the final HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /> <title>Our Example Website</title> </head> <body> <div> <div> <h1>Our Example Website</h1> </div> <div> <a href="about.html">About Us</a> <a href="products.html">Products</a> <a href="downloads.html">Downloads</a> <a href="contact.html">Contact Us</a> </div> <div> <p>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.</p> <p>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.</p> </div> <div> <p>Copyright &copy; 2006 Practical eCommerce Magazine</p> </div> </div> </body> </html>
Notice that there is no extra code for formatting. To achieve the same result using tables in our HTML would have resulted in extra code that search engine bots would have to navigate.
We need to use some CSS to format things a bit. First, we need to create a new style sheet — I’ll call mine styles.css — and link it to our HTML page. Place the following code into the header of our HTML document:
<link rel="stylesheet" type="text/css" media="screen, projection" href="styles.css" />
This will link to our stylesheet in browsers that understand CSS. Those that do not will ignore this piece of code altogether. We can now add id attributes to our <div> tags, allowing us to style each individually using CSS. For example, our header area <div> tag will have an id of header. Look at the code from the body section of our document after assigning id attributes to each <div> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" charset="iso-8859-1" /> <title>Our Example Website</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>Our Example Website</h1> </div> <div id="nav"> <a href="about.html">About Us</a> <a href="products.html">Products</a> <a href="downloads.html">Downloads</a> <a href="contact.html">Contact Us</a> </div> <div id="content"> <p>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.</p> <p>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.</p> </div> <div id="footer"> <p>Copyright &copy; 2006 Practical eCommerce Magazine</p> </div> </div> </body> </html>
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 will become an area of our page.
Next, we will declare styles for each section, starting by formatting 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:
body { font: 11px/1.2 em Arial, Helvetica, sans-serif; color: #000000; margin: 0px; padding: 0px; }
We are ready to format our <div> tags using id selectors. Each selector begins with a # symbol before its name, similar to the period before class selectors. Our first step is to format the wrapper section containing 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 will also place 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:
#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; }
The content on our page is now surrounded by a gray border (except the top) and is limited to 770 pixels in width. This is a good start. The rest of our content is within our wrapper section and will be 770 pixels wide. Next, we want to start on our header. We 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:
#header { margin: 0px; padding: 15px; height: 50px; border-bottom: 1px solid #666666; }
We now have a border on the bottom that separates our header and 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. The page looks better, but our title text still looks 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. This is the same technique we used in our last tutorials about CSS classes. Here is our declaration:
#header h1 { font-size: 18px; font-weight: bold; color: #FF0000; }
Note that we are telling the browser that any <h1> tag inside our header section should be displayed in bold and red at 18 pixels. One important trick to mention is that by using CSS, you can replace text with images, and since many websites use graphical headers, we can achieve the same visual effects using the same images with CSS. The advantage of 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. We want the navigation only to be about 180 pixels wide. We also want it to be on the left, with our content directly to the right. I will add a border to the right of our navigation to separate it from our content. Here is our style declaration for the nav section:
#nav { margin: 0px; padding: 0px; float: left; width: 180px; border-right: 1px solid #666666; }
However, this is not enough to achieve our effect. It won’t be until we style our content section that things start to take shape. However, we have a bigger problem now. Our links appear in a line because links are inline HTML elements. We want our links to appear on separate lines and have some styling. Let’s look at the style declaration, and then we will go through what we have done:
#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; }
We are targeting <a> tags within a specific <div> tag, in this case the nav section. This will apply the style to any <a> tag instances inside our <nav> section. To start, we have set the display value to block, forcing 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. In addition, I have set the padding of the links to space out the text a bit. Combined with the bottom border, this will make our links look more like buttons.
However, we also have an opportunity here to set the rollover styles of our links, which will add some interactivity for 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:
#nav a:hover { color: #FF0000; text-decoration: none; background: #CCCCCC; }
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.
Our next challenge is with our content area. This will be simple since we have dummy content, but remember that we can style individual tags inside our content section. This is important since content frequently needs to be styled for better presentation. First, let’s get our content section formatted correctly. The text is currently flowing around our navigation, which is not ideal. We also don’t have space between our navigation area and our content. Let’s fix all of that using the following style declaration:
#content { margin-left: 200px; margin-right: 20px; margin-bottom: 20px; }
We changed the margins to better position our text. We set our left margin to 200 pixels, leaving a 20-pixel space between our navigation and content sections. We also need another 20-pixel space on the right side so that the text does not push up on our border. I also put a 20-pixel margin on the bottom to ensure that there is a separation between the content and our footer.
Speaking of the footer, that is all we have to complete. 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. I will 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:
#footer { border-top: 1px solid #666666; padding: 15px; font-size: 10px; }
Now if you preview our page in a browser, you should see a nice site that looks like it was formatted with tables. While this was an extremely simplified example, experiment with the various settings for CSS styles to find ways to improve this page. The important thing to remember is that your goal is always to present your information visually appealingly while using as little code as possible. CSS helps us to achieve this by eliminating the need for HTML tables.