CSS Colors

Colors are fundamental elements in the design of a web page, as they can convey emotions, highlight important content and make the user experience more pleasant. In CSS, there are several ways to define colors, either through keywords, numerical values ​​or hexadecimal codes.

Keywords

Keywords are the simplest way to define colors in CSS. They are representations of common colors such as "red", "blue" and "green". In addition, there are also keywords that represent shades of gray, such as "gray" and "silver".

See an example:

  
    h1 {
      color: red;
    }
  

In this case, the page title will be displayed in red.

Numeric Values

Numeric values ​​are another way to define colors in CSS. They are represented by three numbers ranging from 0 to 255, which correspond to the intensities of red, green and blue, respectively. This technique is known as RGB (Red, Green, Blue).

See an example:

  
    h1 {
      color: rgb(255, 0, 0);
    }
  

In this case, the title of the page will also be displayed in red.

Hex codes

Hex codes are the most accurate way to define colors in CSS. They are represented by six alphanumeric characters ranging from 0 to F, which correspond to the intensities of red, green and blue, respectively. This technique is known as HEX (Hexadecimal).

See an example:

  
    h1 {
      color: #FF0000;
    }
  

In this case, the title of the page will also be displayed in red, but with a more precise hexadecimal code.

Transparency

In addition to defining the colors, it is also possible to define the transparency of an element in CSS. This is done through the "opacity" property, which varies from 0 to 1, with 0 being completely transparent and 1 being completely opaque.

See an example:

  
    h1 {
      color: rgba(255, 0, 0, 0.5);
    }
  

In this case, the title of the page will be displayed in red with a transparency of 50%.

Conclusion

In summary, colors are essential elements in the design of a web page and in CSS there are several ways to define them. Whether through keywords, numerical values ​​or hexadecimal codes, the important thing is to choose the right color for each element and convey the desired message.

Now answer the exercise about the content:

_What is the most accurate way to define colors in CSS?

You are right! Congratulations, now go to the next page

You missed! Try again.

Article image Gradients in CSS

Next page of the Free Ebook:

9Gradients in CSS

3 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !

Get it on Google Play Get it on App Store

+ 6.5 million
students

Free and Valid
Certificate with QR Code

48 thousand free
exercises

4.8/5 rating in
app stores

Free courses in
video, audio and text