CSS Colors and Backgrounds
CSS Colors and Backgrounds
CSS allows you to control the appearance of your website by adding colors and backgrounds. This helps make your website visually appealing and user-friendly.CSS Colors
You can apply colors to text, backgrounds, borders, and more.1. Named Colors
These are simple color names supported by browsers.CSS
h1 {
color: red;
}2. HEX Colors
HEX values start with# and represent color combinations.CSS
p {
color: #3498db;
}3. RGB Colors
RGB stands for Red, Green, Blue.CSS
div {
color: rgb(255, 0, 0); /* Red */
}4. RGBA Colors (with transparency)
The “A” controls opacity (0 = transparent, 1 = solid).CSS
div {
color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
}Background Properties
CSS allows you to style backgrounds in different ways.1. Background Color
CSS
body {
background-color: lightgray;
}2. Background Image
CSS
body {
background-image: url("background.jpg");
}3. Background Size
CSS
body {
background-size: cover;
}cover → fills the entire screencontain → fits inside the container4. Background Position
CSS
body {
background-position: center;
}5. Background Repeat
CSS
body {
background-repeat: no-repeat;
}6. Background Shorthand
You can combine multiple properties in one line:CSS
body {
background: #000 url("bg.jpg") no-repeat center/cover;
}Complete Example
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #f4f4f4;
}
h1 {
color: #2c3e50;
}
.box {
background-color: rgba(52, 152, 219, 0.5);
padding: 20px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<div class="box">
This box has a colored background.
</div>
</body>
</html>Key takeaway
CSS colors can be applied using named colors, HEX, RGB, and RGBA, while background properties help you control images, positioning, and layout styling to improve the overall design of your website.