Become a webdsign master


The Power of CSS

CSS or cascading style sheets are usedimages are present on the actual page
to create a set of styles that can bewhen they are really embedded right into
applied to your fonts, tables and mostyour cascading style sheet. Lets take
other attributes of your web page. Thesethe rollover button effect one step
styles allow you to create a muchfurther. Suppose you want to manipulate
cleaner, faster web page that searchyour web page code in a way that your
engines love and also makes life muchrelevant keyword phrase(s) appear at the
easier on the designer when globaltop of the page. With CSS, you have the
changes to these styles need to beability to do this with ease. CSS allows
applied. It is also always critical toyou not only to adjust font and color
always keep in mind your target audienceattributes, but you can also adjust the
and the average internet connectionspacing and alignment of certain
speed these users have. By using styleselements on your web page. So with this
sheets to their full advantage, you canin mind, creating your table structure
help keep your web page size down to ausingtags allows you to layout your page
minimum.in a way that the search engine spiders
When you sit down to think about thesee your important, relevant keyword
sitemap and the navigational structurephrase(s) ahead of your tables and
of your website, you should considerimages. The next step is to incorporate
using cascading style sheets whereveryour cascading style sheet so you can
possible. This includes everything fromstill use a header designed using
your text attributes to your tablegraphics, while placing your important
padding. Each page you create should bekeyword phrase(s) at the top of your web
tailored around one or two keywordpage which search engines love. In your
phrases in order to maximize thestyle sheet, add these two styles:
relevancy of the content being displayed#header{ width: 373px; height: 53px;
to the various internet browsers surfingbackground-image: url(header.gif);
your website. Using this techniquebackground-repeat: no-repeat; color:
allows you to have a web page which, inf7f7f7; }h1{ text-indent: -100em;
the search engines spiders view, onlymargin:0px,0px,0px,0px; }
contains html and keyword rich text.As you can see, in the #header style, we
Let's use an example to illustrate thehave included the dimensions of the
power and capability of cascading styleimage along with including the image you
sheets.want to serve as your header as the
Graphic Buttons with Rollover: In thebackground for this style. Make sure you
past we created rollover buttons usinginput the correct dimensions for the
graphics programs like Adobe Photoshopheader image. This needs to be accurate
and/or Macromedia Fireworks, andas the style sheet will only display
embedded them on our web page with allwhat can fit in the outlined dimensions
the unfriendly code that is needed forand will also affect the spacing of your
the rollover effect. The problem withtables and web page. On the h1 style, we
doing this can be two-fold. First,have indicated we do not want the text
search engines prefer text links becausevisible on the web page, rather the
text is always optimal and you can alsoheader image we created which is
put your desired keywords in the text ofcontained in the #header style. We are
the link, which can help boost yourable to do this by using the
rankings. Images are also seen astext-indent: -100em attribute of the h1
inferior to html, since search enginestyle. You also want to include the
spiders are not able to scan images asmargin attribute so you avoid any
effectively as plain text. When youunwanted spacing underneath the text
create navigation with graphicalcontained in thetag. Then, on your
buttons, you lose out on both of theseactual web page, put your keywords at
benefits and risk having some of yourthe top of the page in antag and include
web pages not indexed by the searchthe #header style. This is what your
engine spiders. This is whycode should look like for the text you
well-optimized web pages have text linksare trying to display as anwhile
at the bottom of the page; text makes itdisplaying only the header graphic. (
easier for search engines to spider yourYOUR IMPORTANT KEYWORD PHRASE
site and compensate for the primary). This can give you a HUGE advantage
navigation menu.when trying to optimize a website for a
CSS allows you to create these buttonsvery competitive category and achieve
without having any images visible ontop 10 search engine rankings by making
your html code (which is where searchyour keywords visible right at the top
engines spider). Furthermore, you canof the page, in antag, while actually
embed your desired keyword phrase(s) asdisplaying a nice header graphic to the
the text for your links. Try these stepsperson browsing your website. Although
and you will see how easy it is tomany changes have occurred in the last
simulate the rollover button effect, howfew weeks in terms of Yahoo! adopting
much more effective your web site willtheir own search engine spider and
be for the desired targeted keywords andlistings, Google making the switch to
how much faster your web page will be togeo targeting and the ever growing
load.importance in maintaining quality, theme
Your CSS Code: In CSS you have therelated link partners, the placement of
ability to create a background image onyour keywords is still an important
a particular style. Create your tablefactor in adding to your search engine
with an individual cell for each link.optimization and ranking success.
In your CSS styles, you need to updateAnother good practice when designing web
the a:link and a:hover styles. For thepages using CSS is to make sure your web
a:link, make the graphic you havepage conforms to W3 standards for both
created to act as your button and/or theHTML and CSS. This is critical in
background image for that style. Thenensuring your website works across all
update the font attributes so the textplatforms and browsers and also helps to
will be visible on top of the backgroundensure ALL search engine spiders can
image. On the a:hover style, put theindex your site easily and effectively.
over state of the button as theThere really is nothing worse then
background of that style and update thedirecting a few hundred hits per day in
font attributes so you can see the textsearch engine traffic and having 50% of
on the page. This is what your actualthose people unable to view your website
CSS code should look like for the a:linkbecause of poor coding, corrupted style
and a:hover styles:a:link{ font-family:sheets or broken links. Always test your
Verdana, Arial, Helvetica, sans-serif;web site and have a friend navigate
font-style: normal; font-variant:through your website both on a MAC and
normal; text-decoration: underline;PC to ensure there are in fact no broken
color: #000000; font-weight: bold;links and all pages are easily
width: 175px; height: 100px;accessible and error free.
background-image: url(imagesThe power of cascading style sheets is
home-button.gif); background-repeat:incredible. The above example only
no-repeat; }a:hover{ font-family:scratches the surface of how much you
Verdana, Arial, Helvetica, sans-serif;can do for your page in terms of
font-style: normal; font-variant:accessibility, functionality, speed and
normal; text-decoration: underline;clean html. You can adjust your
color: #006699; font-weight: bold;scrollbar, background image, and even
width: 175px; height: 100px;the padding of your tables all in your
background-image: url(imagesstyle sheet. The only key is that you
home-button-over.gif);create an external css and link it from
background-repeat: no-repeat; }the web page using those styles file (
This effect creates the perception of a). This way, you don't add any
rollover image. To site visitors, itcumbersome code on your page that will
will appear to be a regular rolloverrisk confusing the search engine spiders
button created out of two graphics. Theand use CSS to its full advantage.
only difference is your cascading styleBy adjusting all these attributes in an
sheet contains the images for bothexternally linked css file, you are
states of the link. This way when searchkeeping your web page small in physical
engine spiders visit your website, theysize along with ensuring good clean html
will only see clean html code - withoutcode which as we have mentioned above,
any images used for navigation - andsearch engine spiders love! As well, css
your keyword-rich text. As well, yourmakes life MUCH easier on the web
web page should load much faster and bedesigner when future updates need to be
compatible with anyone still using anmade. It is far more efficient to manage
old dial-up connection.a website using cascading style sheets
CSS Above and Beyond: With cascadingthen one that contains good old font
style sheets, as outlined above, you cantags.
create the perception to the user that



1 A B C D E 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128