Summary: People often over-engineer solutions, and it leads to them running into problems with their CSS. In this article, we'll take a look at the least amount of CSS that you need to make a decent looking page.
The fun part of making a website is that if you write your HTML and nothing else, you have a responsive website.
Granted, if you have images they can cause some overflow issues.
So we can start things off by fixing that:
img {
max-width: 100%;
display: block;
}It’s possible you have videos or SVGs that are also causing problems (less likely with SVGs though), so if you need, you can expand upon this a little bit.
img,
svg,
video {
max-width: 100%;
display: block;
}Improving the typography
The first thing we can do is change the font family since the default is never very exciting.
We’ll just use a basic system-ui for this example. It has pretty good support these days, and looks good on every system without having to worry about loading in any extra fonts.
In general, the font-size is a little small as well, so we can bump it up, and the default line-height is always a bit tight, so anything within the 1.5 to 1.7 range should do:
body {
font-family: System UI;
font-size: 1.25rem;
line-height: 1.5;
}Though not perfect, this is already a huge improvement over the regular defaults.
Adding Dark Mode Support
Many people love dark mode, so let’s enable it based on a user’s system preferences.
We can do this by using the color-scheme property:
html {
color-scheme: light dark;
}This will set the user-agent-styles to either a light or dark theme, based on the users system preferences.
If you’d prefer, we can do this without CSS as well!
<html lang="en" color-scheme="light dark"></html>A small note on following the system preferences
While this is really handy, it is a best practice to allow users to manually toggle the color-scheme as well.
Some people prefer a dark system theme, but light website themes, and vice-versa.
Restraining Content Width
Line-length is one of the most important things when it comes to the readability of text.
We generally want to try and fall somewhere in the 45-90 characters per line range (for body text, not headlines).
To make the website more readable, we’ll limit the content width using a main element and some CSS magic:
main {
max-width: min(70ch, 100% - 4rem);
margin-inline: auto;
}The min() function here will pick whatever is smallest, either 70ch or 100% - 4rem. Because we are inside a min() function, we don’t need to use a calc().
Whatever the output from that min() function, the width is less than 100%, so the page will be stuck to the left side of the viewport.
We can then use margin-inline: auto to center it, as this acts on the margins on the inline axis, so in any horizontal writing modes, that means both the margin-left and margin-right are auto.
You might want to switch out the main selector for a .container or .wrapper so you can have more control over where you use it.
And with that, our final CSS file looks like this:
html {
color-scheme: light dark;
}
body {
font-family: system-ui;
font-size: 1.25rem;
line-height: 1.5;
}
img,
svg,
video {
max-width: 100%;
display: block;
}
main {
max-width: min(70ch, 100% - 4rem);
margin-inline: auto;
}Build on top of this
This is just a quick start to get things off the ground, though it could be used for a very simple page as well.
For the most part, though, you’ll probably want to build on top of this, but it should be able to act as a nice jumping off point!