The Power of CSS by Cliff Ritter
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.
When you sit down to think about the sitemap and the navigational structure of
your website, you should consider using cascading style sheets wherever
possible. This includes everything from your text attributes to your table
padding. Each page you create should be tailored around one or two keyword
phrases in order to maximize the relevancy of the content being displayed to
the various internet browsers surfing your website. Using this technique allows
you to have a web page which, in the search engines spiders view, only contains
html and keyword rich text.
Let's use an example to illustrate the power and capability of cascading style
sheets.
Graphic Buttons with Rollover:
In the past we created rollover buttons using graphics programs like Adobe
Photoshop and/or Macromedia Fireworks, and embedded them on our web page with
all the unfriendly code that is needed for the rollover effect. The problem
with doing this can be two-fold. First, search engines prefer text links
because text is always optimal and you can also put your desired keywords in
the text of the link, which can help boost your rankings. Images are also seen
as inferior to html, since search engine spiders are not able to scan images as
effectively as plain text. When you create navigation with graphical buttons,
you lose out on both of these benefits and risk having some of your web pages
not indexed by the search engine spiders. This is why well-optimized web pages
have text links at the bottom of the page; text makes it easier for search
engines to spider your site and compensate for the primary navigation menu.
CSS allows you to create these buttons without having any images visible on
your html code (which is where search engines spider). Furthermore, you can
embed your desired keyword phrase(s) as the text for your links. Try these
steps and you will see how easy it is to simulate the rollover button effect,
how much more effective your web site will be for the desired targeted keywords
and how much faster your web page will be to load.
Your CSS Code:
In CSS you have the ability to create a background image on a particular style.
Create your table with an individual cell for each link. In your CSS styles,
you need to update the a:link and a:hover styles. For the a:link, make the
graphic you have created to act as your button and/or the background image for
that style. Then update the font attributes so the text will be visible on top
of the background image. On the a:hover style, put the over state of the button
as the background of that style and update the font attributes so you can see
the text on the page. This is what your actual CSS code should look like for
the a:link and a:hover styles:
a:link{ font-family: Verdana, Arial, Helvetica, sans-serif; font-style: normal;
font-variant: normal; text-decoration: underline; color: #000000; font-weight:
bold; width: 175px; height: 100px; background-image:
url(images/home-button.gif); background-repeat: no-repeat; }
a:hover{ font-family: Verdana, Arial, Helvetica, sans-serif; font-style:
normal; font-variant: normal; text-decoration: underline; color: #006699;
font-weight: bold; width: 175px; height: 100px; background-image:
url(images/home-button-over.gif); background-repeat: no-repeat; }
This effect creates the perception of a rollover image. To site visitors, it
will appear to be a regular rollover button created out of two graphics. The
only difference is your cascading style sheet contains the images for both
states of the link. This way when search engine spiders visit your website,
they will only see clean html code - without any images used for navigation -
and your keyword-rich text. As well, your web page should load much faster and
be compatible with anyone still using an old dial-up connection.
CSS Above and Beyond:
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.
Another good practice when designing web pages using CSS is to make sure your
web page conforms to W3 standards for both HTML and CSS. This is critical in
ensuring your website works across all platforms and browsers and also helps to
ensure ALL search engine spiders can index your site easily and effectively.
There really is nothing worse then directing a few hundred hits per day in
search engine traffic and having 50% of those people unable to view your
website because of poor coding, corrupted style sheets or broken links. Always
test your web site and have a friend navigate through your website both on a
MAC and PC to ensure there are in fact no broken links and all pages are easily
accessible and error free.
The power of cascading style sheets is incredible. The above example only
scratches the surface of how much you can do for your page in terms of
accessibility, functionality, speed and clean html. You can adjust your
scrollbar, background image, and even the padding of your tables all in your
style sheet. The only key is that you create an external css and link it from
the web page using those styles file ( <link href="your-style.css"
rel="stylesheet" type="text/css"> ). This way, you don't add any cumbersome
code on your page that will risk confusing the search engine spiders and use
CSS to its full advantage.
By adjusting all these attributes in an externally linked css file, you are
keeping your web page small in physical size along with ensuring good clean
html code which as we have mentioned above, search engine spiders love! As
well, css makes life MUCH easier on the web designer when future updates need
to be made. It is far more efficient to manage a website using cascading style
sheets then one that contains good old font tags.
This article is written by Cliff Ritter and Copyright of
Logical Sense SEO Services.
About the Author
Cliff Ritter is President of Logical Sense, a Web Site Marketing firm
specializing in full web optimization and marketing solutions including search
engine optimization, link strategies, keyword research, analysis and
implementation along with graphic and
professional web site design services.
This article is Copyright, LogicalSense.ca 2001-2006
|
