Home arrow Style-Sheets arrow Page 3 - The Power of CSS

CSS - Above and Beyond - Style Sheets

CSS or cascading style sheets are used to create a set of styles that can be applied to your fonts, tables and most other attributes of your web page. These styles allow you to create a much cleaner, faster web page that search engines love and also makes life much easier on the designer when global changes to these styles need to be applied. It is also always critical to always keep in mind your target audience and the average Internet connection speed these users have. By using styles sheets to their full advantage, you can help keep your web page size down to a minimum.

  1. The Power of CSS
  2. Your CSS Code
  3. CSS - Above and Beyond
  4. Final Notes
By: Cliff Ritter
Rating: starstarstarstarstar / 38
April 27, 2004

print this article



With cascading style sheets, as outlined above, you can create the perception to the user that images are present on the actual page when they are really embedded right into your cascading style sheet. Lets take the rollover button effect one step further. Suppose you want to manipulate your web page code in a way that your relevant keyword phrase(s) appear at the top of the page. With CSS, you have the ability to do this with ease. CSS allows you not only to adjust font and color attributes, but you can also adjust the spacing and alignment of certain elements on your web page. So with this in mind, creating your table structure using <DIV> tags allows you to layout your page in a way that the search engine spiders see your important, relevant keyword phrase(s) ahead of your tables and images.  The next step is to incorporate your cascading style sheet so you can still use a header designed using graphics, while placing your important keyword phrase(s) at the top of your web page which search engines love. In your style sheet, add these two styles:

 #header {
 width: 373px;
 height: 53px;
 background-image: url(header.gif);
 background-repeat: no-repeat;
 color: f7f7f7;
-indent: -100em

As you can see, in the #header style, we have included the dimensions of the image along with including the image you want to serve as your header as the background for this style. Make sure you input the correct dimensions for the header image. This needs to be accurate as the style sheet will only display what can fit in the outlined dimensions and will also affect the spacing of your tables and web page.  On the h1 style, we have indicated we do not want the text visible on the web page, rather the header image we created which is contained in the #header style. We are able to do this by using the text-indent: -100em attribute of the h1 style. You also want to include the margin attribute so you avoid any unwanted spacing underneath the text contained in the <h1> tag. Then, on your actual web page, put your keywords at the top of the page in an <h1> tag and include the #header style. This is what your code should look like for the text you are trying to display as an <h1> while displaying only the header graphic. (<h1 id=header>YOUR IMPORTANT KEYWORD PHRASE</h1>). This can give you a HUGE advantage when trying to optimize a website for a very competitive category and achieve top 10 search engine rankings by making your keywords visible right at the top of the page, in an <h1> tag, while actually displaying a nice header graphic to the person browsing your website. Although many changes have occurred in the last few weeks in terms of Yahoo! adopting their own search engine spider and listings, Google making the switch to geo targeting and the ever growing importance in maintaining quality, theme related link partners, the placement of your keywords is still an important factor in adding to your search engine optimization and ranking success.

>>> More Style-Sheets Articles          >>> More By Cliff Ritter

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- What is CSS?
- The Power of CSS
- Understanding Style Sheets (part 2)
- Understanding Style Sheets (Part 1)

Developer Shed Affiliates


Dev Shed Tutorial Topics: