From
the other side some web developers
implement the CSS on wrong way. They
write their CSS in HTML code of the page,
like this: <html>
<head>
<title>My Page</title>
<style>
A
{
font-family: Verdana;
font-size:8pt;
color:black;
text-decoration:none
}
</style>
…..
What is
wrong with this technique? Well, imagine
that you have site with more than 50
pages. One day, you decide that you want
to change font color and colors of the
links on your site. You will have to edit
ALL the pages on your site, and do to
that you will need time, because you
place your CSS in your web page.
Better
way is to save your visual attributes in
separate, external CSS file, and to link
that file with your page like this:
<html>
<head>
<title>My Page</title>
<link href="myStyle.css" rel="stylesheet" type="text/css">
….
Using
this technique, you can change the look
of your site within minutes, regardless
of the number of pages, because your
visual attributes are saved in ONE
external CSS file. Edit that file, and
you are done.
Benefits
Which
are the benefits of using CSS? List is
quite long and I will list here only the
most important.
- Your
web page will load faster
- Web
page will become more search
engine friendly
- You
can change you site appearance
within minutes
- You
can write separate CSS file for
handheld devices which will be
called up instead of the regular
CSS file
- You
can forget about creating printer
friendly version of your site
using separate CSS file when user
chooses to print the web page.
Avoiding
standard HTML commands like:
<font color="#0000ff"><font size=2>Product</font></font></font>
will
help us to reduce file size, but that is
not the only benefit. Using CSS word
product in this example will be moved
more close on the top of the document.
Search engine will pick up more content
and less code.
Imagine
that you have 3 columns table on your
page. When you see the code, you will
notice that first come code for your
table, and after that it come your
content. Positioning your 3 columns using
CSS instead of standard inline elements:
<table width="90%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="381" height="150" valign="top" bgcolor="FFEDD4">
My Product
</td>
<td height="150" valign="top" bgcolor="FFEDD4">
…..
When CSS
is used, your code might look like this:
<div id="leftcontent">
My Product
</div>
Again
your code is much more clear, and your
content is moved on the top of your
document, making your HTML page search
engine friendly, and reducing your file
size.
Content
is one of the most important factors in
Search Engine Optimization, and you will
benefit with removing the unnecessary
code in your HTML and create search
engine friendly web page.
Validate
it
Browser
war is far behind us. Reality is that
most of the people today use Internet
Explorer, but you should try to be on
safe side and ensure that your CSS code
is valid. Not all browsers interpret the
CSS on same way. You can validate your
CSS here:
http://jigsaw.w3.org/css-validator/
|
Articles