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
Katsumi Suno
4,194 PointsDiffrence between diffrent kind of quotation for "font-family"?
While doing the courses I'm making a personal wiki for things I learned and things I might go back and read again. For all the CSS properties I additionaly check out w3schools.com for more infos.
I found that they use "" for the font-family declaration (it's '' in the video). Furthermore I found in their code testing thing that it works with "", '' and even without any quotation.
What exactly is the diffrence and are there any recommendations about when to use which to maybe prevent potential errors?
2 Answers
Dan Garrison
22,457 PointsHTML and CSS are not quite as strict as say Python where if you forget to indent it can prevent your code from compiling. So in some cases you could technically have errors or warnings in your CSS, but it will still display fine. For example, you get the following warnings if you put that code into the CSS Validator here: http://jigsaw.w3.org/css-validator/
"Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space."
So it seems the when the quotes are not included Times New Roman gets read as TimesNewRoman. I assume the browser must have been instructed to read TimesNewRoman as "Times New Roman". So it will still display correctly. This may not be the case for every font and other browsers may interpret it differently. So it's best to correct the errors and warnings that the CSS validator displays.
As for the difference between single quotes and double quotes, I think it is just a matter of personal preference on your CSS style sheet. The only time it matters is if you use the style tag to embed your CSS in your HTML.
Edit: Actually, I just realized I read that incorrectly. White space gets converted to a single space. So even if you leave off the quotes Times New Roman is still read the same. It would only be read differently if there are multiple spaces between the words. It's still best practice to correct these warnings though.
Dan Garrison
22,457 PointsYou can find the answer to this question here: http://www.w3schools.com/cssref/pr_font_font-family.asp
Essentially, you don't have to use quotations if there is no whitespace, or spaces between words, in the font name. If there is white space between characters, you must use quotations. So if you used Times New Roman as the font, you would have to put it in quotes. The font arial, would not need quotes around it.
Katsumi Suno
4,194 PointsHm, that would make sense but if I go the the "Try it yourself" code editor and put the following code:
font-family: Times New Roman, Courier, serif;
it should fall back to Courier because it shouldn't recognize the Times New Roman without the quotes, right? But actually it still renders the paragraph in Times.
And besides that, I still wonder if it matters which quotation marks I use, the single or the double ones... Well I guess it doesn't matter much as long as it works ^^ But I like to know such details and I got a bit confused. Maybe it depends on which browser you use...?
Katsumi Suno
4,194 PointsKatsumi Suno
4,194 PointsThank you for your detailed answer! Much obliged!