Introduction
Colour and type are 90% of what a visitor feels about your page. CSS gives you four ways to write a colour — names, HEX, RGB and RGBA — and full control of fonts: which family, how big, how bold, and how much air between the lines. In this lesson you learn all four colour formats, the contrast rule that keeps text readable, and how professional pages load fonts from Google Fonts with a safe fallback stack. (Roman Urdu: Rang aur font hi page ki pehchan hain — sahi rang, sahi font, page professional lagta hai.)
Key points
- Colour names — CSS knows 140+ names:
red,navy,gold,teal… Easy to read, limited choice. Good for learning and quick tests. - HEX —
#RRGGBB: two hex digits each for red, green, blue.#000000is black,#ffffffis white,#e8490fis ToolScope's flame orange. Short form#fffworks when each pair repeats. - RGB —
rgb(232, 73, 15)says the same colour as amounts from 0 to 255. HEX and RGB are the same system in different clothes — designers share HEX, code often thinks in RGB.(Roman Urdu: HEX aur RGB aik hi rang likhne ke do tareeqay hain.) - RGBA — RGB plus alpha, the transparency channel:
rgba(11, 15, 25, 0.6)is a dark colour at 60% strength. 1 = fully solid, 0 = invisible. RGBA is how overlays, shadows and glass effects are made. - Contrast is readability — light text on a light background is a design failure, whatever it looks like in your head. Dark text on light pages, light text on dark pages, and test with real eyes. The classic beginner page (yellow text on white) fails this rule.
- font-family is a queue, not a promise — you list fonts in order:
font-family: "Poppins", Arial, sans-serif;— the browser uses the first one the visitor's device has; the last entry is always a generic family (sans-serif,serif,monospace) that every device owns. This is the fallback stack. - Google Fonts — thousands of free fonts served by Google: pick a family on fonts.google.com, paste its
<link>into your<head>, then name it first in your stack. The visitor's browser downloads it — no font file on your computer needed. - Size and air:
font-size(px, or rem — 1rem = the root size, usually 16px),font-weight(400 normal, 700 bold), andline-height(1.5–1.7 makes paragraphs breathe). Body text under 16px is a gift to nobody.
Code examples
Example 1 — One colour, four formats
.a { color: crimson; }
.b { color: #dc143c; }
.c { color: rgb(220, 20, 60); }
.d { background-color: rgba(220, 20, 60, 0.25); }What it does: The first three rules write the exact same colour (crimson) in the three formats — name, HEX and RGB. The fourth uses RGBA at 0.25 alpha as a background: the same crimson, washed to a quarter strength.
What you will see: three identical crimson headings — proof the formats are interchangeable — and one box with a soft pink background. That washed colour under dark text is the standard "highlight" look of notes apps and dashboards.
Example 2 — A fallback stack doing its job
body {
font-family: "Poppins", "Segoe UI", Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #1c2432;
}
h1 { font-weight: 700; letter-spacing: 0.5px; }
code { font-family: "Consolas", "Courier New", monospace; }What it does: The body asks for Poppins; a device without it tries Segoe UI, then Arial, then any sans-serif. Code gets its own monospace stack — in a mono font every letter is the same width, so code lines up in clean columns.
What you will see: a clean, airy page — and if you open it on a device with none of the named fonts, it still looks right, just in the device's own sans-serif. The stack is your insurance policy.
Example 3 — A Google Fonts quote card
<head>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
.quote-card {
font-family: "Inter", Arial, sans-serif;
background: #0b0f19; color: #faf9f6;
padding: 28px; border-radius: 14px;
}
.quote-card blockquote {
font-family: "Playfair Display", Georgia, serif;
font-size: 26px; line-height: 1.4;
}
.quote-card .by { color: #e8b04b; font-weight: 600; }
</style>
</head>
<body>
<div class="quote-card">
<blockquote>Seekhna kabhi band na karo — har din aik nayi cheez.</blockquote>
<p class="by">— Code Scope</p>
</div>
</body>
</html>What it does: One <link> loads two families (Playfair Display for the quote, Inter for the rest) with only the weights actually used — lighter page, faster load. The card pairs a dark background with near-white text (high contrast) and one gold accent.
What you will see: an elegant dark card: a big serif quote, the author's name in gold. Remove the <link> and the card still works — Georgia and Arial stand in, a little less beautiful. That is the fallback stack earning its keep.
Quick recap
- Colour formats: names (140+), HEX
#RRGGBB, RGBrgb(r, g, b), RGBA (adds alpha 0–1 for transparency). - Contrast first — if the text is hard to read, the colour is wrong.
- Fonts travel in a stack ending in a generic family; Google Fonts loads web fonts by link; size in px/rem, breathing room in
line-height.
Common mistakes
- Low-contrast text — light grey on white, yellow on white, red on green. It looks "soft" in the editor and unreadable on a phone in sunlight. When in doubt, darker text.
- A font name with no fallback —
font-family: "Poppins";alone means "Poppins or whatever random default" — sometimes a serif you never chose. Always end the stack with a generic family. - Reading alpha backwards — in
rgba(0, 0, 0, 0.1)the shadow is faint because alpha 0.1 is nearly invisible. 0 = invisible, 1 = solid. A "shadow that never shows" is usually alpha near 0 by accident.
Practice
- Take one heading and write its colour four ways (name, HEX, RGB, RGBA background). Confirm the first three match exactly in the browser.
- Build the quote card from Example 3, then swap in a different Google font pair (one display font + one text font). Keep the contrast rule: read it at arm's length — if you squint, fix the colours.