Cascading Style Sheets (CSS) | Search Engine Visibility (2nd Edition)

Cascading Style Sheets (CSS) are a feature of HTML developed by the World Wide Web Consortium (W3C). With style sheets, web site designers and end users can create style templates that specify how different text elements appear on a web page ”all without affecting its structure.

Using CSS in web site designs enhances the end- user experience as well as search engine visibility. Style sheets can help reduce code bloat and the overall file size of a web page. Style sheets also enable web designers to customize the properties of individual HTML tags. For example, CSS enables web designers to display fonts and typefaces exactly as they intended instead of relying on browser default settings. The result? Site visitors find web pages much easier to read.

One way CSS benefits web pages is in headings. Heading tags ” especially the <h1> tag ”can be more attractive when using CSS. Without any font specifications, the appearance of the <h1> tag depends on the settings of your site visitors' browsers. Figure 3.5 shows how various heading tags might look like on a standard browser.

Figure 3.5. The appearance of various heading tags in Internet Explorer on a Macintosh computer. The default font setting for this browser is Times New Roman. On a PC platform, the text appears much larger.

graphics/03fig05.gif

Notice how large the headings appear and how they dominate the web page. If you are trying to place the most important information at the top of your web pages, using <h1> and <h2> tags can crowd important information farther down the computer screen, and your site visitors might not be able to view that information. For maximum search engine visibility and sales conversions, a page's most important keywords should be visible at the top of the computer screen. Web designers can display the most important information at the top of the screen more easily and efficiently using CSS than with standard HTML tags.

Figure 3.6 shows the same type of page designed with an external style sheet.

Figure 3.6. The appearance of various heading tags in Internet Explorer, on a Macintosh computer, using HTML settings.

graphics/03fig06.gif

The smaller, more legible heading tags are easier on the eyes and enable greater use of screen real estate.

Creating External CSS Files

In terms of search engine visibility, external CSS files have the same benefits as external JavaScript files. Because search engines have no interest in a site's style sheets (unless you are using them to spam), you can place all style sheets in an external text file and place the Robots Exclusion Protocol in those files.

For ease of use, web designers can create the code for the style sheets using HTML software. The HTML code for the TranquiliTeas page in Listing 3.5 was generated using Dreamweaver. Notice that the style sheet code is placed between the <head> and </head> tags.

Listing 3.5 Code Generated in Dreamweaver

 <html>  <head>  <title>Organic green, oolong, and herbal tea from TranquiliTeas Organic  Teas</title>  <meta name="description" content="Get gourmet herbal, green, and  oolong teas at wholesale prices from TranquiliTeas.  Organic tea  importer offers decaffeinated herbal teas and other herbal blends.  Black, oolong, green, and iced teas available as loose tea or in tea  bags.">  <meta name="keywords" content="organic teas green oolong tea herbal  blends TranquiliTeas decaffeinated loose tea bags">  <style type="text/css">  <!--  body {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 13px;  text-align: left  }  h1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px;  font-weight: bold;  text-align: center  }    h2 {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 16px;  font-weight: bold;  text-align: center  }   h3 {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 14px;  font-weight: bold;  text-align: center  }  p {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 13px;  text-align: left  }  -->  </style>  </head>

To create an external style sheet, take all the content between the <style> and </style> tags and copy it into a text editor. In the aforementioned TranquiliTeas web page, resulting HTML code on the web page now looks like the following:

 <html>  <head>  <title>Organic green, oolong, and herbal tea from TranquiliTeas Organic  Teas</title>  <meta name="description" content="Get gourmet herbal, green, and  oolong teas at wholesale prices from TranquiliTeas. Organic tea importer  offers decaffeinated herbal teas and other herbal blends. Black, oolong,  green, and iced teas available as loose tea or in tea bags.">  <meta name="keywords" content="organic teas green oolong tea herbal  blends TranquiliTeas decaffeinated loose tea bags">  <link rel="STYLESHEET" type="text/css" href="css/style1.css">  <style type="text/css"></style>  </head>

In the text editor, the style sheet code looks like the following:

 body {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 13px;  text-align: left  }  h1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px;  font-weight: bold;  text-align: center  }  h2 {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 16px;  font-weight: bold;  text-align: center  }  h3 {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 14px;  font-weight: bold;  text-align: center  }  p {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 13px;  text-align: left  }

Save this file with a name that is easy for you to remember, such as style1.css. Place this file and all other style sheets in a subdirectory called css on your web server, as shown in Figures 3.7 and 3.8.

Figure 3.7. Create a subdirectory in your web server called css.

graphics/03fig07.gif

Figure 3.8. Place all your style sheets in the css subdirectory.

graphics/03fig08.gif

Benefits of CSS

Using external CSS files are beneficial to your site visitors, the search engines, and your design team for the same reasons that external JavaScript files are beneficial. First, the external files decrease the download time for your site visitors because the style sheets are downloaded only once and cached in your browser. After your visitors have the scripts cached, they do not have to download them again whenever they visit other pages on your site that use the same scripts. Additionally, style sheets can help reduce code bloat and the overall file size of web pages, further decreasing the download time.

The external files also benefit your design team because if they need to modify the look and feel of an entire web site, they need only modify the style sheets and not the entire web site.

Warning

Do not place the robots exclusion protocol on your external style sheets. Too many unethical search engine marketers have been using style sheets to artificially boost keyword density by hiding text. Because of this rampant abuse, some search engines are beginning to penalize sites that do not enable spiders to access style sheets.

Therefore, using external style sheets makes your site more user friendly and can help increase a site's search engine visibility.