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. Kevin Powell July 11, 2023
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.
... continue reading