Build Your Own Business Website header image

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 9 – Styling Texts with Inline Styles

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Next in this Introduction to HTML for WordPress and Thesis 2 Users seminar we’re going to talk about styling text with inline styles.

Add Additional HTML Elements to Text

The best and only good kind of styling that you can do inline are essentially adding additional HTML elements to the text. So for example, in order to make text bold you can wrap them either in a b tag or a strong tag. In order to make it italic, you can either wrap it in an i tag or an em tag. In order to make it smaller, you can wrap it in a small tag. Typically, emphasis is the same thing as italic and important text is a strong or bold.

Differences Between Bold and Strong, Italic and Emphasis

Let’s look at the About page here. Take that and click the bold and when you switch over, you can see WordPress added a strong tag in front of that. Now if you’re writing it yourself, you can always just write b because strong means something more than bold. Strong means that it is an important text, not just that it’s bolded but that it’s also important whereas bolding doesn’t hold any significance. It just means we’re bolding this text through a visual purpose but it’s not anymore important than any of the other text whereas strong means that it is more important.

The same thing is true with i and em; i means that the text is italic, em means that the text is emphasized. So one thing is saying something about style and the other thing is saying something about the importance of the content.

So if you come over here and click italics, come back over and take a look at it you’ll see that WordPress puts em in instead of i. So WordPress does em and strong instead of b and i and for WordPress they’re interchangeable but you can choose to not do it interchangeably by just hand coding b and i if you wish.

Current practice suggests that bold and italic are better practice than em because ems are always signifying importance whereas bold and italic are neutral. So the most semantic way to do this would be to use bold tags and italics tags for things that are just visual and strong tags and em tags for things that have particular importance.

Text Align Inline Style

That’s the good kind of inline styles and actually there’s one other inline style that I tell you is probably fine to use and that is your text align inline style. So for example, you can use this to center it.

If we come over and take a look at it and we come down to h2, it’s now saying style=”text-align: center;” this is an inline style and this is almost always bad practice. It’s legal practice, it’s valid practice and there are times when as a professional you may very well want to use them but that’s an unusual situation, not a typical situation.

When you don’t Want to Use Inline Styles

The typical thing people do with the text editor is they’ll say, you know I think this text should be red so they come along and they do that and then make the text red. Let’s take a look at the HTML. Now you get a span tag, right? There’s the span tag and it says style=”color” and then it’s giving you the red color and then it has the closing span tag. So everything inside that span tag has this red color.

This is the correct use of the span tag but it’s not the correct use of style because every time you have an inline style, if you decide that that color of red no longer looks good on your site, you have to go find every instance of that everywhere on your site and change it.

Once upon a time I worked on a site that had hundreds of blog posts and the woman had a very specific color scheme that she used and all of her internal headings had this purple color and then she had some other text that had light green color. Then she wanted to change her whole color scheme because she had a whole brand new design for a website.

She had to go through each and all of her post to find all of those colors and delete them. Unfortunately, she couldn’t figure out how to do the Search and Replace system inside of the database which is what she really should have done. Because she could have gone through and used the database to try and find that but she just had way too many inline styles and just had to go from post to post opening up each one and changing those style colors which is the hard way to do it.

The easy way to do it is again, if you want this color to be red, you would say span, assign it a class, class= we’ll just call this one “byob-emphasis” and then what you can do is you can go create a class that makes this red and then later you probably still want the same text highlighted. If you change your color then you just change the color to a different color in the class which is why inline styles are generally speaking very bad practice.

You can comfortably use an inline styles for things like for bold and italic and centering the text but you should not use it for colors or for font size or for font styles or for any of the other kinds of things that people regularly use it for. I’m sorry, you can also use it for cross outs. So if you do that, come over and take a look at this down below the h1 heading, that’s where it is, this is del tag.

So those are acceptable uses of inline styles and the typical things that new people do where they choose fonts and font sizes and font colors from their text editor is not good practice and it’s not a good idea, I strongly encourage you not to do that. Instead, what I encourage you to do is to come up with a style definition for specific elements and then just assign a class to it that connects to that style definition and that’s actually everything we’re going to talk about next.

0 Comments… add one
0 comments… add one

Leave a Comment