Colors and Backgrounds
Duration : 00:01:30
CSS Background Color:
CSS background-color property is used to set the background color of an element, such as a div or a paragraph.Example:
div {
background-color: lightblue;
}
CSS Text Color:
CSS color property is used to set the color of text within an HTML element.Example:
p {
color: red;
}
CSS Border Color:
CSS border-color property is used to set the color of an element's border.Example:
button {
border: 2px solid green;
border-color: red;
}
CSS Color Values:
CSS supports various color value types, including named colors, hexadecimal colors, RGB values, and HSL values.Example:
p {
color: blue; /* Named color */
background-color: #FFA500; /* Hexadecimal color */
border-color: rgb(255, 0, 0); /* RGB value */
box-shadow: hsl(120, 100%, 50%) 5px 5px 10px; /* HSL value */
}
CSS Color Alpha Values:
CSS color values can include an alpha (transparency) value using the rgba() notation.Example:
button {
background-color: rgba(0, 128, 0, 0.5); /* Semi-transparent green */
}
CSS Hexadecimal Colors:
Hexadecimal colors are a way to represent colors using a combination of six or three hexadecimal digits.Example:
span {
color: #FF0000; /* Red */
}
CSS HSL Colors:
HSL (Hue, Saturation, Lightness) colors provide a more intuitive way to specify colors.Example:
div {
background-color: hsl(240, 100%, 50%); /* Blue */
}
CSS rgb() Colors:
The rgb() function allows you to define colors using Red, Green, and Blue values.Example:
p {
color: rgb(0, 0, 255); /* Blue */
}
CSS background-color:
CSS background-color property sets the background color of an element.Example:
header {
background-color: #333; /* Dark gray background */
}
CSS Opacity / Transparency:
The opacity property controls the transparency of an element.Example:
div {
opacity: 0.5; /* 50% opacity */
}
CSS Transparency using RGBA:
You can use the rgba() notation to set both the color and its transparency.Example:
button {
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}
CSS background:
The background property is a shorthand for setting various background properties in one declaration.Example:
section {
background: url('image.jpg') no-repeat center center fixed;
}
CSS background-attachment:
The background-attachment property specifies whether the background image scrolls with the content or remains fixed.Example:
body {
background-image: url('background.jpg');
background-attachment: fixed; /* Background stays fixed */
}
CSS background-clip:
The background-clip property determines the area of an element to which the background is applied.Example:
div {
background-clip: content-box; /* Background applied inside the padding box */
}
CSS background-image:
The background-image property sets an image as the background of an element.Example:
button {
background-image: url('button-background.png');
}
CSS background-origin:
The background-origin property specifies where the background image or color should start.Example:
div {
background-origin: border-box; /* Background starts from the border box */
}
CSS background-position:
The background-position property sets the starting position of a background image.Example:
header {
background-position: top right; /* Background starts at the top-right corner */
}
CSS background-repeat:
The background-repeat property defines how a background image is repeated.Example:
footer {
background-repeat: repeat-x; /* Background repeats horizontally */
}
CSS background-size:
The background-size property sets the size of a background image.Example:
section {
background-size: cover; /* Background image covers the entire container */
}
CSS Linear Gradients:
Linear gradients allow you to create a smooth transition between two or more colors in a linear direction.Example:
button {
background: linear-gradient(to right, red, blue);
}
CSS Gradients Using Angles:
You can specify the direction of a gradient using an angle.Example:
div {
background: linear-gradient(45deg, yellow, green);
}
CSS Gradients Using Multiple Color Stops:
Gradients can have multiple color stops to define various color transitions.Example:
p {
background: linear-gradient(to bottom, red, yellow, green);
}
CSS Gradients Using Transparency:
Gradients can include transparent colors for creating blending effects.Example:
button {
background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
CSS Repeating a Linear Gradient:
The repeating-linear-gradient() function allows you to repeat a linear gradient pattern.Example:
header {
background: repeating-linear-gradient(45deg, red, yellow 20px, green 40px);
}
Still have some questions? Let's discuss.
CONTACT US