Avoid Direct Styling; Use CSS Instead

Last updated April 25th, 2023 at 05:45 pm

In WordPress it’s very tempting and easy to use the toolbar buttons in the editor (direct styling) to affect how blocks of content appear on the front end.

What’s Easy Isn’t Always What’s Best

In most cases, you should avoid that temptation. Let me explain with an example.

I find that many people use those toolbar buttons to change the way headings appear.

(By the way, I strongly support the use of headings in pages and posts. Here’s a brief article I wrote almost a decade ago about the importance of headings.)

By default (based on the theme) a heading — let’s say a level-2 (H2) heading — might display as follows:

left aligned
bold weight
normal style (not italic)
20 pixels in font size
black

Suppose you want H2 headings to display like this, instead:

center aligned
normal weight
italic
48 pixels in font size
fuchsia

You might be tempted to use those toolbar buttons to set those display properties directly.

Please don’t.

What’s wrong with direct styling?

Direct styling poses several problems.

1. Too much work: You shouldn’t have to do direct styling for every H2 element you ever add to a page or a post.
2. Opportunities for Inconsistencies: If you forget any property when doing direct styling, your site will not display like elements consistently and uniformly. Not a good look.
3. Maintenance: What if you decide you don’t like fuchsia any more? Suppose you’ve already added 20 directly styled H2 elements in your pages and posts, you’ll have to re-edit every page and post that includes those elements. (Now imagine there are 200 — or 2,000 — H2 elements on your Web site.)

What’s the alternative to direct styling?

Short answer: CSS.

Longer answer:

CSS stands for “Cascading Style Sheets”, which is the official term for global styling rules that all browsers can read and implement.

What this means is that you — or your Web developer — can create styling rules that apply to every instance of the “stuff” that appears in your pages and posts.

So, if you want every level-2 heading to always display as center aligned, normal weight, italic, 48 pixels in font size, fuchsia — all you have to do is create a styling rule for the H2 element with those properties.

Here’s what that styling rule looks like, in CSS markup:

h2 {
	text-align: center;
	font-weight: normal;
	font-style: italic;
	font-size: 48px;
	color: fuchsia;
}

If you later decide you prefer hotpink to fuchsia, all you have to do is change one part of one line of markup (the value for the “color” property on line 6) in your styling rule for the H2 element, and then every instance of an H2 element throughout your Web site — and there could be dozens, scores, or hundreds of them — will automagically display as hotpink the next time any page with an H2 element is loaded.

“But I don’t know CSS!”

You don’t need to be an expert in CSS to use CSS.

Almost every WordPress theme now includes a way to add CSS styling rules within the theme Customizer.

If you’re working with a Web developer, he or she can create those style rules for you. If you’re working on your own and are fairly resourceful, there are any number of ways you could get what you need from knowledgeable people.

By the way, there’s a chance that once you stick your toe in the waters of CSS, you might want to dive in!

Additonal Resources

Mozilla Developer Network on HTML Heading Elements

W3 dot Org Cascading Style Sheets Home Page