Basic CSS

Home / Topic / Basic CSS / Colors and Backgrounds in CSS

Colors and Backgrounds in CSS

In this chapter, we will explore how to add color and backgrounds to elements of our webpage using CSS. The ability to control colors and backgrounds is fundamental to creating visually appealing websites.

Colors in CSS

CSS allows us to control the color of elements in various ways. We can apply colors to different aspects of an element, such as text, borders, and backgrounds.

`color` Property

The color property is used to change the color of an element's text. The color can be specified in several ways in CSS: using color names, hexadecimal values, rgb, or hsl.

css

"Here we are applying a blue color to the text of all paragraphs with the color property."

Specifying colors

CSS offers several ways to define colors:

Color names: CSS has a list of predefined color names that you can use directly.
```
css
```
"We use the color name red to set the h1 title color to red."
Hexadecimal values: Hexadecimal values consist of a # symbol followed by six digits (0-9 and A-F) representing the red, green, and blue components.
```
css
```
"In this case, we use a hexadecimal value to set the paragraph color to an orange shade."
rgb values: The rgb() format allows specifying color using red, green, and blue values ranging from 0 to 255.
```
css
```
"Here we are using the rgb function to apply a shade of green to the div."
hsl values: The hsl() format is based on hue, saturation, and lightness. It is a more intuitive alternative to rgb for some cases.
```
css
```
"Here, we use the hsl format to apply a pure blue color to the span, based on hue, saturation, and lightness."

Comparison table between color names, hexadecimal, and rgb Comparison table between color names, hexadecimal, and rgb

`background-color` Property

The background-color property defines the background color of an element.

css

"This CSS rule applies a light gray background color to all div elements."

You can also use the same ways to specify colors seen before (hex, rgb, hsl), just like with the color property.

Colors with transparency (`rgba` and `hsla`)

CSS also allows you to define colors with transparency using rgba() and hsla(). The fourth value in these formats represents the opacity level, where 0 is completely transparent and 1 is completely opaque.

css

"In this example, we apply a semi-transparent red background to a div. The fourth value in the rgba function is 0.5, indicating 50 percent transparency."

Background images

The background-image property is used to set an image as the background of an element. You must provide the URL of the image you want to use.

css

"Here, we apply a background image to the body of the page. The image comes from the file background.jpg."

Controlling image repetition

By default, background images repeat both horizontally and vertically to cover the element area. You can control this with the background-repeat property.

css

"Here, we apply a background image to the div and disable repetition, making the image appear only once."

Other options include:

repeat-x: Repeats the image only horizontally.
repeat-y: Repeats the image only vertically.
space and round: Distribute the image evenly.

Positioning background images

The background-position property defines where the background image is placed within the element. You can use keywords (top, center, bottom, left, right) or specific values in pixels or percentages.

css

"Here, we place the background image in the center horizontally and at the top of the header element."

Background image size

The background-size property allows you to adjust the size of the background image. You can use specific values, percentages, or keywords like cover or contain.

css

"We use the background-size property with the value cover, which ensures that the image covers the entire element area without distortion."

Gradients as backgrounds

CSS also allows you to create gradients as backgrounds using the background-image property combined with gradient functions.

Linear gradient

A linear gradient transitions from one color to another along a straight line. You can specify the angle and colors.

css

"This is an example of a linear gradient. It transitions from red to blue from left to right in the background of a div."

This image shows linear gradients This image shows linear gradients

Radial gradient

A radial gradient transitions from one color to another in a circular pattern.

css

"Here we apply a radial gradient that transitions from yellow to green in a div. The gradient forms concentric circles."

This image shows radial gradients This image shows radial gradients

Conclusion

In this chapter, we have learned how to apply colors and backgrounds to elements of a webpage. Knowing how to use colors and backgrounds effectively is key to enhancing the visual design of any website. In the next chapter, we will explore properties related to typography to control how text is displayed on our pages.

Back to previous chapter

Mark as read and continue