Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Selectors Class Selectors

Posted by Unsubscribed User
.a{fill-rule:evenodd;}techdegree
Unsubscribed User
Front End Web Development Techdegree Student 3,955 Points

Order of operations

So, I noticed that there was a property listed two ways:

border-bottom: 10px solid lightgrey;

and

border-bottom solid 10px lightgrey;

Both worked. Is there a convention that is followed in terms of listing the values?

Thanks,

  • D

3 Answers

Ethan Ede
Ethan Ede
11,575 Points
Ethan Ede
Ethan Ede
11,575 Points

On W3C, they indicate the properties should be set in the following order: border-width, border-style, and border-color. However, on MDN, they indicate that shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but you can run into problems when several properties can have identical values, e.g. margin and padding with top, right, bottom and left properties.

Also of interest: it does not matter if one of the values are missing, e.g. border: solid #ff0000; is allowed.

More info from MDN on shorthand properties can be found here.

Good coding, and hope this was helpful!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

changed comment to answer

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,858 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,858 Points

Hey Dominic,

There is really no specified order. The three properties can be listed any order and one or two can even be omitted. See the MDN Docs.

In my personal opinion, I like the border-bottom: 10px solid lightgrey; order, and from what I've seen, it seem to be the most popular order.

Keep coding! :dizzy:

Unsubscribed User
seal-mask
.a{fill-rule:evenodd;}techdegree
Unsubscribed User
Front End Web Development Techdegree Student 3,955 Points
Unsubscribed User
.a{fill-rule:evenodd;}techdegree
Unsubscribed User
Front End Web Development Techdegree Student 3,955 Points

Thank you both for the great answer and especially the resources. I will start being more diligent about checking on MDN. It seems like a treasure trove of info!