Page Colors

Now the colors of the whole page. As in the CSS course, we give them to body: its background covers the whole window, and the color of its text is inherited by all the elements inside it, unless they have a color of their own.

Pure black text on a white background is very sharp. Many websites soften it: a background with a hint of color and very dark gray text instead of black. We'll take the gray called stone, a warm gray with a touch of brown that goes well with orange (slate, for example, is bluish):

Black text on a white background

Stone 800 text on a stone 50 background

<body class="bg-stone-50 text-stone-800">

The heading, the link and the badge keep their own colors: a class on an element beats a color inherited from its parent, as you know from the CSS course.

Less important text, such as Tiger's age, is often a lighter gray, so that the main text stands out: text-stone-500. That's as light as text should go on a light background: stone-400 on stone-50 is already hard to read.