Colors & Text
Every color on a webpage is described to CSS in one of a few ways. A named color, like red or dodgerblue, is the easiest to read but limited to a fixed list. A hex code, like #1E2A5A, is six characters representing red, green, and blue amounts in a compact format this is what designers usually hand you. rgb(30, 42, 90) writes the exact same color as three plain numbers from 0-255. The color property sets TEXT color specifically not backgrounds, not borders, just text. Fonts work similarly: font-family names the typeface, but because not every visitor's device has every font installed, you always list a fallback, like font-family: 'Poppins', sans-serif if 'Poppins' isn't available, the browser falls back to any generic sans-serif font instead of showing nothing. font-size controls how big text is, and font-weight controls how bold it looks, usually as a number like 400 (normal) or 700 (bold).
Why this matters
- ·Hex codes give precise, repeatable brand colors across a whole site
- ·A good font fallback stack means text never looks broken on any device
- ·Named colors are quick and readable for prototyping
Common mistakes
- ·Low contrast between text and background hurts readability for everyone, especially visually impaired users
- ·Forgetting a font fallback breaks the design on devices that don't have your chosen font
- ·Using vague color names inconsistently across a project makes branding look sloppy
Frequently asked questions
External it keeps HTML and CSS separate, and one .css file can style your whole site. Inline and internal are mostly for quick tests or single-page demos.
Practice questions
Question 1
Style a paragraph with a color of your choice and a font-size of 20px, using the internal method.
Question 2
Write the same red, bold heading three ways: inline, internal, and external.
Quick check
Just for this topic answer honestly, then check yourself.
1 / 10
