[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2011-10-29
2
Medium Priority
?
192 Views
Last Modified: 2012-05-12
Hi,

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);
}

or 

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

Open in new window


Thank You.
0
Comment
Question by:techin4
2 Comments
 
LVL 16

Assisted Solution

by:jessc7
jessc7 earned 1000 total points
ID: 37051254
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).
0
 
LVL 8

Accepted Solution

by:
Jesse Matlock earned 1000 total points
ID: 37051720
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):
http://css-tricks.com/855-specifics-on-css-specificity/
http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
http://www.htmldog.com/guides/cssadvanced/specificity/
http://www.w3.org/TR/CSS2/cascade.html#specificity

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!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Course of the Month19 days, 22 hours left to enroll

872 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