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

Back, Programming

What Is A Cron Job? Everything You Need To Know About The Ultimate Task Manager

Front, Programming

Contrast And Brightness: Empower CSS Filter For Powerful Images

Front, Programming

The Unique CSS Opacity – Check Out This Amazing Property

Front, Programming

Most Useful HTML Elements for Maximizing Better Results

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

Subscribe to our newsletter

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

Intuit Mailchimp