• 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, May 9, 2014

Underlining for Emphasis: How to un-underline text on a Web page with CSS

image of Boy Who Cried Wolf as analogy for underlining for emphasisOne practice that probably sticks in the craw of many a Web developer is the use of underlining for emphasis.

No matter how loudly and often we tell our clients who maintain their own Web sites (via WordPress and other CMS-driven platforms) that using underlining for emphasis on the Web is a very bad idea, many of them do it anyway.

Coming from the worlds of handwriting and print, some people simply find underlining for emphasis a tough habit to break. In handwriting, for goodness sake, underlining is pretty much the only way, and certainly the easiest way, to add emphasis to a word or phrase.

Underlining for emphasis on the Web is like crying wolf.

If building Web sites is not what you do for a living, you might be wondering what the big deal is about underlining for emphasis.

Well, I’ll tell you.

Since the beginnings of the Web, links (aka hyperlinks, aka anchor tags) have been rendered with underlines. The default behavior of most browsers is to underline links. People who use the Web expect underlined content to be links. It’s a time-honored convention.

And since we want people to click on our links, it’s a bad idea to confuse and frustrate them with underlined words and phrases that are not links. (The fact that in recent years, it has become fashionable to style hyperlinks in their non-hovered states without underlines doesn’t alter the fact that underlined text = hyperlink in the minds of most Web surfers.)

So what’s a Web developer to do?

Here’s a simple snippet of CSS markup that will effectively defeat the underlining of content that uninitiated or forgetful content publishers try to underline:

u, span[style="text-decoration: underline;"] {
	text-decoration: none !important;
	font-style: italic;
	font-weight: bold;
}

Line 1 lists the two selectors to which the following rule should be applied.

  • The first selector is a simple element selector, specifying the u HTML tag, for underline.
  • The second selector is a combination of an element selector (span) and an attribute selector (style) based on an exact attribute value (text-decoration: underline;). This selector matches what WordPress inserts when a user clicks on the U toolbar icon when editing in Visual mode.

Next come the rule declarations.

  • Line 2 is the biggie. It is what defeats what the author tried to do. Note the !important declaration. This case — the need to override an inline style — is one of only a very few situations in which I would ever use or recommend using the oft-misused !important declaration. You’re not going to defeat an inline style without declaring the declaration !important.
  • Lines 3 and 4 pay respect to the fact that the author wanted to emphasize the content in question. I’m choosing to combine the two font properties (font-style and font-weight) that people typically use to emphasize content. Your mileage may vary; you could, of course, use properties like color or font-size (or anything else that works for you ) to effect the effect you want.

Related Posts

  1. How to use Advanced Custom Fields with Genesis
  2. NextGen Gallery Compact Album Mods
  3. CSS Descendant Selectors
  4. How to Create Tooltips with CSS (Only)
  5. Bring your Facebook Fan Page to your Web site
  • Choose the best match.

Written by Jeff Cohan · Categorized: Techniques · Tagged: CSS, HTML, WordPress

  • 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

×