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

Make a Unique Folded Corner Effect – Step By Step Guide

Front, Programming

Keyframes in CSS Explained – Make Your Animations Stand Out

Back, Programming

How To Use Absolute Paths In A Node Project (2024)

Programming

Javascript Array Methods – Easy Examples That Make Learning A Blast

Front, Programming

How To Make CSS Reflection – The Easy Way

Front, Programming

The Unique CSS Opacity – Check Out This Amazing Property

Front, Programming

Contrast And Brightness: Empower CSS Filter For Powerful Images

Front, Programming

Opacity And Saturate: Empower CSS Filter For Unique Images

Front, Programming

CSS Last Child Selector – The Most Valuable Selector

Front, Programming

What Does span Do in HTML? Unlocking Its Full Potential

Front, Programming

Most Useful HTML Elements for Maximizing Better Results

Front, Programming

HTML Formatting Elements Made Simple: With Easy And Practical Examples

Subscribe to our newsletter

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

Intuit Mailchimp