So, without further ado, I would like to introduce the five principles of excellent CSS design. Regardless of how much (or how little experience you have), take time to absorb these principles, and then beginning applying them to your daily work flow.

One Declaration, One Line

This one can be hard to follow at first, but I guarantee that once you get used to it, you will never think of looking back. Instead of placing each element of a declaration on one line, place the entire declaration on one line. It may seem counter-intuitive, but this will actually make it easier to find what you need within your CSS file. Additionally, getting rid of all the unneeded spaces and characters (mainly semicolons) will reduce the overall size of your CSS file.

When Centering, Use CSS

In most cases, centering the layout of a website not only increases its aesthetics, but also makes it more usable to visitors. If you are going to center a layout, make sure you do so through CSS and avoid any alternative methods. For an efficient way to center your layout with CSS, you can use the following declaration:

#container { margin: 0 auto; width: xxxpx; text-align: left; }

Focus on Simplicity

A lot of designers are always looking for hacks to make their designs work perfectly in specific browsers. Although CSS hacks seem like a solution to a problem, in reality, they can cause more problems to occur. This is especially easy to understand when you take into account the constantly changing nature of browsers and the Internet in general. Instead of constantly hacking your CSS, accept that your designs will never display perfectly in every browser, and spend your time focusing on creating fundamentally sound CSS designs. This simple but focused strategy to designing with CSS will pay off for you in the long run.

Declare Your DOCTYPE

You can create the perfect website, but if you don’t declare a DOCTYPE (or declare the wrong DOCTYPE), your website is still going to encounter all kinds of problems (because the browser is not going to know how to properly handle your code). Therefore, not only is important to always declare a DOCTYPE, but make sure you are declaring the correct DOCTYPE for the type of code you have written.

Embrace Shorthand

It may take some time to get used to, but the benefits of coding your CSS in shorthand are numerous. By keeping your code organized through the use of shorthand, you will find that it is much easier to find what you need and make any future maintenance updates to the code. Additionally, shorthand will decrease the size of your file, which will allow it to be loaded in a shorter amount of time.

Guzel Pro Magazine: News and magazine style themes are some of the most popular types of Premium themes. However, the Guzel Pro Magazine theme (which was just recently released) won’t cost you a dime, and it offers the same (if not more) quality than the majority of the Premium news themes I have seen.

Infinity: Although this theme wouldn’t work with every blog, if you need a theme that is bright and vibrant, this one is quite amazing. Featuring three fixed columns and multiple social media integrations, even if you don’t end up using this theme, you will enjoy looking at it.

Neoclassical: Designed by Chris Pearson (who is responsible for the extremely popular Thesis Premium Theme), the free Neoclassical theme focuses on beautiful typography. With three columns and the ability to display random header images, this theme can be used for a wide variety of purposes.

WP CODA: The WP CODA theme is based on the Coda (which is a one-window web development product for Mac) website, which has long been admired by designers as being an amazingly designed website. The WP CODA theme features fluid navigation, and works amazingly well for a website that is promoting a product or service.

Elements of SEO: There are three reasons that this is a great theme. First, the design is very attractive (note the lovely large header image, which can easily be customized). Secondly, the theme was created to be search engine friendly, so you won’t have to worry about making any changes on your own. Finally, the team behind this theme keeps it up-to-date, so you won’t have to worry about it breaking on your down the road.

Copyblogger: Although you’ve probably seen quite a few blogs using this theme, I still think it’s one of the best free themes available. Since it was designed by Chris Pearson, you know that it has a solid framework. With just a little bit of work, you can customize this great theme and make it stand out on its own.

Scruffy: If you are looking for a grungy theme to make your blog stand out from the rest, take a look at the Scruffy theme. With an intentionally messy background and easy to read body, I think the Scruffy theme is one of the top choices available for a personal blog.

However, even though most designers know that they will eventually get their edge back, most can’t afford to be stuck in creative quicksand for very long. Therefore, it’s important to understand how you can minimize the amount of time that you feel like you can’t create anything new. Just like the designs they make, every designer is different. This means that there is no clear cut cure for everyone when it comes to this issue. However, many designers share a lot of similar traits, so I’ve drawn upon my own personal experience (along with the experience of others) to offer a few useful remedies for this dreaded situation:

Go to Bed: Before you look at any other reason why your creativity is lacking, stop and think about how much sleep you are getting. Although this seems like a solution that is too simple to be true, I’ve known of countless situations where a designer was able to get their edge back simply by giving their brain the rest it needed. No one likes to admit it, but if you’re not getting enough sleep, you’re simply not going to be able to be on top of your game.

Turn Off Your Computer: Although all of your creativity is poured into the work you do in front of your computer, there are times when being in front of your computer for too long can be a detriment to your talents. If you are stuck in a creative rut and can’t remember the last time you spent time outside, turn off your computer and go for a walk in the park. Take a nice long stroll and spend time looking out all of the beautiful color that nature has to offer.

Don’t Cut Yourself Off at the Knees: Being under pressure is a great way to drain yourself of all your creative energy. Therefore, when you are going through the process of starting a project with a new client, give yourself breathing room. If you estimate that the project is going to take two weeks to complete, create some flexibility for yourself by telling the client that you will need three weeks to complete the project. This extra time will ensure that you are able to deliver a finished result that is top notch quality.

Quit Juggling: Thanks to computers and all of our other wonderful devices, it’s possible for us to do a lot of things at once. However, more and more people are starting to realize that this constant multi-tasking may not actually increase productivity. So, if you’re having problems finishing your real work, turn off your phone, close your e-mail inbox and focus on the one task that you need to accomplish.

CSS Font and Text Style Wizard: This free online tool allows you to experiment with different text and font styles. The CSS Font and Text Style Wizard allows you to customize the following options: font-family, font-style, font-variant, font-weight, font-size, line-height, word-spacing, letter-spacing, text-decoration, text-transform, text-align and text-indent. Each time that you make a change to your selection, the sample text on the page will automatically update to reflect your new customization. If you find a font and text style combination that you like, you can directly copy the CSS and HTML source code for that combination and use it in your own project.

I Like Your Colors: If you come across a website with a color scheme you like, you can use the I Like Your Colors tool to extract the color scheme from that website. All you have to do is copy the website’s URL and paste it into the I Like Your Colors form (which is located at the bottom of the page). The tool will then return the hex code for each color that is being used.

Accessible Form Builder: This tool allows you to build forms using a CSS layout or a table layout (most designers will probably choose to use the CSS layout option). Simply select which style of form you want to build, and then you will be taken to a page where you can enter each input field you want your form to use. Once you enter all of your inputs, the tool will generate the source code, which you can copy and paste into your website.

prettyprinter.de: If you need to format your source code (for example, to print it out for reference), this tool will save you a lot of time! Simply paste your code into the tool, choose which of the twelve options you want the tool to apply, and your code will be formatted into a clean, printable version.

As I said, there are a lot of different ways that people can use Twitter. However, one concrete use for Twitter is connecting with other people in your industry. If you are a web designer, Twitter can be a great way to network with other web designers. Not only can networking be useful in helping you find new clients, but having designers you can interact with on Twitter can be a great way to brainstorm and get solutions to your problems.

Although you will be able to find a lot of web designers once you start exploring the Twitter network, here are eight designers that I think any web designer should follow:

Chris Pearson: Chris Pearson is responsible for creating some of the most popular free and premium themes for WordPress, including Thesis, Neoclassical, Copyblogger, Cutline and PressRow.

Snook: With over 4,500 followers, Snook is one of the most popular designers on Twitter. Snook is based out of Canada, and offers his design and development services on a freelance basis.

David Airey: A design consultant and graphic designer, David Airey has worked for a wide variety of clients, including Komplett Fitness, Tudor Bourn Collection and Dosh Dosh. Subscribing to his Twitter feed with also let you know when his blog is updated, which receives quite a few comments on every post.

Veerle Pieters: With over 4,000 followers, Veerle Pieters is another one of the most popular designers on Twitter. She is the founder of Duoh!, which is a design company that has worked on projects like “The Learning Page” for the US Library of Congress.

Steven Snell: In addition to being a blogger and freelance writer, Steven Snell is a designer for Vandelay Design, which offers custom website design services. His blog covers a wide variety of design topics, ranging from Photoshop to WordPress themes.

Brian Gardner: Brian Gardner has created a wide range of WordPress themes, including the Revolution series of themes. Brian is currently in the process of converting the Revolution series from premium themes to an open source project, which is a topic that has caught the attention of many WordPress designers.

Adii: Adii is a popular (self-taught) WordPress designer and developer, who has created a variety of premium WordPress themes. Currently, in addition to starting his own company ( {radiiate} ), Adii is one of the three designers behind WooThemes, which is a premium WordPress theme club.

Jason Santa Maria: Jason is a graphic designer from Brooklyn, New York. He is currently the Creative Director for Happy Cog Studios, which is a web design studio with locations in Philadelphia and New York.

Magneto: This is a robust eCommerce solution for websites that want to be ready for future growth. With the ability to control and customize every aspect of an online store, the features in the Magneto platform range from marketing through the creation of targeted micro-sites to built-in SEO features to fully functional order management. And as a designer, you can take advantage of the free designer’s guide to Magneto, which gives you all of the necessary documentation to develop top of the line themes for Magento.

Zen Cart: As its name implies, the Zen Cart is all about making the process of creating an eCommerce website as simple as possible. The Zen Cart was developed with the main requirements of both merchants and shoppers in mind. In addition to a laundry list of great features, on the design side of things, the Zen Cart uses an XHTML template system. On the Zen Cart website, you will find over fifty different articles that are related to the subject of template customization for the Zen Cart platform.

Freeway: Although Freeway is the last solution on the list, it is still worth checking out. What sets Freeway apart from other platforms is its inclusion of features that were previously available in enterprise class or niche bespoke systems. In addition to selling products, Freeway allows you to sell events, services or subscriptions. To get an idea of what’s possible with Freeway, you can take a look at the Freeway showcase page.

Firebug: If I had to pick one Firefox add-on that I couldn’t live without, it would have to be Firebug. There are a lot of great Firefox add-ons for designers (as you will see as you continue to go through this list), but none of them can top Firebug. For any web page, Firebug allows you to debug, edit or monitor CSS, HTML and JavaScript. Best of all, all of the work you do through Firebug is done live.

Typetester: Working with typography can be an extremely time consuming task. Fortunately, Typetester can help you cut down on the amount of time that you have to devote to this task. Typetester allows you to compare up to three different screen types at once. The Typetester website is made up of three different columns, and you can customize the type for each of the columns. In addition to picking a font, you can choose the size, leading, tracking, alignment, word space, decoration, color and background. Typetester also shows a variety of styles for each column, ranging from bold to uppercase italic to small caps italic.

View Formatted Source: Thie add-on for Firefox allows you to color-code and format source code, along with giving you the option to see the applicable CSS information for a specific element. This add-on also allows you to collapse and expand elements, such as table and span. One of the most time-saving features of this add-on is the ability to choose a block level element directly on the page that you are viewing, and then view the source of it.

Browsershots: As any designer knows all too well, checking to see if a new design is compatible across a wide variety of browsers and operating systems can be a major pain. Fortunately, the free Browsershots tool allows you to see how your website looks in multiple browsers and operating systems. Simply select the browsers in Linux, Windows, Mac OS and BSD you would like to test, and Browsershots will generate a screenshot of your website for each of those browsers.

MeasureIt: This is the perfect example of a tool that is extremely simple, but also extremely useful. With the MeasureIt add-on for Firefox, you can draw out a ruler on any web page and see the pixel height and width of the area you selected. It allows you to complete on-the-fly resizing tasks without the need to open up an additional program.

Luckily for you, the days of needing to start from scratch when you want to build a CSS menu are over. With CSS Menu Builder, you can create the perfect menu for any website. Whether it is a personal website, a company website or a website that you are building for a client, you can use CSS Menu Builder to create a clean looking CSS menu.

According to the information on the CSS Menu Builder homepage, the website has more than one thousand different menu combinations. This includes breadcrumb menus, more than thirty different horizontal menus and over seven hundred different vertical menus. In addition to offering over a thousand different menus, CSS Menu Builder allows you to apply a countless number of color combinations to any menu that you choose to use.

When you visit the CSS Menu Bulder homepage, you will see that it is quite easy to get started building a menu. The homepage allows you to choose whether you want to build a horizontal menu, a vertical menu or a breadcrumb menu. Once you select one of the three available options, you will be taken to the page where you can begin building your menu.

The first step in building your menu is selecting a background. Once you make your selection from one of the available backgrounds, you can move on to the next step, which is selecting an image for your menu. Whether you want the menu items to be square, tabbed, rounded, boxed or another style, you can select your desired shape from the numerous options on the menu images page.

After you select an image for your menu, you can go the menu colors page. This page allows you to customize the color of every image on the menu, including the background & background shading, inactive color & inactive shading and the hover color & hover shading.

Once you have customized the background, menu images and menu colors, if you are happy with the way that you menu looks, you can download the zip file for the menu you created. Once you download the zip file, if there are any additional tweaks that you would like to make, you can do so by opening the source code of the menu you created. For example, if you want to add additional items to the menu (by default, the items on the menu are Home, Products, About and Contact), you can edit the HTML once you download the zip file for your menu. You can also enter the proper link locations for each of the items on your menu (by default, the property for each link is set to #).

jQuery: jQuery is regarded by many as the most popular JavaScript framework for Ajax. With the slogan “Write Less Do More,” jQuery bills itself as a new kind of JavaScript library. The main goals of jQuery are to simplify HTML document traversing, animating, event handling and Ajax interactions. With these goals, jQuery strives to allow you to complete rapid web development. From Google to CBS to WordPress, there are a countless number of household brands that use jQuery to power their online properties.

MiniAjax.com: This website is a well-designed showcase of DHTML and AJAX scripts that you can download. As you will quickly notice once you visit the site, the featured scripts all have the same important characteristics: they are attractive, simple and useful. Although I haven’t had an opportunity to use all of the scripts listed on this website, some of my favorites that I have been able to use are ClickHeat, Ajax Poller and iTip.

jQuery Cheat Sheet: If you follow my advice and use jQuery (the first link on this list), you will want to have a cheat sheet that you can use for reference. Color Charge has created an easy to use cheat sheet, which is actually available in two versions. In addition to the printable version of their cheat sheet, Color Charge has also created a cheat sheet for the iPhone and iPod Touch (this version of the cheat sheet can be accessed even when you don’t have an Internet connection).

Hot Scripts: Hot Scripts is a collection of Ajax scripts and applications. Currently, Hot Scripts has 119 different Ajax scripts and applications that you can download (some are free, while others are commercial). The reason that I like this website is because of the way it is organized. Each script and application can be rated on a scale of 1-5, along with the ability for members to leave detailed reviews. You can also sort the list by title, hits, member ratings or member reviews.

AjaxDaddy: The characteristic that makes AjaxDaddy unique is that all of the scripts listed on its site can be taken for a test run via an instant demo. When you click on one of the scripts that is listed on the homepage, you will be taken to the listing page for that script. In addition to the source of the script, you will see a live demo. You can experiment with the live demo by changing the script source (which can easily be reset by refreshing the page). AjaxDaddy also allows visitors to leave comments on each of the scripts listed on the site, so you can read the thoughts of others or leave your own for others to read.

ResizR: As you may have guessed from the name, ResizR is a free online tool for resizing images. While this is obviously not a new tool, ResizR makes the process of resizing an image as simple as possible. All you have to do is choose your picture (from your local computer or a URL) and choose the width of the image (ResizR keeps the image proportional). The power of ResizR is also available in a Firefox plugin. I have found this tool to be invaluable when I’m using my Mac, which unfortunately makes the process of resizing images more difficult than it should be.

CSS Creator: If you need a quick way to create a valid CSS layout, this handy tool allows you to create a fluid or fixed width floated column layout, with up to 3 columns, a header and a footer. Simply go through the tool’s short list of options and select your preferences, and in no time you will have a new layout that you can use.

Iconfinder: If you need icons for a project, you can save yourself a lot of time with Iconfinder. Iconfinder is an easy to use search engine that is dedicated to icons. For example, if you type in the word “home,” Iconfinder will return nearly fifty different icons that you can easily browse through and download for your project.

Splashup: Although it’s still not a replacement for an advanced piece of photo editing software, Splashup is quite impressive for being a free, web based tool. Offering everything from brushes to filters to layers, most designers will be impressed with the wide range of features thatSplashup has to offer.