This is the second part of the series How to Convert Tables Created in Word to a Standard Compliant Markup. In this session we show how you can style the new text by adding HTML markup to the post and then add CSS code to finish the styling.
Rick: And the way we do that work is to wrap this stuff in a div tag that we can then use to add styling. So what we’ll do here is at the beginning of this, we’ll type in div class = adverse reactions like that. And actually, I’m going to do it in a different post because I’ve prepared one like this.
So if we come over, we’re just going to go to a different post here for a second. We’ll go back to all posts and we’ll go to the next one. Not Granny Smith but Belle du Boskoop. Okay so we’ll go ahead, paste that div tag here at the head of this and then we come to where we want the bottom of that div which would be just before the next heading or next h2 tag. So we’ll scroll down here until we get down to the next h2 tag which is someplace down here. Okay there it is. Here’s the next h2 tag. I’ve already put this div you can see in here but I also put in the closing div. So you need a closing div at the end of this section and an opening div at the beginning of the next section and then opening and closing divs you know, for each section. But they’re going to be named the same. They’re all going to be named adverse reactions.
And so if we update this and then we view the post, it still actually looks the same, right? Because we haven’t done anything… we added those div tags but we didn’t add any styling. So now is where we come to custom CSS to do our styling. So we copy this and then we come back over here to Firefox which is where we’ll experiment with our styling and scroll down. And if we right click on this, you can see here is our div class = adverse reactions. Oh, I misspelled it though. I misspelled it in this one page but obviously, I spelled it right everywhere else so we’re going to come back over here and fix this because it won’t work otherwise. Yeah, adverse reactions. Let’s just come down and make sure that I got it the way I actually did it originally.
So let’s see, adverse reactions. It is absolutely necessary that they all be the same. Don’t ask me how I just changed the scale. I just clicked some funny button and changed the scale of this thing but don’t worry about that. Yes actually, zoom. Let’s go back down to 100, that’s what it was.
Okay so update that, come back over, refresh it, okay now we’ve got it right. So now we’re going to create styles for this block that’s called adverse reactions. So we say .custom .adverse reactions and the very first thing we’re going to do is… oh, isn’t that funny? Okay so the first thing we’re going to do is we’re just going to give this thing a border, border: solid thin; so that’s the first step. We’ve got our border in here.
So the next thing we’ll do is we’ll add our styling to our heading so we’re going to copy this and adverse reactions and we’re going to say h2. And instead of this border, it’s going to be border bottom. And right now, this border… this h2 tag automatically has an extra margin to it. If we… we’ll just come down here and select h2. You can see it’s got this margin there that we’re going to go ahead and get rid of. And so, we’ll just say margin 0 and however, we don’t want the lines right up against that so we will say padding: 10 px and we also want the color to be that orange color. So we’ll say background color: orange and actually obviously, it’s not orange right? It’s whatever color it is you had for this. So if we inspect this element, that color is this one right here. So that is e66c2c and then where am I? Here. So instead of orange, it’s this color. And then you don’t want black text, you want white so we’ll say color white. Okay now, you don’t want your text all the way up against… let’s see, what happened to my border bottom? I think… border bottom, solid thin… I guess we need to say black. Yeah okay, the border took the font color so we needed to give it the black background color.
Now we want to style the h3’s except we don’t want them to look like this. So those are going to have… we’re going to give them a padding. Well, we’ll give them a margin of 0 still and we’ll give them a padding of 10 pixels still. But we don’t want them to be white so we need to come back over to this page here for a second and look at our heading. Well, let’s just say the heading… that’s the same color. I mean, you understand how to change the colors anyway so if we say that the h3 tags have the same color… so now we have that working.
So now we need to give padding to the text and so again, we will copy this and instead of h3, it’s going to be p and we’re just going to lose the color entirely so that’s black. So now we have the text that’s black and headings that are this color. I mean, you would obviously change the color to the color you want. Now, we just need to pull these ULs away as well. So in this case then, we will copy this and then say UL. We got rid of that margin issue but adding padding and now it stands off.
Okay so the thing here is that you know, the only code we have between… well, the only code that we have between Google and our content is this div class, right? We’ve got our div class, we’ve got our h2 tags, we have no code inside of the HTML so that all just shows up exactly as it’s supposed to and it doesn’t have any code that Google has to skip. And the only code we have to write in order to make this the way we wanted it was really these 4 rules: adverse reactions, h2, h3, p and UL. And when we decide that we don’t want this and that color, all we have to do is change the h3 tag from this to say, blue and we have changed every one of those instances to blue now. So we have an awful lot more control over… a lot simpler control over the block of content and this happens on all of our… and it happens on all of our blocks of content right, every place we did that div tag.
Now, one thing we also want is we want a margin between each one of these things so if we said margin bottom: 20 px and then let’s say we also want a… oh, it must be missing a closing div there because if we come down here, there’s out… yeah, I’m missing a closing div so it doesn’t look quite right. But if we also say padding bottom 20 px, now what we have is… semi-colon. Now, we have a little space below before we hit our line and then we have the space in between these 2 things. And I’m going to just copy this stuff and go back and fix my… oh, I forgot. I have some h4’s also. So we should style our h4.
So again, we come over here, copy the h3, style it as an h4. There we go. So now we’ve got h2, h3, h4 styled and if I wasn’t missing that closing div tag, this little line wouldn’t be here. It wouldn’t be doubled up and it would look the way you want to. I’m just going to go ahead and copy these, go back over and fix that missing div and I think I must be missing the closing div at the very beginning… on this very first one here. So looking for my… yeah, I’m missing that closing div right there.
So now, if we update that, come back over here to Firefox and refresh it, paste our code back in there again. So now, it looks the way you want it to look. So you’ve got your heading the way you want it. You’ve got a heading tag or your h3 tag. You’ve got a content properly separated, you’ve got an unordered list, your text is bold. I noticed that in some of these places, you put a line through there so you can still do that as well. And anything else that you want to format this way can still be formatted to make it… to continue to make it work with a single definition of code and a multiple application of that single definition.
So Monty, does that make sense?
Monty: Yes, it does Rick. Thank you. It’s probably much more complicated than I needed to but you know, you gave a lot of information. That can be a little dangerous, I think, at times.
Rick: Well and so what I’m going to do is I’m going to post this code in the forum, in the Live Question and Answer section of the forum, this custom CSS code, so that you can have access to it and play with it.