| What is CSS? | | | | Which are the benefits of using CSS? List is quite |
| CSS is a simple file which controls the visual | | | | long and I will list here only the most important. |
| appearance of a Webpage without compromising its | | | | - Your web page will load faster |
| structure. Using CSS we can control ourfont size, | | | | - Web page will become more search engine friendly |
| font color, link color and many other attributes on our | | | | - You can change you site appearance within minutes |
| webpage. This will make our HTML code much more | | | | - You can write separate CSS file for handheld |
| readable and the page sizewill be reduced. | | | | devices whichwill be called up instead of the regular |
| Why to use it and how to use it properly | | | | CSS file |
| If you don’t use CSS on your web pages and | | | | - You can forget about creating printer friendly |
| you have many tables andcontent on them, chances | | | | version ofyour site using separate CSS file when user |
| are that your HTML file size will be quite big. | | | | chooses to print the web page. |
| Fact is that we live in a busy world, and people are | | | | Avoiding standard HTML commands like: |
| not will to wait morethan 5 seconds web page to | | | | <font color="#0000ff"><font |
| load. | | | | size=2>Product</font>will help us to reduce |
| From the other side some web developers implement | | | | file size, but that is not the only benefit. Using |
| the CSS on wrong way. | | | | CSS word product in this example will be moved |
| They write their CSS in HTML code of the page, like | | | | more close on the top ofthe document. Search |
| this: | | | | engine will pick up more content and less code. |
| <html> | | | | Imagine that you have 3 columns table on your page. |
| <head> | | | | When you see the code,you will notice that first |
| <title>My Page</title> | | | | come code for your table, and after that it |
| <style> | | | | comeyour content. Positioning your 3 columns using |
| A | | | | CSS instead of standardinline elements: |
| {font-family: | | | | <table width="90%" border="0" cellspacing="0" |
| Verdana;font-size:8pt;color:black;text-decoration:none | | | | cellpadding="0"> |
| } | | | | <tr> |
| </style> | | | | <td width="381" height="150" valign="top" |
|
.. | | | | bgcolor="FFEDD4"> |
| What is wrong with this technique? Well, imagine that | | | | My Product |
| you havesite with more than 50 pages. One day, you | | | | </td> |
| decide that you wantto change font color and colors | | | | <td height="150" valign="top" |
| of the links on your site. Youwill have to edit ALL the | | | | bgcolor="FFEDD4"> |
| pages on your site, and do to that youwill need time, | | | |
.. |
| because you place your CSS in your web page. | | | | When CSS is used, your code might look like this: |
| Better way is to save your visual attributes in | | | | <div id="leftcontent"> |
| separate,external CSS file, and to link that file with | | | | My Product |
| your pagelike this: | | | | </div> |
| <html> | | | | Again your code is much more clear, and your |
| <head>title>My Page</title> | | | | content is moved on the topof your document, |
| <link href="myStyle.css" rel="stylesheet" | | | | making your HTML page search engine friendly, |
| type="text/css"> | | | | andreducing your file size. |
|
. | | | | Content is one of the most important factors in |
| Using this technique, you can change the look of your | | | | Search Engine |
| site withinminutes, regardless of the number of | | | | Optimization, and you will benefit with removing the |
| pages, because your visualattributes are saved in | | | | unnecessarycode in your HTML and create search |
| ONE external CSS file. Edit that file,and you are done. | | | | engine friendly web page. |
| Benefits | | | | |