Don’t be scared of the headline! We’re not going to dive too deeply into code here, we’re just going to take a look at some of the most basic text styling codes available if you’re in a pinch.
From time to time, you might want to manually override the styles programmed into your website’s CMS (Content Management System) if you have one. In other situations, your CMS might not offer text styling buttons in certain text fields, and it’s up to you to force the text to submit to your will, assuming said text field accepts HTML (HyperText Markup Language) – some text fields aren’t programmed to, and you’re just out of luck there.
To get started, take a look at the following paragraph:
Once in a while, you might want to adjust the font size of a few words. There might be times in which you need bold text, and others in which you need italic text. You might even want to use both. On occasion, you might need to change the color of some text to make it stand out. If you want to indicate the removal of some content, you probably want to use a strikethrough. And if you can’t resist a bit of old-school highlighting, there’s always our friend, the underline.
As you can see, it’s chock-full of manual overrides in styles. To understand what’s going on behind the scenes, the first thing you have to know is the concept of HTML tags. An HTML tag is a bit of code that web browsers can read and then used to style content. There should always be a start tag, which consists of a “less than” symbol, the tag (which, and a “greater than” symbol, like this:
<tagname>
Next comes the content you’d like the tag to apply to:
<tagname>Content goes here.
And finally, an end tag where the styling you’re assigning ends and is the same as the start tag but with a slash before the tag name, like this:
<tagname>Content goes here.</tagname>
Now to explain each of the tags used in that sample paragraph above. Most are very straightforward, except for font size and color. I’ll explain those at the end.
<strong>bold text</strong> = bold
<em>italic</em> = italic
<strong><em>bold italic</em></strong> = bold italic (note the order of the nested tags – it’s <strong><em>...</em></strong> and not <strong><em>...</strong>)</em>
<del>strikethrough</del> = strikethrough
<u>underline</u> = underline
As for the two remaining styles, font size and color, they both use the <span> tag in conjunction with the style attribute. The proper syntax is:
<span style="font-size: 20pt;">font size</span> = font size (note the end tag just closes the <span> tag – you don’t have to close a style attribute.)
<span style="color: #ff00ff;">font color</span> = font color (same here – just close the <span> tag.)
I don’t recommend you go crazy with all these “HTML elements” as they’re called, because your CMS was programmed to make your website’s text follow a specific design, be consistent, and look professional. But there are a few situations in which it’s necessary to…
…do your own thing.
Or in other words:
<span style="font-size: 20pt; color: #ff00ff;"><strong><em><u>...do your own thing.</u></em></strong></span>
About The Author
