Curriculum

Course: CSS

Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Background Color

These chapters cover various CSS background properties, including:

Background-color
Background-image
Background-repeat
Background-attachment
Background-position
Background (Shorthand porperty)

CSS background-color

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

Example

The page’s background color is configured in the following manner:

body {
background-color: lightblue;
}

In CSS, colors are typically defined using:

A valid color name, such as “red”.
A HEX value, like “#ff0000”.
An RGB value, such as “rgb(255,0,0)”.

Refer to CSS Color Values for a comprehensive range of potential color specifications.

Other Elements

You have the ability to define the background color for any HTML elements.

Example

In this context, the <h1>, <p>, and <div> elements will each possess distinct background colors.

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

Opacity / Transparency

The opacity property determines the transparency of an element, ranging from 0.0 to 1.0. Lower values correspond to higher transparency.

Example

div {
background-color: green;
opacity: 0.3;
}

Please be aware: When employing the opacity property to introduce transparency to an element’s background, all child elements inherit the same level of transparency.

Consequently, this may result in difficulties in reading text within an element that is fully transparent.

Transparency using RGBA

To avoid applying opacity to child elements, as demonstrated in our example above, utilize RGBA color values.

The subsequent example demonstrates setting the opacity solely for the background color while leaving the text unaffected.

In our CSS Colors Chapter, you’ve discovered the use of RGB as a color value. In addition to RGB, RGBA color values include an alpha channel, specifying the color’s opacity.

An RGBA color value is structured as follows: rgba(red, green, blue, alpha). The alpha parameter ranges from 0.0 (fully transparent) to 1.0 (fully opaque).

Keep in mind: Further insights into RGBA Colors will be provided in our CSS Colors Chapter.

Example

div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

The CSS Background Color Property

Property	Description
background color	Defines the background color of an element.