Colors, Units & Backgrounds in CSS
333Yesterday, I learned how CSS selectors target HTML elements.
Today, I explored one of the most exciting parts of CSS—adding colors, working with measurement units, and styling backgrounds.
This is where web pages begin to look less like plain documents and more like real websites.
Let's dive in!
Why Colors Matter
Colors play a huge role in web design.
They help:
Improve readability
Build brand identity
Highlight important information
Create visual hierarchy
Enhance user experience
CSS provides multiple ways to define colors.
1. Named Colors
The simplest way to add color.
h1 {
color: blue;
}
Examples:
red
blue
green
black
white
orange
purple
Easy to use but limited in variety.
2. HEX Colors
HEX values provide much greater flexibility.
h1 {
color: #3498db;
}
A HEX color starts with # followed by six hexadecimal digits.
Examples:
#FFFFFF→ White#000000→ Black#FF0000→ Red
HEX is widely used in modern web development.
3. RGB Colors
RGB stands for Red, Green, Blue.
h1 {
color: rgb(52, 152, 219);
}
Each value ranges from 0 to 255.
4. RGBA Colors
RGBA adds an Alpha channel for transparency.
background-color: rgba(0, 0, 0, 0.5);
Alpha ranges from:
0→ Fully transparent1→ Fully visible
Useful for overlays and modern UI effects.
CSS Units
CSS uses different units to define size, spacing, and layout.
These units are divided into two categories.
Absolute Units
These have fixed values.
Example:
font-size: 20px;
Common absolute units:
px
cm
mm
in
The most commonly used is px (pixels).
Relative Units
Relative units adjust based on another value, making layouts more flexible.
Percentage (%)
width: 50%;
The width becomes 50% of its parent.
em
Relative to the parent element's font size.
font-size: 2em;
rem
Relative to the root (<html>) font size.
font-size: 2rem;
Many developers prefer rem because it keeps sizing more consistent across a project.
vw & vh
Viewport-based units.
width: 100vw;
height: 100vh;
vw= Viewport Widthvh= Viewport Height
These are useful for full-screen layouts and responsive designs.
Background Properties
CSS provides several properties for styling backgrounds.
Background Color
body {
background-color: #f4f4f4;
}
Sets the background color of an element.
Background Image
body {
background-image: url("background.jpg");
}
Displays an image behind the content.
Background Repeat
background-repeat: no-repeat;
Options include:
repeat
no-repeat
repeat-x
repeat-y
Background Size
background-size: cover;
Common values:
cover
contain
auto
cover ensures the image fills the entire container while maintaining its aspect ratio.
Background Position
background-position: center;
Controls where the image appears.
Examples:
center
top
bottom
left
right
Background Attachment
background-attachment: fixed;
A fixed background remains stationary while the page scrolls.
Shorthand Property
Instead of writing multiple background properties, CSS allows a shorthand.
background: #000 url("bg.jpg") no-repeat center/cover;
This combines several properties into one line.
Best Practices
✔ Use consistent color palettes.
✔ Prefer rem for font sizes.
✔ Use responsive units like %, vw, and vh where appropriate.
✔ Optimize background images for faster loading.
✔ Maintain good contrast between text and background for readability.
My Biggest Takeaway
Before today, I thought CSS was just about changing text colors.
Now I understand that colors, units, and backgrounds work together to create visually appealing and responsive websites.
Choosing the right unit and background properties isn't just about appearance—it also affects usability, responsiveness, and overall user experience.
I'm beginning to see how CSS transforms simple HTML into modern, attractive web pages.