CSS Colors, Units & Typography Guide for Beginners

Color systems, fonts, text styling, spacing, and units.

In this lesson, you’ll learn how CSS controls visual appearance and readability using colors, units, spacing, and typography. These concepts decide whether a website looks professional or amateur.

Good typography and correct units make designs clean, scalable, and user-friendly across all devices.

Info!
Most design issues on websites are caused by poor unit choices and inconsistent typography.

1. CSS Colors (Visual Language)

CSS supports multiple color systems. Each one is useful in different situations.

Named colors – simple and readable
HEX – most commonly used in real projects
RGB / RGBA – useful for transparency
HSL – best for design systems

<!DOCTYPE html>
<html>
<head>
<style>
.box {
  padding: 16px;
  margin-bottom: 10px;
  color: white;
}
.hex { background: #2563eb; }
.rgb { background: rgb(34,197,94); }
.rgba { background: rgba(239,68,68,0.8); }
.hsl { background: hsl(45, 90%, 50%); color:#000; }
</style>
</head>
<body>

<div class="box hex">HEX Color</div>
<div class="box rgb">RGB Color</div>
<div class="box rgba">RGBA with transparency</div>
<div class="box hsl">HSL Color</div>

</body>
</html>

Tip!
Use HSL when building themes. It makes light and dark variations easier.

2. CSS Units (Sizing & Responsiveness)

CSS units control size, spacing, and layout. Choosing the right unit is critical for responsive design.

Units are divided into two groups:

Absolute units – px
Relative units – %, em, rem, vw, vh

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  font-size: 16px;
}
.px {
  font-size: 20px;
}
.em {
  font-size: 1.5em;
}
.rem {
  font-size: 1.5rem;
}
</style>
</head>
<body>

<div class="container">
  <p class="px">Font size using px</p>
  <p class="em">Font size using em</p>
  <p class="rem">Font size using rem</p>
</div>

</body>
</html>

Warning!
Overusing px breaks scalability. Prefer rem for fonts and spacing.

3. CSS Typography (Readable Text)

Typography controls how text looks and feels. Good typography improves UX, accessibility, and SEO.

Important typography properties:

font-family
font-size
font-weight
line-height
letter-spacing

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family: Arial, sans-serif;
}
.title {
  font-size: 2rem;
  font-weight: 700;
}
.text {
  font-size: 1rem;
  line-height: 1.7;
}
</style>
</head>
<body>

<h1 class="title">Good Typography Matters</h1>
<p class="text">
Readable text improves user experience and keeps users engaged.
</p>

</body>
</html>

Success! Proper font sizing and line-height instantly improve readability.

4. Spacing (Margin & Padding)

Spacing defines visual breathing room. Well-spaced layouts feel clean and professional.

<!DOCTYPE html>
<html>
<head>
<style>
.card {
  padding: 16px;
  margin: 20px 0;
  background: #f1f5f9;
  border-radius: 8px;
}
</style>
</head>
<body>

<div class="card">This card uses padding and margin</div>
<div class="card">Spacing improves clarity</div>

</body>
</html>

Tip!
Use consistent spacing values (4px, 8px, 16px, 24px) to build clean layouts.

What You Learned

CSS color systems and when to use them
Absolute vs relative units
Typography best practices
Text styling for readability
Spacing using margin and padding

Success! You now control how content looks, scales, and feels on the screen.

Next lesson: CSS Box Model & Layout Basics

Maxoncodes

CSS Colors, Units & Typography Guide for Beginners

1. CSS Colors (Visual Language)

2. CSS Units (Sizing & Responsiveness)

3. CSS Typography (Readable Text)

4. Spacing (Margin & Padding)

What You Learned

Post a Comment

HTML Architecture & Scalable Structure for Large Websites (Advanced Guide)

SEO-Driven HTML: Writing HTML That Google Understands and Trusts

Top 5 Coding Side Hustles You Can Start in 2026

HTML Web Storage & Browser APIs Explained (LocalStorage vs SessionStorage)

Full Stack Web Developer Roadmap 2026