Basic Font and Colors

Let’s assume that a designer created basic typography for your table, and they suggested using the “Segoe UI Light” font for standard text elements, and “Segoe UI Semibold” for strong text. The designer also collected a number of colors, the shades of blue, which is a perfect accompanying set for the ocean theme. None of these colors have a standard name in the CSS palette, so the designer listed them by their fantasy name and the six-digit hexadecimal code: “Sky Blue Midnight” (#07093D, for dark backgrounds), “High Sky Blue” (#107FC9, for highlighted backgrounds), and for the alternating table rows “Threadless light” (#9CC4E4), and “Threadless box” (#E9F2F9).

Applying font settings

Let’s start applying the font settings!

Basically, you have two options. Because the page you are about to style contains only the table, it seems to be a good choice to set the font through the body rule, like this: