30 Tips for Writing CSS


CSS has given an unmatched flexibility to us for doing styles without lengthy coding. Now we don‘t have to approach programmers for minor changes in our website. You just need a go through basics for the introductory knowledge in CSS and Hurray! You can also become a stylist of your website. Learn some really cool tips here.

CSS has been always a marvelous language for creating web pages. It‘s better to learn from other‘s mistake than to commit your own. Some generous designers/developers have posted really good tips and techniques to save time and effort and to excel CSS. So have a look on following tips as each one will teach you a different thing.

Cascading Style Sheets (CSS) is a language which is widely used in the web development as it facilitates in creation of quality web pages. Using CSS rather than tables for layout saves user bandwidth while enhancing the underlying semantics, accessibility and reach. CSS has continued to play an important role in web designing and its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document. However, the ease of using this language depends upon the nature of project which you are working on. It is necessary to understand the basic fundamentals of this language, no matter you opt this for a bigger project or just to redesign your blog.

This article will introduce you with some of the tricks, techniques and methods to write CSS so that it can provide you with the best outcome.

Note: All the necessary points mentioned below are presented before you assuming that you have an intermediate knowledge about the CSS coding and should consider these while writing CSS. However, there are still lots of minor details which are not included in this article but the necessary ones are surely going to help you all your way.

01. Start With A Blank Page

It is always good to start with a blank page and include your header, footer, navigator and a sample of content in that page and then start adding your HTML markup followed by adding your CSS. This method works much better and without any complexities.

02. CSS Reset

A repetitive writing of specific CSS codes can become little tiring and boring as well therefore instead of using the global Reset, use CSS Reset style sheet which has been launched by the industry leaders so that you can get all your browsers to display all the items properly.

03. Table Of Contents

Using a table of content from the beginning will enable you to view your CSS file and find where the specific items in your code are before they even have to scroll.

04. Containing Floats

You need to keep in mind that the content should be designed to stay within the container. Something which is going out of the container, would be clipped off. If you are shifting things using negative margins outside the container, that will also get clipped.

05. Go For CSS Inheritance

Suppose you have provided multiple child elements of a parent element and that too using same style on the web page then it will be better for you to define them for their parent element only and allow CSS Inheritance to perform its task.

06. Collect All CSS Classes

These are generally used for debugging but make sure that these are not used in the release version as you can use multiple class names, make use of them while debugging your mark up.

07. Class And ID Names

It will be better for you if you keep the naming structure of your CSS classes and IDs simple as it will allow you later to edit your codes and make necessary amendments.

08. Organize Your CSS Alphabetically

Organizing the properties of your CSS style coding alphabetically helps you to search for specific properties at great ease. Always try to organize your CSS classes, IDs and rules in an alphabetical order. It helps your work to manipulate easily.

09. Combine Multiple Selectors

If your CSS selectors have a common style definition then combining them into a single one will be of more advantage for you.

10. Be Careful While Adding CSS Properties

Do not try to add as many CSS properties as possible, it spoils your coding. Use properties only if they are suitable according to the layout.

11. Avoid Unnecessary Selectors

The definitions while writing CSS should be confined up to some extent and be used only if they are required, also try to get the overall design so that the view can be loaded quickly.


12. A Clear Format For Coding

Try to be very precise while coding CSS. Mention one idea for one line and multiple if there are many. This will enable you to recode CSS on a much easier basis.

13. Use Short Hand CSS

Using shorthand CSS provides you with a shorter way of writing CSS codes which automatically makes the codes tidy and easy to interpret.

14. Case Sensitive

As you might know that there is a difference between the upper case and lower case in CSS. Here it is important to understand that every definition‘s name must be identical to the tag written in order to work properly.

15. Understand The Overflow

By understanding that Internet Explorer doesn‘t handle the overflow effectively, it will be easier for you to understand the correct condition when the floats start dropping.

16. Avoid Redundancy

Using extra and duplicate declarations may increase the number of duplication in your CSS file.

17. Browser Support

Supporting a latest browser saves a lot of effort and time. While supporting the most recent browsers try to end up by using least hacks.

18. Use Elastic Layouts

As Elastic layouts have both fixed and fluid layout design advantages which is of great advantage as your layout will not break whenever the user resize their fonts/screen resolutions.

19. Import CSS Style

This another option available to you of importing CSS files, this will help you to write a single sentence on the header of the HTML file and leave the rest of the master file.

20. Add Proper Comments

Adding proper comments helps you to separate different sections of your CSS codes.

21. Define Connectivity For Links

The attribute is supposed to indicate a semantic link relationship from one resource to another and make use of the attribute selector for space separated lists of values.

22. Use External Style Sheets

This is always beneficial to separate your web content from presentation. Try to place all your CSS codes into external style sheets and use the link to reference style sheets within a page.

23. Try To Avoid Quotes In URL

There is a path within the bracket itself and it works regardless of any quote provided to it or not. Therefore, we should avoid to put any quote in the URL bracket.

24. Split Them If The Files Are Multiple

If you are working on a larger project, it is advisable to you that make your CSS separate into multiple groups in multiple files. It allows you to locate CSS code blocks instead of searching one main file with thousands of line.

25. Add Proper Comments

Using the right comment at right place is very important. Be careful while writing any comment in between your coding.

26. Try To Be Consistent

As there are so many debates attached to writing CSS therefore, it is suggested to stick with one particular format which you have started following. Start to develop your own sub-language of CSS which allows you to quickly name the things.

27. Select Suitable DOCTYPE

This is an important factor to consider while writing CSS as it decides whether or not your Markup and CSS will validate or not.

28. Use Firebug

Firebug is a tool provided by Firefox an Chrome which helps you to modify and inspect and edit your CSS in real time. So if you haven‘t downloaded it yet, it advisable to get it as soon as possible.

29. Separate out Hacks

It is part of our routine activities to write conditional elements and hacks. However, you need to make it separate out from style.css files. Because if it gets mixed with coding part, then it will cause clutters to happen in between and hence could create problems in validation of the coding.

30. Experience Matters

If you got anything more useful which we might have missed, please feel free to share it via comments.

Nisha is the head blogger for Slodive.com. She loves tattoos and inspirational quotes. Check her out on google plus https://plus.google.com/u/0/116437517919411097994.


  1. Hi Friends,

    Can anybody have an idea about which of the below css code executes fast.

    1. Single line code
    2. Multiline code

    for e.g.
    .rakshit { padding:10px; margin:10px; border:1px solid #000; color:10px; }
    .rakshit {
    border:1px solid #000;

    I read somewhere that one line code execute faster than multiline code. If it is so than designer/developer must write the code in single line to speedup the web page load instead of preety look.

    I hope someone is having the answer of this.


  2. Those are super tips for writing css but i learned css from online seeing tutorials and videos now i think that i need to know more and more to understand those…thanks for such nice tips..

  3. Consistency & code organization is key, I often look at older style sheets when I started and think what the hell was I thinking? So hard to update those old sites, might as well redo them! At least now I have got in a good habit, most the items listed in this article are standard for me.

  4. Among these 30 tips some of the tips are old for me and some of the tips are new to me. Surely these 30 tips will help a lot to beginners.


Please enter your comment!
Please enter your name here