Colors, Units & Backgrounds

Introduction

CSS allows you to control the appearance of web pages using colors, units, and background properties. These properties are essential for creating visually appealing, readable, and responsive websites.

Colors help you define the appearance of text, borders, and other elements. CSS units control sizes such as width, height, padding, margin, and font size. Background properties allow you to add colors, images, gradients, and other visual effects to elements.

In this tutorial, you will learn how to use CSS colors, understand common CSS units, and work with background properties using practical examples.

What You’ll Learn

By the end of this tutorial, you will understand:

• Different CSS color formats
• Named colors, HEX, RGB, RGBA, HSL, and HSLA
• Absolute and relative CSS units
• px, %, em, rem, vw, and vh
• CSS background colors
• Background images
• Background size and position
• Background repeat
• Multiple backgrounds
• CSS gradients
• Common mistakes and best practices

1. CSS Colors

Colors are one of the most commonly used features in CSS. You can use colors to style text, backgrounds, borders, buttons, links, and many other elements.

For example:

p {
    color: blue;
}

The color property changes the text color of an element.

CSS provides several ways to define colors.

2. Named Colors

The simplest way to specify a color is by using its predefined name.

h1 {
    color: red;
}

p {
    color: green;
}

body {
    background-color: lightgray;
}

CSS supports many named colors such as:

• red
• blue
• green
• orange
• purple
• black
• white
• gray
• yellow

Named colors are easy to understand, but they provide limited control over the exact color.

3. HEX Color

HEX is one of the most commonly used color formats in CSS.

A HEX color starts with # followed by six hexadecimal characters.

h1 {
    color: #ff0000;
}

Here:

• #ff0000 = Red
• #0000ff = Blue
• #008000 = Green
• #000000 = Black
• #ffffff = White

You can also use the shorter three-character format:

p {
    color: #fff;
}

#fff is equivalent to #ffffff.

4. RGB Colors

RGB stands for Red, Green, and Blue.

The RGB color model uses three values ranging from 0 to 255.

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

Here:

• 255 = Red
• 0 = Green
• 0 = Blue

Another example:

p {
    color: rgb(0, 128, 255);
}

RGB is useful when you want more precise control over colors.

5. RGBA Colors

RGBA is similar to RGB but adds an alpha value for transparency.

.box {
    background-color: rgba(0, 0, 255, 0.5);
}

The last value represents opacity.

For example:

• 1 = completely visible
• 0.5 = 50% visible
• 0 = completely transparent

RGBA is useful when you want a transparent background or overlay.

6. HSL Colors

HSL stands for:

• Hue
• Saturation
• Lightness

Example:

h1 {
    color: hsl(120, 100%, 50%);
}

HSL can be easier to understand when adjusting the appearance of a color.

You can also use HSLA when you need transparency:

.box {
    background-color: hsla(200, 100%, 50%, 0.5);
}

7. CSS Units

CSS units are used to define the size of elements.

For example:

.box {
    width: 300px;
    height: 200px;
}

There are two major types of CSS units:

Absolute Units

Absolute units represent fixed sizes.

The most commonly used absolute unit in web development is:

px

Example:

.box {
    width: 300px;
    padding: 20px;
}

Relative Units

Relative units depend on another value or the size of the viewport.

Common relative units include:

• %
• em
• rem
• vw
• vh

8. Pixels (px)

The px unit represents pixels.

.box {
    width: 300px;
    font-size: 18px;
}

Pixels are useful when you need precise control over an element’s size.

However, using pixels for everything can make responsive design more difficult.

9. Percentage (%)

The percentage unit is relative to another value, usually the size of the parent element.

.container {
    width: 80%;
}

If the parent container is 1000px wide, an element with width: 80% will generally have a width of 800px.

Percentages are commonly used for responsive layouts.

10. em Unit

The em unit is relative to the font size of the element or its parent, depending on the property.

For example:

.parent {
    font-size: 20px;
}

.child {
    font-size: 1.5em;
}

Here, 1.5em can result in a font size of 30px based on the parent’s font size.

Because em values can compound when elements are nested, beginners often prefer rem for predictable typography.

11. rem Unit

The rem unit is relative to the root element’s font size, normally the <html> element.

html {
    font-size: 16px;
}

h1 {
    font-size: 2rem;
}

Here, 2rem equals 32px when the root font size is 16px.

rem is commonly used for:

• Font sizes
• Padding
• Margins
• Spacing

It provides more predictable sizing than deeply nested em values.

12. Viewport Units: vw and vh

Viewport units are based on the size of the browser window.

vw

vw means viewport width.

.box {
    width: 50vw;
}

50vw means approximately 50% of the viewport width.

vh

vh means viewport height.

.hero {
    height: 100vh;
}

This can be useful when creating full-screen sections.

13. CSS Background Color

The background-color property is used to set the background color of an element.

body {
    background-color: #f5f5f5;
}

.box {
    background-color: lightblue;
}

You can use any supported CSS color format.

.box {
    background-color: rgb(30, 144, 255);
}

14. CSS Background Image

The background-image property allows you to add an image as the background of an element.

.hero {
    background-image: url("image.jpg");
}

You can use a local image or a URL.

.banner {
    background-image: url("images/banner.jpg");
}

Background images are commonly used for:

• Hero sections
• Website banners
• Cards
• Decorative sections
• Landing pages

15. Background Repeat

By default, a background image may repeat if it is smaller than the element.

You can control this behavior using background-repeat.

.box {
    background-image: url("pattern.png");
    background-repeat: no-repeat;
}

Common values include:

background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

16. Background Size

The background-size property controls the size of the background image.

cover

.hero {
    background-size: cover;
}

cover scales the image so that the entire element is covered. Some parts of the image may be cropped.

contain

.hero {
    background-size: contain;
}

contain scales the image so that the complete image remains visible.

You can also specify exact dimensions:

.box {
    background-size: 300px 200px;
}

17. Background Position

The background-position property controls where the background image is placed.

.hero {
    background-position: center;
}

Common values include:

background-position: center;
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;

You can also combine positions:

.hero {
    background-position: center top;
}

18. Background Attachment

The background-attachment property controls whether the background image scrolls with the page.

.hero {
    background-attachment: fixed;
}

Common values include:

background-attachment: scroll;
background-attachment: fixed;

The fixed value can be used to create certain visual scrolling effects, although it should be tested carefully on mobile devices.

19. CSS Background Shorthand

Instead of writing several background properties separately, you can combine them using the background shorthand property.

For example:

.hero {
    background: #222 url("banner.jpg") center / cover no-repeat;
}

This single declaration can define:

• Background color
• Background image
• Background position
• Background size
• Background repeat

Using shorthand can make CSS more concise.

20. CSS Gradients

CSS gradients allow you to create smooth transitions between colors without using an image.

Linear Gradient

.box {
    background: linear-gradient(to right, blue, purple);
}

You can also specify multiple colors:

.box {
    background: linear-gradient(to right, blue, purple, pink);
}

Radial Gradient

A radial gradient spreads outward from a central point.

.box {
    background: radial-gradient(circle, yellow, orange, red);
}

Gradients are commonly used for buttons, hero sections, cards, and modern website backgrounds.

21. Multiple Backgrounds

CSS also allows you to use more than one background image.

.box {
    background-image:
        url("foreground.png"),
        url("background.jpg");
}

The first image is placed above the second image.

Multiple backgrounds can be useful when combining decorative graphics with a main background.

22. Complete Background Example

Here is a practical example combining several background properties:

.hero {
    min-height: 400px;
    background-color: #222;
    background-image: url("banner.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

You can also write the same styles using shorthand:

.hero {
    min-height: 400px;
    background: #222 url("banner.jpg") center / cover no-repeat;
}

23. Common Mistakes

Beginners often make a few common mistakes when working with CSS colors, units, and backgrounds.

Using invalid color values

Incorrect:

p {
    color: #12345;
}

Use a valid HEX color such as:

p {
    color: #123456;
}

Forgetting the unit

Incorrect:

.box {
    width: 300;
}

Correct:

.box {
    width: 300px;
}

Some CSS properties accept unitless values, but properties such as width, height, margin, and padding normally require a valid unit when using a non-zero value.

Using cover without understanding cropping

background-size: cover can crop parts of an image because the image must cover the entire element.

Always check how the image appears on different screen sizes.

Overusing fixed pixel sizes

Using px everywhere can make responsive layouts harder to maintain.

Consider relative units such as %, rem, em, vw, and vh where appropriate.

24. Best Practices

Keep these practices in mind when working with CSS colors, units, and backgrounds:

• Use a consistent color palette throughout your website.
• Use HEX, RGB/RGBA, or HSL/HSLA according to your project requirements.
• Prefer rem for scalable typography.
• Use percentages and viewport units when they make sense for responsive layouts.
• Use background-size: cover carefully because images can be cropped.
• Optimize background images to improve page loading speed.
• Make sure text has sufficient contrast against its background.
• Avoid using too many colors on a single page.
• Test backgrounds on both desktop and mobile devices.
• Keep reusable color values consistent across your CSS.

25. Practice Tasks

Try these exercises to improve your CSS skills:

1. Create a box with a blue background and white text.
2. Create three boxes using HEX, RGB, and HSL colors.
3. Create a responsive container using %.
4. Create a heading using rem.
5. Create a section with a background image.
6. Use background-size: cover on the section.
7. Add a linear gradient to a button.
8. Create a full-screen section using 100vh.
9. Experiment with background-position.
10. Create a card using a background color, padding, and border.

26. FAQs

What is the most commonly used CSS color format?

HEX colors are very commonly used because they are simple and provide precise color values. RGB, RGBA, and HSL are also widely used.

What is the difference between em and rem?

em is relative to the font size of the relevant element or its parent, while rem is relative to the root HTML element’s font size.

What is 100vh in CSS?

100vh represents approximately the full height of the browser viewport.

What does background-size: cover do?

It scales the background image so that the element is completely covered. Depending on the image and container proportions, some parts of the image may be cropped.

Can CSS have multiple background images?

Yes. CSS allows multiple background images to be applied to the same element.

Conclusion

CSS colors, units, and backgrounds are fundamental concepts for designing modern websites. Colors help create visual identity, CSS units control the size and spacing of elements, and background properties allow you to create attractive sections and layouts.

As you continue learning CSS, practice using different color formats and experiment with px, %, em, rem, vw, and vh. Understanding these units will help you create layouts that work better across different screen sizes.

Background properties such as background-image, background-size, background-position, and gradients are also important for creating visually appealing websites.

In the next CSS tutorials, you can build on these fundamentals and start working with more advanced styling and layout techniques.

Keep practicing and experiment with different CSS properties to understand how they work together.