The Power of CSS - CSS - Above and Beyond
(Page 3 of 4 )
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;
}
h1 {
text-indent: -100em;
margin:0px,0px,0px,0px;
}
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.
Next: Final Notes >>
More Style Sheets Articles
More By Cliff Ritter
/ 8 
