Colors & Typography
Colors are used to style text, backgrounds, borders, buttons, and UI elements.
Typography controls how text looks on a webpage like font size, weight, spacing, alignment, and readability.
Why Colors & Typography Are Important?
- Improve UI design
- Increase readability
- Create branding consistency
- Improve user experience
- Make websites visually attractive
CSS Color Property
The color property changes text color.
[code theme="dark"]
p{
color:red;
}
[/code]
Background Color
[code theme="dark"]
.box{
background-color:#f5f5f5;
}
[/code]
1. Named Colors
CSS provides predefined color names.
[code theme="dark"]
h1{
color:red;
}
p{
color:blue;
}
[/code]
Common Named Colors
- red
- blue
- green
- black
- white
- gray
- orange
Use Case: Quick and simple styling.
2. HEX Colors
HEX colors are the most commonly used color format in frontend development.
[code theme="dark"]
h1{
color:#ff6600;
}
[/code]
Format:
[code theme="dark"]
#RRGGBB
[/code]
Examples
- #ff0000 → Red
- #0000ff → Blue
- #000000 → Black
- #ffffff → White
Use Case: Branding and precise colors.
3. RGB Colors
RGB stands for:
Each value ranges from 0 to 255.
[code theme="dark"]
h1{
color: rgb(255, 102, 0);
}
[/code]
Use Case: Dynamic color manipulation.
4. RGBA Colors
RGBA adds Alpha (opacity/transparency).
[code theme="dark"]
.box{
background: rgba(0,0,0,0.5);
}
[/code]
Alpha Value:
- 0 → Fully transparent
- 1 → Fully visible
Use Case: Overlays and transparent backgrounds.
5. HSL Colors
HSL stands for:
[code theme="dark"]
h1{
color:hsl(20, 100%, 50%);
}
[/code]
Meaning
- 20 → Color shade
- 100% → Color intensity
- 50% → Brightness
Use Case: Easier color adjustments.
6. HSLA Colors
HSLA adds transparency support.
[code theme="dark"]
.box{
background: hsla(20, 100%, 50%, 0.5);
}
[/code]
Use Case: Transparent UI elements.
Typography in CSS
Typography controls text appearance and readability.
Font Family
Changes text style/font.
[code theme="dark"]
body{
font-family: Arial, sans-serif;
}
[/code]
Font Size
[code theme="dark"]
h1{
font-size:40px;
}
[/code]
Font Weight
Controls text thickness.
[code theme="dark"]
p{
font-weight:bold;
}
[/code]
Common Values
- 400 → Normal
- 500 → Medium
- 700 → Bold
Line Height
Adds spacing between lines.
[code theme="dark"]
p{
line-height:1.8;
}
[/code]
Important for readability.
Letter Spacing
[code theme="dark"]
h1{
letter-spacing:2px;
}
[/code]
Text Align
[code theme="dark"]
p{
text-align:center;
}
[/code]
Common Values
Text Transform
[code theme="dark"]
h1{
text-transform:uppercase;
}
[/code]
Common Values
- uppercase
- lowercase
- capitalize
Useful Typography Example
[code theme="dark"]
body{
font-family: Arial, sans-serif;
font-size:16px;
line-height:1.6;
color:#333;
}
h1{
font-size:42px;
font-weight:700;
}
[/code]
Best Practices
- Use readable font sizes
- Maintain proper contrast
- Do not use too many fonts
- Use consistent spacing
- Use typography hierarchy properly
Quick Summary
- Named Colors → Simple predefined colors
- HEX → Most commonly used color format
- RGB/RGBA → Useful for dynamic and transparent colors
- HSL/HSLA → Easier color adjustments
- Typography → Improves readability and UI design