4Colors, Backgrounds & Borders
Beginner20m
CSS Color Systems
CSS supports multiple ways to define colors. You can use named colors, HEX codes, RGB/RGBA, or HSL/HSLA values. RGBA and HSLA allow transparency control via the alpha channel.
css
/* Named color */
p { color: red; }
/* HEX code */
div { background-color: #3498db; }
/* RGB */
section { color: rgb(52, 152, 219); }
/* RGBA with transparency */
header { background-color: rgba(52, 152, 219, 0.5); }
/* HSL */
footer { color: hsl(204, 70%, 53%); }
/* HSLA with transparency */
nav { background-color: hsla(204, 70%, 53%, 0.3); }Backgrounds
CSS allows you to style element backgrounds with colors, images, multiple layers, and gradients.
css
/* Simple background color */
div { background-color: #f1c40f; }
/* Background image */
section {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* Multiple backgrounds */
header {
background-image: url('pattern.png'), linear-gradient(to right, #ff7e5f, #feb47b);
background-repeat: repeat, no-repeat;
background-position: top left, center;
background-size: auto, cover;
}
/* Gradients */
button {
background: linear-gradient(to right, #6a11cb, #2575fc);
}
.card {
background: radial-gradient(circle, #ff9a9e, #fad0c4);
}Borders & Shadows
Borders and shadows add structure and depth to elements. You can customize color, thickness, style, radius, and shadow effects.
css
/* Basic border */
div { border: 2px solid #2c3e50; }
/* Rounded corners */
button { border-radius: 10px; }
/* Outline */
input:focus { outline: 2px solid #e67e22; }
/* Box shadow */
.card {
box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}
/* Text shadow */
h1 {
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}Mini Project Step
Design a set of product cards for an online store. Each card should have a background color or gradient, a border with rounded corners, and a subtle box-shadow. Add product titles with a text-shadow effect, and experiment with color combinations using HEX, RGB, and HSL values. Make the cards visually appealing while maintaining readability.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color & Border Project</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
gap: 20px;
padding: 20px;
background-color: #f5f5f5;
}
.card {
background: linear-gradient(to bottom, #ff9a9e, #fad0c4);
border: 2px solid #e74c3c;
border-radius: 12px;
box-shadow: 4px 4px 15px rgba(0,0,0,0.2);
padding: 20px;
width: 200px;
text-align: center;
}
.card h2 {
text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
color: #2c3e50;
}
.card p {
color: #34495e;
line-height: 1.4;
}
</style>
</head>
<body>
<div class="card">
<h2>Product One</h2>
<p>High-quality and stylish product with amazing features.</p>
</div>
<div class="card">
<h2>Product Two</h2>
<p>Elegant design and superior performance for everyday use.</p>
</div>
<div class="card">
<h2>Product Three</h2>
<p>Durable, colorful, and perfect for gifting.</p>
</div>
</body>
</html>