How to Create Clean CSS – Part 1

Creating great looking designs takes alot of practice. I don’t claim to be a great designer myself, but I try! I find that my designs improve with each new website. I don’t want my readers to confuse this article with art and illustrations. While these certainly make up a great deal of a beautiful design, this article will cover how we can use css (Cascading Style Sheets) to make your site look great.

In this part 1 I will be using a simple box show the difference between ugly css styles, and how you can improve them. So lets get going already with the example.

Mr. Coffee© Coffee Maker – Red
Price: $19.95
Shipping: $5.95
Description: 12c Coffee Maker- Red Brewing Pause n Serve lets you pour a cup of coffee while the coffeemaker is still brewing. Removable Filter Insert lifts out of Brew Basket for fast and easy filling and cleaning. 2-hour Auto Shut-Off keeps your coffee warm for 2 hours and then automatically shuts off. Delay Brew allows you to program the clock up to 24 hours in advance to begin brewing at a specific time.

Wow, Thats ugly

All the information and functions that are needed for this product is here, but it looks very cluttered and unprofessional. Lets begin fixing this beast by add in some spacing, we dont want anything to be touching, becuase its messy.

Mr. Coffee© Coffee Maker – Red
Price: $19.95
Shipping: $5.95
Description: 12c Coffee Maker- Red Brewing Pause n Serve lets you pour a cup of coffee while the coffeemaker is still brewing. Removable Filter Insert lifts out of Brew Basket for fast and easy filling and cleaning. 2-hour Auto Shut-Off keeps your coffee warm for 2 hours and then automatically shuts off. Delay Brew allows you to program the clock up to 24 hours in advance to begin brewing at a specific time.

Better…

After adding some padding, this product is already starting to look better. This is where I’d like to play with the colors. The colors in example 2 are just plain ugly and too much gray is like pumping poison into a design.

Mr. Coffee© Coffee Maker – Red
Price: $19.95
Shipping: $5.95
Description: 12c Coffee Maker- Red Brewing Pause n Serve lets you pour a cup of coffee while the coffeemaker is still brewing. Removable Filter Insert lifts out of Brew Basket for fast and easy filling and cleaning. 2-hour Auto Shut-Off keeps your coffee warm for 2 hours and then automatically shuts off. Delay Brew allows you to program the clock up to 24 hours in advance to begin brewing at a specific time.

Wow, much different

A good color scheme is very important to a great design. There are many ways to get some good colors. Try choosing a color scheme before you start your design, that way things will stay consistant.

I’m still not happy with my product box, I’ll do a little bit more tweaking on the css styles, and see how I can make this look more elegent.

Mr. Coffee© Coffee Maker – Red
Price: $19.95
Shipping: $5.95
Description: 12c Coffee Maker- Red Brewing Pause n Serve lets you pour a cup of coffee while the coffeemaker is still brewing. Removable Filter Insert lifts out of Brew Basket for fast and easy filling and cleaning. 2-hour Auto Shut-Off keeps your coffee warm for 2 hours and then automatically shuts off. Delay Brew allows you to program the clock up to 24 hours in advance to begin brewing at a specific time.

I like this now

So without changing the layout or adding any custom graphics, we went from a basic and quite ugly design, to one that is clean and elegent. This is a great example of how a existing design can be updated, with little effort. This also shows us the great thing about using css, we can drastically change a layout with very little effort.

Of course there alot of other css tricks I could do to better this layout. What are some ways you keep your designs clean and professional? What would you do to better my example? Thank you for reading, if this article was helpful, please help with this site by clicking the social links below :)

 
 
Leave A Reply Here

  Username [*]

  Email Address [*]

  Website

Subscribes to this post comments updates

Please Note: All comments maybe under going moderation so there is no need to resubmit the comments. it will appeared when admin approved it, feel free to subscribes to the post comments rss to stay update