Styling web prose part 2: A tad more style
If you read my first article on styling web prose, you know that you can create basic, readable text on the web with just a few lines of CSS.
Now the fun doesn't have to stop there. But before adding any more style, let's consider this quote by one of the most stylish people ever, David Byrne of the Talking Heads.
In his book, How Music Works, he describes how,
Simplicity is a kind of transparency in which subtle nuances can have outsize effects. When everything is visible and appears to be dumb, that's when the details take on larger meanings.
In that spirit, I'm going to find the details of my article that I want to stand out, and give them the proper styles to do so. Meanwhile, I'll try keeping everything else as simple, plain, and even dumb, as possible.
Styling by HTML tag
My goal is to add a tad more style, but in a way that enhances—not distracts from—what I'm trying to say.
But how? And where?
Well web pages are made up of HTML elements, so I could just slap styles on some of those individual elements willy nilly. I could make this word red and give this word a blue background and extra padding. I could cross out this sentence since I don't need it anyway.
But that's just distracting. Those styles don't correspond to anything meaningful.
A better way is to style by element tag. The tag represents what kind of HTML element it is. For example, prose consists of element tags like p (paragaph), h1(heading 1), and blockquote.
Why focus on HTML elements tags when styling prose? Because the element tag should already carry the semantic meaning of the text inside it. The styles are just a way to help convey that semantic meaning to a human reader.
This concept is called semantic HTML, and part of what sets web prose apart from just any old text.
Let's dive a little deeper into semantic HTML, and maybe that will help me come up with what element tags to style. If you really can't wait to see what styles I add, you can scroll down here.
Write once, style forever
To understand the power of semantic HTML, let's take a trip back to middle school (at least the middle school I attended circa 2005-2009).
In my day, we'd do our writing assignments in Microsoft Word. Alongside the writing assignment, there was a "style guide" (based off the MLA style manual) that described how the writing should be presented. It included document-wide requirements you may be familiar with:
- 12 point font size
- Double spaced
- Times New Roman font
- Paragraph indentations
The style guides came with a few other guidelines like how to cite sources properly, how much indentation blockquotes should have, etc. I also remember a rule like "don't start a sentence with and, for, but, or so" which I now unapologetically break.
Implicit in these style guides was the fact that style informed semantic content, and not the other way around. You knew something was a heading because of it's font. You knew something was a blockquote because it was indented a certain amount.
I'm sure the difficult job of being an English teacher was made a little easier when all papers were formatted the same way. It also taught us some basics in presentation and style.
But on the web, this is thankfully reversed. Elements of text—and other things, like images, videos, and buttons—are first placed into an element tag that corresponds to their semantic meaning. The title of a page is encapsulated in a title tag. The main heading is encapsulated in an h1 tag. Blockquotes are encapsulated in blockquote tag.
Then you can decide how to style those specific elements—like how much bigger headings should be, and how much extra margin blockquotes should have.
The beauty of this is that you don't have to go into your document and manually change all the blockquotes if you—or your teacher—decides they need more margin. You can style them at a high level by their element tag, and can modify those styles for different contexts, different devices, and different users, all without ever having to touch the actual content again.
Letting the user-agent do the work
In fact, once text elements are placed in their proper HTML tag, you barely have to do any styling at all. Browsers will take care of a lot of the basic styling for you. This is called the user-agent stylesheet (since it's an agent—also known as a browser—acting on behalf of the user).
You may notice, for example, that strong (i.e. bold) elements are bolded and a (i.e. link) elements are underlined.
I didn't add either of those styles manually. They were added automatically by your web browser. My browser also makes heading elements bold, makes em or "emphasized" elements italic, and adds 40 pixels of margin to blockquotes. All without me doing a thing. That's simplicity.
Writing for machines and humans
Besides relieving some of the painstaking tedium of manually styling elements of text, there's another benefit to semantic HTML: It makes the document machine-friendly.
That means things like search engines and AI chatbots can parse and "understand" your content automatically, and then help share it with the humans who may find it useful.
Take, for example, a screen reader—an electronic assistant that reads the contents of a web page to someone with a visual impairment. Imagine if none of the text content on a page was encapsulated by an element tag, and you had to infer from its style what it was—like it was a middle schooler's essay.
The screen reader would have to say: "Here's a line that is bolded, centered and 16 point font" and you would have to infer that's a heading. And then it'd say, "Here's a few lines that have extra margin" and you'd have to infer that was a blockquote.
Fortunately for the visually impaired, HTML is semantic, so a screen reader can use element tags as cues to give the (listening) reader proper context.
The only drawback to writing text in HTML elements is that, while it's machine-friendly, it's not always human-friendly to place everything in ugly brackets like <p>. This is the reason markdown was invented, as a more human-friendly way to write text for the web. Markdown uses symbols like "#" to demarcate headings, "-" for lists, or "_" for italics, which can be converted directly to HTML elements. Although you do have to use a markdown-parser or a plugin do the conversion.
Styling blockquotes
So I've got my prose neatly slotted into semantic HTML element tags. I have a few main styles that apply to the body of text. I'm relying on the browser to add other basic styles so everything is as plain and simple as possible.
Now I just need to find the details I want to stand out in this sea of plainness.
While the stuff I wrote is mostly plain, I did include some words of others—i.e. blockquotes—and I wouldn't have included them if they weren't significant.
So why not add a few styles to blockquote elements to help them stand out a little more?
I don't want them to be crowded out by the surrounding text, so I'll add more margin, say 3rem, on the top and bottom.
I'll also give blockquotes a slightly bigger font-size because I want them to have an outsize effect.
Finally, to highlight them a little more, I'll add a little border on the left by setting the margin-left property to 0, adding 2.5rem of padding on the left side, and giving it a 4 pixel wide solid left border.
And, just for fun, why not make the border a green color to add a little bit of flare?
There's not much other color in the article so this helps say that the blockquote is really important. In fact, if my reader remembers anything from this article, I want it to be the quote from David Byrne. He articulated the point of this article better than I ever could. Everything else is plain and dumb.
Altogether, the CSS ruleset for blockquote element looks like this:
blockquote {
margin-top: 3rem;
margin-bottom: 3rem;
font-size: 1.5rem;
margin-left: 0px;
padding-left: 2.5rem;
border-left: 4px solid rgb(95, 209, 150);
}
And that's all he wrote (in the stylesheet). It ain't much, but it's honest work.
Hopefully the simplicity allows the small bit of style I did add to have an outsize effect.