12. Colors and backgrounds in CSS

Chapter 12 of our e-book focuses on a crucial aspect of CSS, namely colors and backgrounds. Colors and backgrounds are an integral part of web development as they help define the look and feel of a website. They can be used to highlight important information, create contrast, and add visual depth to a design. In this chapter, we'll explore how to use colors and backgrounds in CSS to create attractive and effective designs.

Defining Colors in CSS

In CSS, colors can be defined in several ways. The most common way to define colors is by using predefined color names such as 'red', 'blue', 'green', etc. However, this approach has its limitations as there are only around 140 predefined color names available.

To have more control over colors, you can use RGB, HEX or HSL values. RGB (Red, Green, Blue) values ​​define color using a combination of red, green, and blue. Each of these color components can have a value between 0 and 255. For example, 'rgb(255,0,0)' represents the color red.

HEX values ​​are a hexadecimal representation of RGB values. They start with a hashtag sign (#) followed by six digits. The first two digits represent red, the next two represent green, and the last two represent blue. For example, '#FF0000' represents the color red.

HSL (Hue, Saturation, Lightness) values ​​define color using hue, saturation, and lightness. Hue is represented as an angle on the color wheel (from 0 to 360 degrees), saturation is represented as a percentage (from 0% to 100%), and luminosity is also represented as a percentage (from 0% to 100% ). For example, 'hsl(0,100%,50%)' represents the color red.

Defining Backgrounds in CSS

In CSS, backgrounds are defined using the 'background' property. This property is a shortcut property for several other properties, including 'background-color', 'background-image', 'background-repeat', 'background-position' and 'background-size'.

The 'background-color' property defines the background color of an element. It accepts the same color values ​​that we discussed in the previous section.

The 'background-image' property defines a background image for an element. It accepts a URL that points to the image you want to use as the background. For example, 'background-image: url("image.jpg")' sets the image 'image.jpg' as the element's background.

The 'background-repeat' property defines whether and how a background image should be repeated. It accepts values ​​such as 'repeat', 'repeat-x', 'repeat-y' and 'no-repeat'.

The 'background-position' property defines the starting position of a background image. It accepts values ​​such as 'left', 'right', 'top', 'bottom', 'center', or specific coordinates.

The 'background-size' property defines the size of a background image. It accepts values ​​such as 'auto', 'cover', 'contain', or a specific size.

Conclusion

Colors and backgrounds play a crucial role in creating attractive and effective website designs. In CSS, you have a large amount of control over how colors and backgrounds are defined and displayed. By mastering these aspects of CSS, you will be well equipped to create visually appealing websites that stand out from the crowd.

We hope this chapter has provided you with a clear understanding of how to work with colors and backgrounds in CSS. In the next chapter, we will explore another important aspect of CSS: the layout and positioning of elements.

Next page of the Free Ebook:

59Pseudoclasses and pseudoelements in CSS

3 minutes