The least amount of CSS for a decent looking site 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 vi...
First seen: 2025-10-07 01:08
Last seen: 2025-10-07 17:10