1. When you have multiple css files, when a page is loading there’ll be multiple HTTP requests (for every css file), so it will slow down the loading of the web page.

2. If you have a single huge css file it’s hard to find something and make changes in the code.

I think the best solution is:

1. I have a single css file with many comments

2. Before uploading the css file to the server, I remove the comments and all unnecessary code from the file using my reduce code size tool and into the server, I upload the optimized css file.

In this way, I have a file that allows me to make changes easily and in the same time the loading speed of my site is fast, because there’s only one HTTP request for the css.

1. QrONE CSS Designer – a css generator that allow you to view result as you select some of the options.

2. The Generator Form v2.90 – a css generator that gives you a lot of controls.

3. CSSCreator – it allows you to choose a style for your web page. You can select different Cascading Style Sheet properties.

4. CSSCreator version 2 – a new version of the CSSCreator. It simplifies the layout and makes it easier to use.

5. Advanced HTML For Beginners – another css generator that allows you to create a css file for you body tag, links and th header area.

border-top:1px solid #f00;
border-right:1px solid #f00;
border-bottom:1px solid #f00;
border-left:1px solid #f00;

Each border is the same! So, it can be replace with:

border:1px solid #f00;

2. Duplicate Color Codes

color:#aabbcc;

Write the code like this instead:

color:#abc;

3. Not applying more than 1 class at a time

.classA {background-color:#f00; }

.classB {color:#000;}

.classAandB {background-color:#f00; color:#000;}

<div class=”classAandB”>…</div>

We don’t need .classAandB, we can write:

<div class=”classA classB”>…</div>

4. Ignoring of selectors

.footerlink {…}

write the code like this instead:

#footer a {}

5. Not cascading the styles

body {color:”#ff0;}

h2 {color:#ff0;  font-weight:bold;}

This would be better:

body {color:#ff0;}

h2 {text-decoration:underline;}

6. Adding ‘px’ for zero values

padding:0px 5px 0px 0px;

It can be written instead like this:

padding:0 5px 0 0;

7. Not Grouping Identical Styles

h1 {font-family:Arial,Helvetica,sans-serif;}

h1 {font-family:Arial,Helvetica,sans-serif;}

h3 {font-family:Arial,Helvetica,sans-serif;}

p {font-family:Arial,Helvetica,sans-serif;}
It can be written instead like this:

h1, h2, h3, p {font-family:Arial,Helvetica,sans-serif;}

8. Not using Firebug

Firebug allows you to inspect the CSS element and make your changes;  Firebug will automatically reflect your changes in real time, helping you to judge immediately if the changes you made to the code are correct.

If they are correct, you can then save the correct CSS entry to the original file. This makes the editing process fast and easy.

1. CssMenuMaker.com – Generator and Download  CSS Menus

URL: http://www.cssmenumaker.com/

2. MyCssMenu.com – CSS Menu Generator

URL: http://www.mycssmenu.com/

3. CssMenuBuilder.com – Create a standard compliant xhtml/css
menu for your website for free via the online navigation generator.

URL: http://cssmenubuilder.com/home

4. CssPortal.com/generators/menu.htm – create a horizontal
menu with as many as 10 tabs.

URL: http://www.cssportal.com/generators/menu.htm

5. PureCssMenu.com – Horizontal css menu & Vertical css menu.

URL: http://purecssmenu.com/

x. TabsGenerator.com – create navigation tabs with border, gradient,
orientation, and much more.

URL: http://www.tabsgenerator.com/