Build Your Own Business Website header image

Introduction to HTML for WordPress & Genesis 2 Users – Part 9 – Styling Text 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 using HTML in WordPress and Genesis 2 seminar, we’re going to discuss styling text using inline styles. There are good ways and bad ways to use inline styles for customizing text. I demonstrated a bad way earlier with the span tag that had the color in it so now I want to show you the good ways. And by good I mean ways that are sustainable, ways that are easy to continue to use regardless of whether or not you are creating your website styles.

Types of Acceptable Inline Styles

The first type of acceptable inline style is the bold symbol. For example, let’s come over here to the About page and that is (b) and this bolds the text. Now, if you were working in your visual editor and you selected this text here, you could choose this bold like that as another way of doing that. If you do that, what that does is create a strong tag.

Bold and Italics

Let’s update that and look at it over here. So both views in the visual view look the same but one of them is a strong tag and the other is a bold tag. The difference between a strong tag and a bold tag is that strong means important text. Strong has a connotation of importance where bold doesn’t have any connotation whatsoever. It’s just the stylistic tag, it’s nothing more or less than a stylistic tag.

The same kind of thing also happens with italics. Let’s add that here, type (i) and update it. Let’s come over and take a look at it in the visual editor. You can see that that applies italics to this and if you take the same text or a group of text and come over here and hit “I” and look at it in the editor you can see what it did here is instead of an (i) it uses (em) which is analogous to . (em) stands for emphasis in this case and this is text that is emphasized.

Again, it’s importance is elevated whereas the italic text doesn’t imply anything about its importance. WordPress doesn’t have the built-in way of putting in an (i) and a (b), it just does and (em). They have a similar visual appearance in that they bold the text or italicize the text but they have a different semantic meaning and that the and the (em) are intended to reflect the importance of the text where the (b) and the (i) are not.

Small Tags

There is another kind of text formatting tag that is appropriate here and that is the small tag. The small tag just takes text and essentially makes it into subtext. Now, that can’t be done directly from the editor in WordPress, you have to actually write that code yourself. Let’s come over here and I’ll show you. You can see that it made the text smaller.

Now, it didn’t change the line height or anything like that because this is an inline tag and as an inline tag it doesn’t start a new line and it doesn’t have any structural properties to it, it just goes until it goes. Those are all inline styles that are appropriate to use in the WordPress text editor.

Additional Uses

Now, there are a couple of other things actually that you can do too that are a little bit less often used. If we’re over here in the visual view of this, you could actually come along and take text and underline it and if you look at that text underlined, actually, that’s not a good use of it, that put a span tag in instead of the standard HTML tag for underlining. Bear with me here for just a moment.

The cross through does give you an appropriate tag, so if we select that and do the cross through and then come over and take a look at it you’ll see it uses the del tag. Here it is, the del tag, opening and closing and again, this is an inline style that’s appropriate for use here.

Inline tags like this can be styled differently than their default. So the strong and the (em) can be different than bold, they don’t have to be bold. It could be something else, it could be bold and a change in font size or you could take the (em) and make it bold and italic or something like that simply by adding a class to them and then adding a CSS style to that class. We’ll take a look at that here in a few minutes but they do have this sort of default behavior inside of every browser. So these are examples of inline styles that are appropriate.

Inline Styles that are Not Appropriate to Use

There are lots of inline styles that are not appropriate for use and when I say not appropriate, I don’t mean that it doesn’t create valid HTML. It’s perfectly valid practice to use inline styles but it’s not good practice because you end up adding style code directly to the text. That means that when you decide you want to change it later, you have to change it in every location.

Let’s say you came along here with this code and added this orange color to it and then took this piece over here and added that color to it and you did that a whole bunch of different times. Well, when it comes time for you to change the appearance of your site, you’ll end up having to find every instance of this specific code and change it because changing your CSS doesn’t fix those kinds of things.

So if you’ve got this span style=”color: that’s the orange and then span style=”color: that’s the blue, you’ve added this extra code in here inside of your text and that code has a very specific color and if you do this a lot and you want to change that color, you’re going to have to find every instance of that color and take it out.

Something that people do regularly which is a problem is taking a heading like this and they say well, I don’t want it to be the black color, I want my heading colors to be this kind of purple color. So they go around there and take all their headings and they make them that purple color. Well, that’s all fine and good at the very beginning but I had a client here a couple of years ago who had hundreds of blog posts with thousands of instances of headings with colors and with colors in her text like this that needed to be changed because those colors didn’t reflect the new design.

We went through a process of search and replace inside the database trying to find all of those instances but it didn’t work reliably because she didn’t always choose the same colors and we didn’t know what we’re looking for in each instance. Ultimately what we had to do is go through every single post and take out all of those things.

So if you want to have some emphasized text that’s orange or if you want your headings to be purple, the way to do that really is to assign them a class and to style that class and that’s what we’re going to talk about next.

0 Comments… add one
0 comments… add one