Skip to main content

CSS

So far our page is very plain. CSS allows us to add styling. We will continue trying to reproduce the number bases example.

Helpful links from MDN:

Adding a stylesheet​

There are a couple of different ways to add styling to a page. The first is with a <style> tag.

However, it is better to split our CSS into a separate file and include it with the <link> tag.

Background​

Table styling​

Zebra effect​

Subtly alternating the background colors of table rows makes them significantly easier to read. We can achieve this with the :nth-of-type pseudo-class.

Rounded corners​

The easiest way to get rounded corners is to set border-radius on the <table> and then add overflow: hidden to clip the edges.

Dark mode​

Use the light-dark function to specify two variants for light vs dark mode.

You must also add color-scheme: light dark on :root to opt-in to both light and dark mode. This is a bit weird-looking; if you just added color-scheme: dark, that would force everything into dark mode. You would do this if you want your site to have its own color scheme toggler (like there is on this site) instead of going with the user's system preference.

warning

The above code is to sync the color scheme to the user's system preference. In the interactive examples, I am doing some magic so that it instead syncs to the color scheme of this documentation site.