Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Text Colors | Introduction to CSS
CSS Fundamentals
course content

Course Content

CSS Fundamentals

CSS Fundamentals

1. Introduction to CSS
2. Text Styles
3. Box Model and Element Spacing
4. Flexbox
5. Decorative Effects

bookText Colors

Applying text color

Text color can be added to a text element with the help of the CSS property color, giving it a value of any color. Modern browsers support three variants of color values: RGB, hex, and color names. Let's consider the following example. We will apply the color red to the text.

html

index

css

index

js

index

copy

Note

We can find some exciting color templates at colorhunt.co.

Background color

We can set the color of an element's background with the help of the background-color property.

html

index

css

index

js

index

copy

Ways to specify color

There are three main ways: color name, hex, rgb.

Color name

We can use reserved color words. The list of reserved colors can be found at htmlcolorcodes.com

Hex format

Hex represents colors as a six-digit code consisting of three pairs of two-digit values. Each pair represents the intensity of red, green, and blue (in that order).

Hex format values range from 00 (no intensity) to FF (maximum intensity).

RGB Format

RGB represents colors as a series of three numbers that correspond to the intensity of red, green, and blue (in that order)

RGB format values range from 0 (no intensity) to 255 (maximum intensity).

Note

Both hex and rgb values are widely used in web design, and the choice between them will depend on personal preferences and project requirements.

Transparency

Transparency in rgb colors can be achieved by using the rgba notation (red, green, blue, alpha), where alpha is the level of opacity or transparency of the color.

The alpha value can range from 0 (completely transparent) to 1 (completely opaque). For example, the RGBA value rgba(0, 255, 0, 0.5) represents a green color with 50% opacity.

html

index

css

index

js

index

copy
What is the main difference between hex and rgb color notation?

What is the main difference between hex and rgb color notation?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 1. Chapter 8
some-alt