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

Learn CSS Grayscale Filter the Easy Way: A Complete Guide

Front, Programming

CSS Radial Gradient Techniques: How To Make Colorful Infinite Loops

Front, Programming

CSS Linear Gradient Techniques: How To Make Colorful Line Drawings

Front, Programming

CSS Conic Gradient Technique: How To Make Stunning Visual Effects

Front, Programming

How to Make A Blinking Animation Using CSS

Front, Programming

How To Make CSS Reflection – The Easy Way

Front, Programming

How To Create A Stunning Gray CSS Water Drop

Front, Programming

What Does span Do in HTML? Unlocking Its Full Potential

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

Subscribe to our newsletter

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

Intuit Mailchimp