A Few More Simple CSS Files

Once upon a time, web pages were functional. Functional but dull. Unless you used tricks like enclosing text in tables or you turned to the much-maligned <FONT> tag, there wasn’t much could do about spicing up a page’s appearance.

Then along came Cascading Style Sheets (CSS for short). CSS enables you to add consistent formatting to web pages — everything from changing the sizes of fonts to setting margins to setting colours and the alignment of text. And more. As the years went by, CSS became more complex to fit needs of people who needed more intricate layouts for their sites. To be blunt: CSS got more convoluted and difficult to use, whether you’re a web designer or not.

That doesn’t mean there isn’t a place for simple, clean CSS. Especially for those of us who are publishing small websites and blogs and the like. I looked at eight simple CSS files in a previous article. Let’s look at some more CSS files that get the job done without adding too much weight to a web page or a website.

Simple.css

The goal of this file, created by Kev Quirk, is to make HTML look good, really quickly. And Simple.css lives up to that billing.

Simple.css offers clean, unadorned styling for not just text elements but also for forms, buttons, navigation menus, and tables. A page styled with Simple.css looks good but isn’t visually overwhelming. Plus pages are responsive, so what you see renders nicely on smaller screens.

axist

Weighing in at around 5 KB, axist packs a lot into that relatively small amount of CSS. You get large, easy-to-read text (which is great for those of us whose eyesight is in decline).

Tables, forms, and lists are also nicely formatted. There’s enough padding on either side of the screen so you don’t feel like you’re reading right across the screen (as you would have in, say, 1996). Like Simple.css, pages with axist applied to them are also responsive — I’d say they’re slightly easier to read on a smaller screen.

SPCSS

The SP in SPCSS stands for simple and plain. This stylesheet definitely lives up to that billing.

In a lot of ways, SPCSS reminds me of Simple.css, but stripped back to even more of the basics. It’s not flashy, but it’s not dull either. And it has a dark mode if that’s your sort of thing. While responsive, the text is a bit smaller than Simple.css and axist. You can edit the stylesheet to change that if you like.

Bonus: 100 bytes of CSS

If you don’t need to style every element (or even the main elements) on a web page, you’ll want to check this out. It’s a snippet of CSS that controls the maximum width of a web page, the size of fonts, the spacing between lines, and margins. Just that and nothing else.

You can embed that snippet into a web page or put it in a separate CSS file so you can use it across multiple pages. The person behind this also offers another 100 bytes of CSS that you can use to add margins to elements on a page and to change the text to a sans-serif font.

Final Thought

CSS doesn’t need to be complex. It doesn’t need to be flashy. And you don’t need to become an expert web developer or designer to use it.

Using the CSS files (and one snippet) that this article introduces are a great way to quickly and attractively format a simple web page, a simple website, or a document formatted with HTML.