How to beautify your Cascading Style Sheet

If you are unfamiliar with html, html5, or xhtml, then this will help you in the future with your online projects.  If you are a stranger to cascading style sheets, I will help you out.

CSS DOCUMENT: They are external styling for your html document that provide a cascading linear progression of style for the server to follow as it loads your page.

A css style sheet is extremely important for organizing large chunks of style data.  It also provides a cleaner work space to peruse if there is an issue. (And believe me, soon or later there is always something that goes wrong with your webpage where you will need to analyze your style sheet.)

There are many times when my css sheet gets bogged down with notation, as I’m sure your’s will.  If you want to beautify it you will simply head to a free code beautifier on the web like “”  You can either imput your css’s url or you can copy and paste from dreamweaver or notepad to start the process.

I chose to imput my code into the script reader by copy and paste in Dreamweaver.

After you’ve inserted your code, read over the options to the right. You can decide whether you are comfortable with the options the program presents.  You can choose to delete css if it is wrong or not short-hand.  You can choose to sort properties and selectors.  There are a myriad of options for your needs.  If you aren’t sure which to choose just go with the default selections on the program.

After this is done, you will click “process css” in this program, the bright blue button just below the text window I copied my css into.

This (more than likely) give you messages that the program saw with your code and corrected.  You can view the messages below the button you just pushed.

The program will show that it has optimized your shorthand notation (aka changed 12px to 12 or changed a deprecated piece of code to a more functional code).  This is so much easier for a beginning web designer like yourself to organize your css code.  This tool will be especially helpful when you read back through your code to edit the layout and design of your webpage.  If you have any questions, let me know! Good luck on your webpages! 🙂


~ by scw32 on November 1, 2011.

One Response to “How to beautify your Cascading Style Sheet”

  1. I think I could’ve presented a more popular issue to the class, instead of just a css beautifier. Though many people are unaware there is free downloadable software that does this, the post was still a little out of the blue and could’ve been better put together. I liked my photos in combination with my text, but the important stuff like the topic should’ve been better thought out.

Comments are closed.

%d bloggers like this: