Build Your Own Business Website header image

Customizing the Content with HTML and CSS – Part 4 – Style Heading and Link

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.

Code Used in This Lesson

.important h3
{
   margin:0.5em;
   font-weight:bold;
   font-size:1.75em;
   color:#3e4aa4;
   text-align:center;
   font-family:Arial Black, Gadget, sans-serif;
}
.important a
{
   font-weight:bold;
   font-size:1.25em;
   font-family:Arial, Helvetica, sans-serif;
   font-style:italic;
   text-decoration:none;
}
 

Style Heading and Link

Welcome back to the fourth and final part of this lesson on stylizing a block of text in the WordPress content area. In this final part of the lesson we are going to add some special CSS attributes for a heading and for a link.

Add a Heading and a Link to the Text Block

First we need to add the headings and links to our WordPress content, so let’s go back to our page. This is the page that we are going to change. I’m going to put this heading and link in the .important category. So I want to get here in front of the div class=’important’. Let’s do this in the Visual editor here. This is our important block so go right before that “h” there and type a heading and then give a return. Now we can come over here and grab that and open up our Kitchen Sink in our editor and select the style here and we are going to select heading number 3.

This paragraph now has heading number 3 inside of it and then we also want to add a link. Come over here to the end of this and we’ll add some link text and then we’ll select that link text, go up to our WordPress Link button, so Edit, Insert, Link. I’ll take this over to my Home page so www.byobwebsite.com and we’ll set the target to “Open link in a new window” and then we’ll insert it and then update it.

Let’s take a look at it in the site itself. You can see that our link ended up in a separate div. Let’s go back to the HTML and change that. Come over here and switch to the HTML view and our example heading really should be inside of the div class=’important’. So we’re going to cut that and put it right there, and then we’ll just get rid of this new one that it created. Update it and let’s take a look at it.

Now we have our heading and our text link. I think we want our text link on a new line so come down here press Enter that should do the job – hit update and refresh. You can see that the text link does drop down there so that’s fine.

Restyle the Heading

We need to restyle this heading because we have that big space on top and I want this to look a little bit different. Let’s open this up in Firefox and inspect the element. Scroll down to the section that we want to style and we are going to style this heading tag – select Inspect Element. You can see that it’s the h3 tag and it is currently getting its style from .format_text h3. That’s where it gets its font-size, its line-height and its margin. It’s the margin that’s giving it all that extra space. If we remove the font-size it would get a little bit smaller and if we changed the line-height it doesn’t do anything.

We are going to change this text but we’re not going to change it at .format_text. We’re going to change it at .important, h3. So come over to our custom.css and scroll down to .important and we’ll copy that and paste it there. We can get rid of all this because it doesn’t really matter and instead of .important, it will be .important h3.

First, we’re going to change the heading margin which is currently 0.611em for the bottom, you can see that right there, the yellow across the bottom is the bottom margin. Actually, I think that’s good enough we’ll use that 0.611em everywhere. So we’ll say margin: 0.611em;. So there’s our example heading.

I want to change a couple of things about this heading besides its margin. I would like to make it bold and italic; I would like to change its color and its font family. Now to make it bold we have to address ourselves to the font-weight property. So, font-weight: bold. Then I want to make it italic and that is the font-style: italic. Finally, I want to change the color to a dark blue, which is 3e4aa4. Next I want to align this heading to the middle of the box. We do that by using the text-align property, text-align: center; now it’s there in the middle.

Finally I’d like to change the font family for this text. Let’s go back to w3Schools and take a look at Fonts. Select Styling fonts and then look at Font Families where w3Schools has a list of the Web Safe Font Combinations. We are going to use the Sans-serif font for this heading and we’re going to use the Arial Black font.

CSS Font-Families

When you describe a font family you should have a font stack where you include the font that you’d like to display first, then you have a fall back font and then you have sort of the ultimate fall back which is sans-serif. So the way this works here is that this is typical for a browser in a Windows environment. This is typical of a browser in a Mac environment and Sans-serif is for everybody. Let’s copy this font family description here and come back over to Firefox, type font-family: and then paste that. Okay, there is our Arial Black font style for the heading.

Restyle the Link

I want to edit this link a little bit. So come back down here and copy that .important h3, give ourselves a little space and paste it and instead of h3 we’re going to style the link tag which is the a. You can see it automatically applies the same style to the link because that’s what we copied over. In fact we don’t need a margin for this but we’ll keep it font-weight: bold, and I think our font-size will go down to .25 and then our color we want to keep the same in all applications for the links so it will go back to that different color of blue. We definitely don’t need a text-align:center, and then the font-family we don’t want the Arial Black, so let’s go pick a font family real quick.

Go back over to w3Schools, in this case let’s pick Arial, Helvetica, sans-Serif. Let’s copy that, come back over here to Firefox and paste. In this case I would also like to make it italic. That is the font-style property so font-style: italic; I would like to get rid of the underline in the link and the way to do that is to eliminate the text-decoration. So type in text-decoration: none; now the text decoration is gone. But we would like to add some hover behavior to the link so that it looks a bit different when you hover over it.

Come down here and copy this, paste it, and instead of a we’re going to say a: hover, which is the hover state of the a link. We’re going to get rid of everything and just change its color to make it red. So when you hover over it, it turns red.

Now we’ll come back down here and capture everything and replace it. We’ll start at the bottom of .warning, go all the way back up to the top of the comment and copy it. Go back over to NetBeans, start again at the bottom of .warning, go back up to the top of the comment, paste and let’s save it. Let’s open this up in FileZilla and upload it and let’s go back to our website and refresh it.

So here is the refreshed version. We’ve got our heading examples changed, the link text is changed, and we’ve added these other elements to it. Finally we should check it in the rest of the browsers. There we go – this looks just fine in Firefox. Let’s copy this and open it up in Internet Explorer and refresh it, and there we go. It looks just fine there so we won’t have to make any adjustments for Internet Explorer either.

Now you’ve learned how to take blocks of text and add styles to those inside of the content area of WordPress. That wraps up this lesson on How to stylize a block of text in the content with CSS.

0 Comments… add one
0 comments… add one

Leave a Comment