CSS Color Keywords

Cascading Style Sheets (CSS) offer a variety of ways to define colors for elements on a web page. One of the simplest and most intuitive methods is using color keywords. These keywords represent a set of predefined colors that can be easily applied to HTML elements. Let’s explore some commonly used CSS color keywords along with their hexadecimal values and practical examples.

Basic CSS Color Keywords

1. Red

The keyword red represents the color red. It can be used in CSS like this:

<p style="color: red;">This text is in red.</p>

2. Blue

The keyword blue represents the color blue. Apply it to an element in CSS:

<p style="color: blue;">This text is in blue.</p>

3. Green

The keyword green represents the color green. Apply it similarly:

<p style="color: green;">This text is in green.</p>

Extended CSS Color Keywords

1. DarkSlateGray

The keyword darkslategray represents a darker shade of grayish-blue. Apply it as follows:

<p style="color: darkslategray;">This text is in Dark Slate Gray.</p>

2. MediumVioletRed

The keyword mediumvioletred represents a medium shade of violet-red. Apply it to an element:

<p style="color: mediumvioletred;">This text is in Medium Violet Red.</p>

3. CadetBlue

The keyword cadetblue represents a pale blueish-green. Apply it in CSS:

<p style="color: cadetblue;">This text is in Cadet Blue.</p>

Additional Notes

• CSS color keywords provide an easy and readable way to define colors in your web design.
• These keywords can be used not only for text color (color property) but also for background colors and borders.
• Alongside these keywords, CSS also supports hexadecimal color values and functional notations for defining colors.

Experimenting with these CSS color keywords can add vibrancy and style to your web pages, making them visually appealing and easier to manage.

Remember, while CSS color keywords offer convenience, combining them with other color styling options provides greater flexibility in designing a visually compelling web experience.