📖
Colors and Typography
CSS colors, fonts, sizes and CSS variables
Colors in CSS
CSS supports several color formats:
css
/* HEX — most common */
color: #e44d26; /* orange */
color: #fff; /* white (shorthand) */
/* RGB */
color: rgb(228, 77, 38);
/* RGBA — with opacity (0 = transparent, 1 = opaque) */
background: rgba(0, 0, 0, 0.5); /* 50% black */
/* HSL — hue, saturation, lightness */
color: hsl(14, 76%, 52%);
/* Named colors */
color: red;
color: cornflowerblue;color — text color. background-color (or background) — background color.
Typography
css
/* Font */
font-family: 'Inter', Arial, sans-serif;
/* If 'Inter' didn't load — Arial, if not — any sans-serif */
/* Size */
font-size: 16px; /* pixels */
font-size: 1rem; /* relative to root element (16px by default) */
font-size: 1.125em; /* relative to parent element */
/* Weight */
font-weight: 400; /* normal */
font-weight: 700; /* bold */
/* Line height */
line-height: 1.6; /* 1.6× the font-size — a good standard */
/* Alignment */
text-align: left | center | right | justify;
/* Decoration */
text-decoration: none | underline | line-through;
text-transform: uppercase | lowercase | capitalize;
letter-spacing: 0.05em; /* letter spacing */CSS Variables (Custom Properties)
Let you store values and reuse them throughout your CSS:
css
:root {
--color-primary: #6070f7;
--color-text: #1e293b;
--font-size-base: 16px;
--border-radius: 8px;
}
.btn {
background: var(--color-primary);
border-radius: var(--border-radius);
}
/* To change the primary color — just update it in :root */Why this is great: change one value in :root and the color scheme updates across the whole site. Perfect for dark mode.
css
💬
This is the CSS this platform uses. rem + CSS variables — the modern standard.
Prefer rem over px for fonts! If a user has increased the browser font size (for readability), rem scales with it, but px does not.