Colors, Typography, and Units
Colour in CSS
Colour is one of the most expressive tools in web design. CSS supports several formats for specifying colour.
Hexadecimal (Hex) Colour
Hex colours are the most common format in professional projects. A hex code starts with # followed by six characters representing Red, Green, and Blue (RGB) values:
h1 { color: #42BCB1; } /* teal */
p { color: #374151; } /* dark grey */
body { background-color: #F9F9F9; } /* off-white */
The shorthand three-character form works when each pair of characters is identical:
color: #fff; /* same as #ffffff — white */
color: #000; /* same as #000000 — black */
RGB and RGBA
RGB lets you specify red, green, and blue channels as numbers from 0 to 255. RGBA adds a fourth value — alpha — which controls transparency (0 is fully transparent, 1 is fully opaque):
.card {
background-color: rgb(66, 188, 177); /* teal */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); /* black at 10% opacity */
}
HSL and HSLA
HSL stands for Hue, Saturation, Lightness. Many designers prefer it because adjusting the lightness value is intuitive:
color: hsl(176, 49%, 50%); /* teal */
color: hsl(176, 49%, 35%); /* darker teal */
color: hsla(176, 49%, 50%, 0.2); /* teal at 20% opacity */
Named Colours
CSS also accepts colour names, though these are best suited for quick prototyping:
color: white;
background-color: coral;
border-color: transparent;
Typography
Typography is how text looks on screen. Good typography makes content readable, hierarchical, and visually attractive.
font-family
Specify a list of fonts in order of preference. The browser uses the first one available:
body {
font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}
The last value (sans-serif) is a generic font family — a fallback that the browser always has. Always end your font stack with a generic family.
To use custom web fonts, link them from Google Fonts in your <head>:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet" />
body { font-family: 'Inter', sans-serif; }
font-size
body { font-size: 16px; } /* base size */
h1 { font-size: 2rem; } /* 2 × body = 32px */
small { font-size: 0.875rem; } /* 14px */
font-weight
Font weight controls boldness. Common values:
p { font-weight: 400; } /* regular */
strong { font-weight: 700; } /* bold */
h1 { font-weight: 800; } /* extra-bold */
line-height
Line height controls the vertical spacing between lines of text. Values between 1.5 and 1.7 are generally most readable for body text:
body { line-height: 1.6; }
h1 { line-height: 1.2; }
letter-spacing
h1 { letter-spacing: -0.02em; } /* tighten headings */
.label { letter-spacing: 0.1em; text-transform: uppercase; } /* spaced caps */
text-align and text-decoration
.hero { text-align: center; }
a { text-decoration: none; } /* removes underline from links */
.strike { text-decoration: line-through; }
CSS Units
Units define the size of values in CSS. Choosing the right unit matters for responsive, accessible design.
Absolute Units
| Unit | Description |
|---|---|
px | Pixels — fixed size, most common absolute unit |
Relative Units
| Unit | Description |
|---|---|
rem | Relative to the root element font size (usually 16px) |
em | Relative to the current element's font size |
% | Percentage of the parent element's value |
vw | Viewport Width — 1vw = 1% of the browser window width |
vh | Viewport Height — 1vh = 1% of the browser window height |
When to use each:
- Use
pxfor borders, shadows, and small fixed values - Use
remfor font sizes, padding, and spacing — it scales with user preferences - Use
%for widths that should fill a portion of the parent - Use
vw/vhfor full-screen sections
.hero {
height: 100vh; /* full screen height */
width: 100%; /* full parent width */
font-size: 1.25rem; /* 20px if root is 16px */
padding: 24px 48px;
border-radius: 12px;
border: 1px solid #E5E7EB;
}
Putting It Together: A Styled Section
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #374151;
background-color: #F9F9F9;
}
.hero {
background-color: #0F1C3A;
color: white;
text-align: center;
padding: 80px 24px;
}
.hero h1 {
font-size: 3rem;
font-weight: 800;
color: #42BCB1;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.hero p {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.8);
max-width: 560px;
margin: 0 auto;
}
Practice Exercise
Style a hero section for a personal portfolio:
- Set a dark background colour on
.hero - Centre-align all the text
- Style the
h1with a large font size, bold weight, and teal colour - Style the
pwith a slightly transparent white colour using RGBA - Limit the paragraph width to 560px and centre it with auto margins
Try it yourself
Key Takeaways
- CSS supports hex (#42BCB1), rgb(), rgba(), hsl(), and named colour formats
- RGBA's fourth value (alpha) controls transparency from 0 (invisible) to 1 (fully opaque)
- Always end your font-family stack with a generic family like sans-serif as a fallback
- rem units are relative to the root font size and are the preferred unit for font sizes and spacing
- vh and vw units are percentages of the viewport height and width respectively
- line-height between 1.5 and 1.7 is the standard for readable body text
Quick Quiz
1.What does the alpha value in RGBA control?
2.What is the difference between rem and em units?
3.Which CSS property controls the vertical spacing between lines of text?
4.What unit would you use to make an element take up the full height of the browser window?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx