CSS Colors, Backgrounds and Borders (Beginner’s Guide)

Now that you understand CSS selectors, let’s move on to making your web pages look colorful and clean.

In this guide, you will learn how to use:

• CSS colors to make text and elements pop,
• Background properties to style sections and containers,
• Borders to neatly frame elements.

Let’s dive in with beginner-friendly examples!

🎨 CSS Colors

CSS allows you to apply color to text, backgrounds, and even borders.

Basic Syntax

selector {
  color: value;
  background-color: value;
}

selector {
  color: value;
  background-color: value;
}

• You use color to change text color, and background-color to fill the background of an element.

Common Ways to Define Colors:

• Name: red, blue, green
• Hex Code: #ff0000, #00ff00
• RGB: rgb(255, 0, 0) – Red, Green, Blue values (0 to 255)
• RGBA: rgba(255, 0, 0, 0.5) – RGB with alpha (opacity)

Example:

h1 {
  color: darkblue; /* Defined by Name */
}

p {
  color: #333333; /* Defined by Hex Code */
}

h1 {
  color: darkblue; /* Defined by Name */
}

p {
  color: #333333; /* Defined by Hex Code */
}

• This changes the heading color to dark blue and the paragraph color to dark gray using a hex code.

🎨 CSS Backgrounds

CSS background properties allow you to control the background styling of HTML elements.

Basic CSS Background Properties

Examples:

Solid Background Color

div {
  background-color: lightgray;
}

div {
  background-color: lightgray;
}

• This adds a light gray background to any <div> element.

Background Image

div {
  background-image: url('background.jpg'); /* sets a background image */
  background-repeat: no-repeat; /* prevents the image from repeating */
  background-size: cover; /* scales the image to cover the container */
  background-position: center; /* sets the image position */
}

div {
  background-image: url('background.jpg'); /* sets a background image */
  background-repeat: no-repeat; /* prevents the image from repeating */
  background-size: cover; /* scales the image to cover the container */
  background-position: center; /* sets the image position */
}

• This places an image as a background that covers the entire container without repeating.

Other Background Properties:

• background-repeat: repeat, no-repeat – defines if the image should repeat
• background-position: center, top right, etc. – sets the image position
• background-size: auto, cover, contain – defines how the image scales

Tips:

• Use background-size: cover for full-screen background images.
• Use rgba() for semi-transparent background colors.

🎨 CSS Borders

Borders help you add outlines or frames around HTML elements.

Basic Syntax

element {
  border-width: 2px; /* sets thickness */
  border-style: solid; /* style of the line */
  border-color: black; /* sets border color */
}

element {
  border-width: 2px; /* sets thickness */
  border-style: solid; /* style of the line */
  border-color: black; /* sets border color */
}

• This creates a solid black border around the element. You can define each part of the border separately.

Border Shorthand

A quick way to set width, style, and color all in one line.

p {
  border: 1px dashed gray; /* gray dashed border */
}

p {
  border: 1px dashed gray; /* gray dashed border */
}

Border Styles

Here are the different styles you can choose from:

Rounded Borders

To create smooth corners on your elements, use the CSS property border-radius.

div {
  border: 1px solid #000; /* black border */
  border-radius: 10px; /* rounded corners */
}

div {
  border: 1px solid #000; /* black border */
  border-radius: 10px; /* rounded corners */
}

• Rounded corners make boxes look softer and more modern.

Summary

Practice Challenge

Try applying the following styles to a simple <div> element:

• Light blue background
• White text
• 2px dashed red border
• 10px border-radius

This will help reinforce your understanding of color, background, and border properties.