Prev Next

CSS Color Keywords

CSS Color Keywords are predefined color names that can be used directly in styles to specify colors. These keywords include a variety of standard colors, system colors, and transparent values.

Key Topics

Standard Colors

Standard color keywords include basic colors like red, blue, green, and black. These are widely supported across all browsers.

<style>
        .standard-color {
            color: blue;
        }
</style>
<p class="standard-color">This text uses the color keyword blue.</p>

Explanation: The color property is set to the keyword blue, one of the predefined standard colors.

Extended Colors

Extended color keywords include a wider range of colors like orchid, gold, tomato, and dodgerblue. These provide more variety for web designs.

<style>
        .extended-color {
            color: tomato;
        }
</style>
<p class="extended-color">This text uses the color keyword tomato.</p>

Explanation: The keyword tomato is part of the extended color keywords and provides a reddish-orange hue.

Transparent Keyword

The keyword transparent sets an element's background or color to be fully transparent. It is equivalent to rgba(0, 0, 0, 0).

<style>
        .transparent-bg {
            background-color: transparent;
            border: 2px solid black;
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
</style>
<div class="transparent-bg">Transparent Background</div>

Explanation: The transparent keyword is used to make the background fully transparent, showing the underlying content or background color.

Key Takeaways

  • Standard Colors: Include basic colors like red, blue, green, and black.
  • Extended Colors: Provide additional variety with colors like orchid, gold, and tomato.
  • Transparent Keyword: Sets an element's color or background to fully transparent.
  • Ease of Use: Color keywords are simple to use and improve readability in stylesheets.
Prev Next