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

General Discussion Build a Simple Website Styling Content Fonts and Colors

Posted by Kayla Skarbakka
Kayla Skarbakka
1,474 Points

Ordering CSS Values

Quick question: In the Fonts & Colors HTML lesson, I noticed that with the font-family, the fallback choice of sans-serif appears after the preferred Nunito font:

font-family: 'Nunito', sans-serif;

However, for the background, the fallback color comes before the preferred background image:

background: #420600 url('img/bg-texture.jpg') repeat;

Does the order not matter for the background, or can browsers somehow tell that they should try for the image first? Does the comma between font-family values have something to do with this difference?

Thanks!

1 Answer

Luke Roberts
Luke Roberts
7,552 Points
Luke Roberts
Luke Roberts
7,552 Points

With the background image

It is the order in which background gets parsed by the browser, so you need to put values in the right order, but can omit certain values which the browser will then apply it's own default styling. so for example if I was to say

background: url(image.jpg) repeat-y;

the browser would apply that but it would also put it's own default declarations which may be something like

background: transparent url(image.jpg) 0% 0% repeat-y

For font-family it's a case of, if no excess typefaces besides the default choice of "sans-serif" are declared, it does not need to put in a contingency, it just outputs the default which may be "sans-serif".

And for web performance, the browser reads css from right to left, so therefore it would just see that initial value when reading it, and apply that if no further declarations are made.

So to summarise, background - browser needs to have values for each part of the declaration - (great smashing magazine article here - http://coding.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/

font-family - because no more values NEED to be specified and web performance.

I hope thats helped :)