Gray vs Grey in CSS. What Is the Right Choice?

Marilena

By Marilena

1 min read
Bookmark this post

Gray VS grey? Is there a right choice between these two? It is well known that both gray and grey in CSS are considered equivalent with no impact on functionality. We can use either of them without any issues. In the context of web development and CSS, they are both recognized and accepted. CSS specifications and web browsers accommodate both equally.

– Why 🤔 do web designers and programmers use both gray and grey in CSS?

– Because they wanted to add a little color to the spelling debate! 😂😂

Below we can see an example of two elements. We set gray for the first element while the second element has grey:

/* Using "gray" (American English) */
.first-element {
  color: gray;
}

/* Using "grey" (British English) */
.second-element {
  color: grey;
}
CSS

Both examples are correct, and your CSS should be functional. The “first-element” and “second-element” pair will share the same color, as CSS treats gray and grey interchangeably.

It turns out that the choice between gray and grey in CSS is primarily a matter of personal preference and doesn’t affect how web browsers interpret your code. You are free to use either.

Similarly, there are other color names with variations in spelling that are recognized by most modern browsers, for example, “lightgray” and “lightgrey” or “darkgray” and “darkgrey” are all valid. 😃

🌼 Hope you found my post interesting and helpful. Thanks for being here! 🌼

DigitalOcean Referral Badge
guest
0 Comments
Inline Feedbacks
View all comments

Continue reading

Front, Programming

Learn How to Select Only the CSS First Child

Front, Programming

The CSS nth-of-type Selector – How To Target Elements By Type

Front, Programming

What You Need to Know About CSS nth child Selector – A Practical Guide

Front, Programming

CSS Selectors nth-child VS nth-of-type And How To Use Them Correctly

Front, Programming

Coding Made Easy With CSS Selectors: An Ultimate Guide

Front, Programming

How to Center in CSS Using Different Ways

Front, Programming

What You Need to Know About CSS Color Methods

Programming

Most Common Typescript Errors and How to Solve Them

Front, Programming

Make Your Work Easier by Using Variables in CSS

Front, Programming

CSS Rainbow Text: How To Make Astonishing And Vibrant Fonts

Front, Programming

Most Useful HTML Elements for Maximizing Better Results

Back, Programming

Environment Variables 101: Secure Your Secrets Like a Pro

Subscribe to our newsletter

Dive into the Fun Side of Tech! Posts, News, and More Delivered to Your Inbox!

Intuit Mailchimp