Eight CSS Files to Style Your Web Pages and Documents

It’s fairly easy to create a basic web page or document — I show you how to do that in my book Learning HTML: A Quick and Dirty Guide for Writers. Pages and documents formatted with plain HTML are kind of bland. They’re readable, but they lack a bit of visually flair.

That’s because HTML isn’t a very flexible formatting language — it’s designed more for structure than presentation. You don’t get the same typographic control that you do with common word processing and desktop publishing programs.

Cascading Style Sheets (CSS for short) change that. CSS is a way to add precise formatting to anything written with HTML — that includes web pages, online documentation, and ebooks published in the EPUB format. With CSS, you can change margins, indents, fonts, and more. Think of CSS as being like the templates you use in a word processor or a desktop publishing tool.

Over the years, CSS has become more and more complex as designers have tried to apply the complex layouts and fine-grained typography found in the print world to the web. That said, for many purposes, basic, barebones CSS is more than enough for what you need to do. And instead of cobbling together your own CSS files, you can take advantage of some existing ones.

Let’s take a look at eight CSS files that you can use to apply a quick, simple makeover to your HTML. All of them have been released under one open source license or another, which means you can modify them in way that you want or need to.

(Note: If you need a quick tutorial in CSS and how to use it, this is a pretty good one.)

MVP.css

I first ran into MVP.css when I was refreshing some documentation landing pages at a former Day Job^TM. It’s designed to help you quickly prototype and deploy a simple page or site (MVP is short for minimal viable product in case you’re wondering), but you can use it with a fully-fledged site.

MVP.css is simple and clean. It’s also easy to modify. I liked it so much that I renovated both The Plain Text Project and my personal website using it.

And if you’re looking for an example of what a page formatted with MVP.css looks like, you’ve already found it!

awsm.css

awsm.css claims that it It makes your HTML beautiful. Beauty is in the eye of the beholder, but a web page styled with awsm.css does look pretty darned good.

Like MVP.css, this file is simple and clean. You get an attractive web page or site that’s easy to read. On top of that, awsm.css isn’t all that difficult to modify.

Here’s what a web page formatted with awsm looks like:

Marx

Marx reminds me of a stylesheet I created for HTML documentation back in the 1990s. Well, Marx is a lot better than my efforts were …

Again, you get a clean, simple, and easy to use stylesheet. Out of the box, the formatting isn’t fancy. That said, though, do you really need complex layouts and designs?

Here’s what a web page formatted with Marx looks like:

LaTeX.css

Confession time: while I’ve been known to use LaTeX to format and publish a document or two, I don’t like the look of the standard LaTeX book, article, or report. Especially the fonts those documents use, which is called Computer Modern. But there are more than a few people who do.

One enterprising developer came up with a way to replicate the look and feel of standard LaTeX documents on the web with LaTeX.css. This stylesheet does a good job of mimicking a LaTeX document — right down to its support for math, sidenotes, and tables.

Here’s what a web page formatted with LaTeX.css looks like:

Typesettings.css

The goal of Typesettings.css is to create a minimal website or article design, inspired by traditional graphic design fundamentals. It does a very good job of that.

A page formatted with Typesettings.css is a bit blocky. The fonts are larger than with many of the other CSS files that I introduce in this article. That said, a page or document flows nicely and is easy to read. In some ways, this stylesheet seems to adopt some of the principles of Brutalist web design. And I don’t mean that in a bad way.

Here’s what a web page formatted with Typsettings.css looks like:

tacit

Visually, tacit is similar to Typesettings.css. It’s not quite as blocky or brutalist, though. In fact, pages formatted with tacit are a bit more compact than one formatted with Typesettings.css.

The result is a page that’s pleasing to the eye. It’s nothing too fancy, but it gets the job done.

Here’s what a web page formatted with tacit looks like:

generic.css

Don’t let the name put you off. generic.css is simple but it’s far from bland. It’s based on another CSS file called Sakura, but I think generic.css is the more attractive of the two.

With generic.css, you get a simple but stylish page. Pages formatted with this stylesheet are easy on the eyes (literally and figuratively). They’re almost like printed pages or documents formatted with another of the CSS files I cobbled together years ago. The ones formatted with generic.css are much better looking than those formatted with my stylesheet though.

Here’s what a web page formatted with generic.css looks like:

new.css

new.css is small but it packs a bit of visual punch. The results aren’t overwhelming. In fact, a page formatted with new.css is compact and minimal.

Sometimes, though, that’s all you need to effectively convey information in a way that a reader can easily engage with. And isn’t that the point to publishing on the web?

Here’s what a web page formatted with generic.css looks like:

The eight CSS files that this article introduces aren’t the only games in town. They’re just ones that I like. Using one of them is a great way to quickly and attractively format a simple web page, a simple website, or a document formatted with HTML.