2.6 Colors, Fonts, and Text

How good a page looks depends heavily on text styling. This section runs through the most-used "text-related" properties. Learn these, add the box model and layout from before, and you can make a plain page look quite presentable.

The lab below is a "text style mixer" where each control maps to a CSS property — tweak and see.

Loading interactive lab...

Color: color and background

css

.title {
  color: #4f46e5;            /* text color */
  background-color: #f1f5f9; /* background color */
}

Colors can be written several ways; the common ones are:

Color names: red, blue, tomato (simple but limited).

Hex: #4f46e5 (most common; front-end favorite).

rgb / rgba: rgb(79, 70, 229), rgba(0, 0, 0, 0.5) (the last value in rgba is opacity).

Loading concept check...

Size, weight, and font

css

p {
  font-size: 16px;       /* size */
  font-weight: bold;     /* weight: normal / bold, or 100–900 */
  font-family: sans-serif; /* font family */
  line-height: 1.6;      /* line height, for readable paragraphs */
}

font-size: text size, commonly in px.

font-weight: boldness. normal (400), bold (700), or a number directly.

font-family: the font. Often a "fallback list" — the browser picks the first available from left to right: font-family: "Helvetica", Arial, sans-serif;.

line-height: the height between lines. Body text reads better at 1.5–1.8.

Loading concept check...

Alignment and spacing

css

h1 {
  text-align: center;     /* alignment: left / center / right */
  letter-spacing: 0.05em; /* space between letters */
  text-decoration: underline; /* underline; none removes a link's default underline */
}

Note

Don't pile on too many styles at once. Beginners tend to stuff a dozen properties onto one piece of text and end up with a mess. Good-looking pages are usually restrained: two or three font sizes, one or two main colors, plenty of whitespace. Start simple, add gradually.

Chapter summary

In this CSS chapter you learned:

Three ways to include CSS; prefer external stylesheets.

Selectors: tag, class, ID, descendant.

Pseudo-classes and pseudo-elements: :hover, :nth-child, ::before.

The box model: content / padding / border / margin.

Flexbox layout: display: flex with justify-content / align-items.

Text styling: color, size, weight, alignment.

Your page now has both structure (HTML) and looks (CSS). But it's still "static" — buttons do nothing, data doesn't change. Next chapter, JavaScript enters to make the page truly "come alive."

Loading practice...

2.6 Colors, Fonts, and Text

The lab below is a "text style mixer" where each control maps to a CSS property — tweak and see.

Loading interactive lab...

Color: color and background

css

.title {
  color: #4f46e5;            /* text color */
  background-color: #f1f5f9; /* background color */
}

Colors can be written several ways; the common ones are:

Color names: red, blue, tomato (simple but limited).

Hex: #4f46e5 (most common; front-end favorite).

rgb / rgba: rgb(79, 70, 229), rgba(0, 0, 0, 0.5) (the last value in rgba is opacity).

Loading concept check...

Size, weight, and font

css

p {
  font-size: 16px;       /* size */
  font-weight: bold;     /* weight: normal / bold, or 100–900 */
  font-family: sans-serif; /* font family */
  line-height: 1.6;      /* line height, for readable paragraphs */
}

font-size: text size, commonly in px.

font-weight: boldness. normal (400), bold (700), or a number directly.

font-family: the font. Often a "fallback list" — the browser picks the first available from left to right: font-family: "Helvetica", Arial, sans-serif;.

line-height: the height between lines. Body text reads better at 1.5–1.8.

Loading concept check...

Alignment and spacing

css

h1 {
  text-align: center;     /* alignment: left / center / right */
  letter-spacing: 0.05em; /* space between letters */
  text-decoration: underline; /* underline; none removes a link's default underline */
}

Note

Chapter summary

In this CSS chapter you learned:

Three ways to include CSS; prefer external stylesheets.

Selectors: tag, class, ID, descendant.

Pseudo-classes and pseudo-elements: :hover, :nth-child, ::before.

The box model: content / padding / border / margin.

Flexbox layout: display: flex with justify-content / align-items.

Text styling: color, size, weight, alignment.

Your page now has both structure (HTML) and looks (CSS). But it's still "static" — buttons do nothing, data doesn't change. Next chapter, JavaScript enters to make the page truly "come alive."

Loading practice...