Capitalizing CSS property values – What is the right way?

When capitalizing CSS property values, a key advantage is that CSS is not case-sensitive. 🪶 This means that no matter how you choose to capitalize your CSS values, either by using different letter cases, including lowercase, uppercase, or a combination of both, the browser will still understand all of them correctly.

The letter case used for color names in CSS does not impact how the browser interprets them

Here are some examples of this, using color properties:

• Lowercase: You may use all lowercase letters for color names. For example, “red”, “green”, “blue”, “orange” and “yellow” are all valid.

.element {
  background-color: green;
}

• Uppercase: Uppercase letters are also valid, so “RED”, “GREEN”, “BLUE”, “ORANGE” and “YELLOW” will be just fine.

.element {
  color: GREEN;
}

Combinations of both: You have the flexibility to use both uppercase and lowercase letters in color names. This lets you style color names according to your coding preferences or highlight specific parts of the color name.

.element {
  border-color: LightGreen;
}

No Impact on Interpretation: Regardless of the letter case used, the browser will correctly understand and apply the specified color. The choice of letter case is purely a matter of personal or coding style preference.

.element {
  color: LiGhtgreeN;
}

To sum it up, the letter case used for color names in CSS does not impact how the browser interprets them. 😃
Whether you opt for all lowercase, uppercase, or a combination of both, it’s up to your coding style or your development team’s coding standards. The important thing to remember is that the browser will understand and apply the specified color, regardless of the letter casing used.

That said, developers still often follow conventions. While browsers are forgiving of capitalization, one common standard practice is to use all lowercase for CSS property values.

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