• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

nSiteful Web Builders

Building a Better Web - One Site at a Time.

  • Home
  • About
    • Testimonials
    • Resources
  • Web Sites
  • Online Marketing
  • WordPress Support
    • Customized WordPress Training
    • 60-for-60 Sessions
  • Web Applications
  • Blog
    • Archive Listing Minimalistic
    • Blog Articles Grouped by Category
    • Case Studies
    • General
    • Portfolio
    • Reviews
    • Snippets
    • Techniques
  • Contact Jeff
    • Purchase Retainer Consulting Hours
    • About Retainer Consulting Hours

By Jeff Cohan, September 21, 2022

Avoid Direct Styling; Use CSS Instead

On This Page...

  • What’s Easy Isn’t Always What’s Best
  • What’s wrong with direct styling?
  • What’s the alternative to direct styling?
  • “But I don’t know CSS!”
  • Additonal Resources
  • Related Posts

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.

WordPress Editor Toolbar Buttons

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 you 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.

Add CSS using the 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

Related Posts

  1. CSS Descendant Selectors
  2. Underlining for Emphasis: How to un-underline text on a Web page with CSS
  3. How to Create Tooltips with CSS (Only)
  4. Shortest CSS Grid Tutorial EVER!
  5. Everything you could ever want to know about the role and importance of HTML headings in Web documents, including blogs
  • Choose the best match.

Written by Jeff Cohan · Categorized: Techniques · Tagged: CSS

  • Choose the best match.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

mailchimp signup

Subscribe to get notified when new articles are published. Unsubscribe any time. No spam. I promise. Check out my newsletter archives.

social

Twitter Facebook LinkedIn

Recent Articles

  • Use Case for Custom Post Type: “In The News” March 10, 2023
  • Create a Custom Shortcode to Display a MemberPress Membership Price ANYWHERE on Your Website February 5, 2023
  • Avoid Direct Styling; Use CSS Instead September 21, 2022
  • Blog Tags: What They Are (and What They’re Not) August 5, 2022
  • How to Create a Simple Custom Events Plugin May 24, 2022

Filter By Category/Tag

Categories

  • Case Studies (7)
  • General (61)
  • Portfolio (5)
  • Reviews (12)
  • Snippets (16)
  • Techniques (38)

Popular Tags

Advanced Custom Fields Blogging Child Themes Content Marketing CSS CSS Grid Customer Service Custom Fields Custom Post Types Diagnostics Facebook FooGallery Genesis Gutenberg HTML Images iPhone Libra Live Chat Marketing Media MemberPress MemberPress Courses mu-plugins MySQL Photo Gallery php Pinterest Plugins Post Formats Pricing Project Management Security SEO Seth Godin Shortcodes Social Networking Surveys Taxonomies Trello Twitter Video Web design Web forms WordPress

siteground wp hosting

Web Hosting

wp101

EasyWordPresstutorialvideosforbeginners.
MemberPress CTA

Footer

Background

Web Sites | WordPress Support | Web Applications.

Formally trained in liberal arts and education (I have a B.A. in Government from Harvard and studied Secondary Education at Rutgers Graduate School), I have honed my skills in the communication arts and sciences as a teacher, trainer, instructional designer, writer, photographer, calligrapher, helpdesk manager, database programmer, and multimedia developer.

(I've also been a group counselor, waiter, bartender, bicycle messenger boy, computer salesman, carpenter's helper, financial analyst, and school board president.)

Tech

Systems since 1983.
Web sites since 1994.
PHP since 2001.
WordPress since 2007.

Contact

770-772-5134
Email Jeff
Send Money
All Ways

Copyright 2023, nSiteful Web Builders, Inc.

 

Subscribe

Pardon the interruption. I know popups can be annoying. But I’d love to have you as a subscriber.

Sign up to be notified when new articles are published. Unsubscribe any time.

* indicates required

Powered by MailChimp

×