How to edit colorful text without writing CSS

If you're a writer (and old enough to remember), you probably still long for the days when you didn't have to hand your copy to a designer before it reached its audience just because you needed some basic styling. CSS can be an annoying pain, especially for editors whose work involves publishing and maintaining a lot of copy. Writers don't necessarily want to code, and understandably so. Yet they often do want to style their copy. CSS is code; a language with little style to speak of. CSS pollutes the editing page and makes the raw copy harder to read; it is overly verbose; it is difficult to maintain and tends to bleed issues that are difficult to resolve.

Don't get me wrong: in theory, CSS may be one of the great inventions of the 20th century. It pulled itself out of HTML in order to allow web copy to look stunning, no matter which device the text was loaded on. But CSS also adds a layer of complexity to the writing process that most authors would rather avoid.

Back in the good old days of web publishing (the 90s), you could perfectly get around styling using only HTML tags. During this era, the copy was king and in full control of the output: editors could change colors, fonts, spacing, and many other styling options from within their own code and without much of a fuss. There was no need to edit an external stylesheet or to account for overriding styles in the theme. The downside of these simpler times was that you ended up with a web full of horrible pages. Horrible even by yesterday's standards: blinking text, inconsistent styles, overdone color schemes, tables a-plenty and font changes all over the place, etc.

Then came HTML4 and the global adoption of CSS as the only acceptable styling standard. Given the impact that CSS had on readability, inline style tagging through HTML quickly went the way of the dinosaurs. In modern parlance, HTML style tagging was canceled. Some would argue that so did the art of crafting great copy -- but that's a different story.

Here's a little fact: using a few tricks, you can minimize the need for explicit CSS on the copy. There are several ways to do so. One is to use Markdown and create a matching CSS framework. But that's arduous, time-consuming, and it requires a great deal of creativity. Another is to use CSS to grant some power back to HTML tags. Here's a stylesheet example that involves font coloring:

span[white] {
	color: white;
}
span[black] {
	color: black;
}
span[blue] {
	color: blue;
}
span[red] {
	color: red;
}
span[green] {
	color: green;
}
span[yellow] {
	color: yellow;
}
span[_white] {
	background-color: white;
}
span[_black] {
	background-color: black;
}
span[_blue] {
	background-color: blue;
}
span[_red] {
	background-color: red;
}
span[_green] {
	background-color: green;
}
span[_yellow] {
	background-color: yellow;
}

This small stylesheet allows the use of minimally intrusive HTML tags to become part of the creative toolbox of any copy editor. For example:

<span green>This text is green</span>.
Is this yellow button <span blue _yellow>red</span>?
No: it is <span red _yellow>blue</span>.

which results in:

This text is green.
Is this yellow button red?
No: it is blue.

If simpler tagging is part of your wishlist, know that you can perform similar tricks on fonts and other attributes.

References: Markdown