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

kabir k
PLUS
kabir k
Courses Plus Student 18,036 Points
Posted by kabir k
kabir k
Courses Plus Student 18,036 Points

grey vs. gray

In the Class Selectors lesson, they used the British spelling "grey" and not the American spelling "gray" as the value of the background property

Why is this? And can we use the American spelling "gray" instead of "grey"?

Here's a sample of the CSS code:

.primary-content { background: grey; }

3 Answers

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

I just used both in the Safari Dev Tools and they worked. I'm not sure why the instructor used one over the other, but they both seem fine to use. At least in Safari.

kabir k
kabir k
Courses Plus Student 18,036 Points
kabir k
kabir k
Courses Plus Student 18,036 Points

Thanks, Samuel. By the way, how do you access the Safari Dev Tools?

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

Go to the menu bar and click Safari>Preferences. When the window pops up, click the Advanced tab. At the bottom, there should be an option Show Develop in menu bar. Check that off. Now in the menu bar there should be a tab called Develop. Click it and pick the Show Page Source option.

Or, you can just right click anywhere on a web page and select Inspect Element.

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Kabir,

You can use either spelling for your colors in all modern browsers. "grey" is the exact same as "gray" so you can interchange them. They're both included to accommodate both spellings. Even some of the other gray/grey color keywords work like that such as "slategrey" and "slategray".

Marcus Parsons
Marcus Parsons
15,719 Points

An easy way to test this is to bring up your web console in either Chrome or Firefox and typing these in one at a time (or copy and pasting one at a time):

document.body.style.backgroundColor = "grey";
document.body.style.backgroundColor = "gray";

You'll see that there's no difference in between the two colors.

Christopher Sea
Christopher Sea
3,726 Points
Christopher Sea
Christopher Sea
3,726 Points

They are different colors:

Grey= #D3D3D3 OR Gray= #808080