CSS
Background Color
You can set the background
color for HTML elements:
Hello
World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
CSS Text Color
You can set the color of
text:
Hello World
Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
CSS Border Color
You can set the color of
borders:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px
solid Tomato;">Hello World</h1>
<h1 style="border:2px
solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px
solid Violet;">Hello World</h1>
CSS Color Values
In CSS, colors can also be
specified using RGB values, HEX values, HSL values, RGBA values, and HSLA
values:
Same as color name
"Tomato":
rgb(255,
99, 71)
#ff6347
hsl(9,
100%, 64%)
Example
<h1 style="background-color:rgb(255,
99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9,
100%, 64%);">...</h1>
<h1 style="background-color:rgba(255,
99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9,
100%, 64%, 0.5);">...</h1>
CSS Backgrounds
The CSS background
properties are used to add background effects for elements.
In these chapters, you will
learn about the following CSS background properties:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background (shorthand property)
CSS background-color
The background-color property
specifies the background color of an element.
Example
The
background color of a page is set like this:
body {
background-color: lightblue;
}
With CSS, a color is most
often specified by:
- a
valid color name - like "red"
- a
HEX value - like "#ff0000"
- an
RGB value - like "rgb(255,0,0)"
Other Elements
You can set the background
color for any HTML elements:
Example
Here, the
<h1>, <p>, and <div> elements will have different background
colors:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
Opacity / Transparency
The opacity property
specifies the opacity/transparency of an element. It can take a value from 0.0
- 1.0. The lower value, the more transparent:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Example
div {
background-color: green;
opacity: 0.3;
}
Note: When using the opacity property to add
transparency to the background of an element, all of its child elements inherit
the same transparency. This can make the text inside a fully transparent
element hard to read.
Transparency using RGBA
If you do not want to apply
opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the
background color and not the text:
100% opacity
60% opacity
30% opacity
10% opacity
An RGBA color value is
specified with: rgba(red, green, blue, alpha).
The alpha parameter
is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
Example
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
The CSS Background Color Property
|
Property |
Description |
|
background-color |
Sets the background color
of an element |
