Is there a proper order I should write my CSS propperties?

Posted on 2011-10-29
Last Modified: 2012-05-12

I was wondering if there should be a specific order when writing my CSS properties?

For example:

#nav {
   color: #ffffff;
   font-size: 25px;
   margin: 25px;
   background: url(nav/example.png);


#nav {
   background: url(nav/example.png);
   margin: 25px;
   font-size: 25px;
   color: #ffffff;

Open in new window

Thank You.
Question by:techin4
    LVL 16

    Assisted Solution

    No, the order doesn't matter unless you have conflicting rules. For example:

    #nav {
       color: #ffffff;
       font-size: 25px;
       margin: 25px;
       background: url(nav/example.png);
       color: #000000;

    In this case, there are two color assignments. The last one in the order will take affect (#000000).
    LVL 8

    Accepted Solution

    The main thing to be careful, outside of setting values for a specific element,.. is your 'targeting' of elements. It's important to know that ID's have higher 'specificity' than CLASSES do.. etc.

    so if you target:
         #nav {....}

    and also:
         .menu {...}

    and your element is:
         <div id="nav" class="menu">.....</div>
    #nav styling will supersede that of .menu, even though .menu comes after it! (unless you apply !important to a specific property in .menu)

    This is known as selector specificity and you can learn more about that at the links below (in no certain order):

    However, coding of properties within one selector is largely a preference thing. Some developers code in alphabetical order, others (like myself) group like attributes (font properties, color, text-shadow.. all together, box-shadow, borders, bg are all together, etc.)

    Hope that helps!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
    Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now