Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
You wouldn't think that you'd have to put too much thought into making text bold or italic. But in reality, there are several ways to control text weight and style, and how you choose to do it depends largely upon your individual site strategy. From a pure HTML standpoint, you can use the emphasis and strong tags to render text as italic and bold, respectively. You should keep in mind, however, that these tags carry a logical meaning to them. Both tags are part of a group of elements referred to as phrase elements.
An represents text being emphasized and is usually rendered as italicized text, whereas the tag represents text that is more strongly emphasized than tags contained within an tag. So using these tags should be done within the larger context of your structural markup. So what you do if you want to bold or italicized text without using structural markup? CSS allows you to take advantage of two properties: Font-weight for bolding and Font-size for italicizing.
Let's examine the approach of using each of these techniques. Now by default, all of your headlines, your heading 1, your heading 2, those are going to be bold. But if I scroll down a little bit, I find some heading 2s down here, and I really don't want those to be bold for this layout. I think that makes them a little strong there. So what I am going to do here is I am going to modify our #mainContent #mainArticle h2 rule so that the font- weight is told not to be bold. All right. So what I am going to do is go over to my CSS Styles panel. I am going to scroll down through my styles, until I find my #mainContent #mainArticle h2.
I am just going to double-click that to open it up in my CSS Rule Definition dialog box. Here, I am going to change font- weight from no declaration to normal. Now, if you don't declare a font- weight or a font-style, or really any value, what you're basically saying to the user agent is, "Whatever you would normally do, just do that." Well, headings are normally bold, so leaving that blank is just going to make all of our headings bold. By choosing normal, click OK, we can see that that takes our headlines and says, "Okay. For that particular heading, don't make it bold." Now, we discussed structural bolding and italicizing just a minute ago.
If I scroll down into the Customer notifications area, notice that we have a couple of areas that we want to sort of stand out here. Now, I can highlight Tour Confirmation, and then down in my Properties Inspector, I can click either the Bold or Italic tag to do those. But I have to pay close attention to which tab I have selected. Currently, I am looking at my CSS Properties. If I do that, it's going to modify a CSS rule. If I want to add structural content, I'll go to the HTML Properties and click the Bold tag there.
That, as you can see right here in the tag selector, added a tag. I want to do the same thing to the reminder notification and the sentence: If you do not receive a confirmation within 24 hours, contact us immediately. We'll go ahead and italicized that. That's going to add an tag. So while visually we get a bold and italics, what we've really done is we've added structural markup that has logical meaning. So other user agents are going to be sort of able to infer that from us that this is emphasized.
This text is strongly emphasized. But what if you just want to make a visual change? You don't really want to add any structural markup to your code or any structural markup that can be interpreted. Take the company name here: Explore California. What if everywhere we find the company name, maybe we would want it bold and a blue color, okay? Well, number one, the tag or the tag wouldn't do that for us. But maybe also we didn't really want to pass on any type of meaning to user agent. We just wanted to do something visual.
Well in this case, we can create a class and then encase this in a tag.
That doesn't necessarily pass along any structural meaning or any inferred
meaning, but it does give us a chance to do that visual styling.
So I am going to highlight the text, Explore California.
Down in my Properties Inspector, I am going to click on my CSS properties.
I am going to make sure that this Targeted Rule is
So we are going to do a Class. Notice that comes up automatically here. We are just going to call it dot - remember the period. It's very important - company, so .company. There we go. We are going to define it in our main.css and click OK. Now, for Color, we are going to use #193742, so 193742. If you hit Tab, it will show you that sort of a dark - sort of teal blue, a common accent color throughout our site. Now, what about Font-weight? Well, let's go ahead and make it bold.
But if you grab that pulldown menu, you may have noticed earlier, there are a lot of choices there, and that was just bold or normal. What's going on? Well, using CSS, you can go from the lightest possible value, which is 100, to the heaviest possible value, which is 900. Now, truth be told, most user agents cannot show the amount of subtlety between, say, 700 and 800. You'll never notice the difference. The way it really sort of plays out is 400 is more normal, 900 his bold and 100 is a light, if that is available.
So we are just going to go ahead and say Bold. We are going to click OK. Now, we can see that we have a tag surrounding that text right here in tag selector showing us that. Our text is now blue and bold, pretty cool. Now, I can just scroll down through our text, find more instances of Explore California. I could use my Properties Inspector now to apply company everywhere I find that. Now, notice you can do that in both the CSS and HTML properties. So if I switch to HTML and highlighted Explore California, I find Class association right here.
I could grab that and choose company. I get the same result. Cool! Now, let's do one more thing. If I look over here in the sidebar, I want all of our paragraph text over here: Day Spa Package and the price, I want that to be italicized. Again, that's something that CSS can help us with. It really wouldn't make a whole lot of sense to have to highlight every single one of those lines and surround them with an tag. This is a purely visual style that we want to do. So we can go ahead and modify one of the existing rules. So I am going to, again, come over to my CSS Styles panel, and I am going to scroll through that until I start finding my sidebar styles.
They are down there always. I am going to find #sidebar # specials p. That the one I want. I am going to go ahead and double-click that again. When we are dealing with italics, we are dealing with the Property Font-styles, so Font-weight for bolding, Font-styles for italics. If I grab the pulldown menu, you notice we have normal, italic and oblique. Now, what's the difference between italic and oblique? Now, italic will actually use the italic version of the font. Oblique will sort of skew the font a little bit, and is useful if that font doesn't actually have an italicized version of it.
I recommend using italic instead of oblique because they are some times when oblique just does not look good at all. So we are going to choose italic. Click Ok. Now, we notice that all those guys has format as italicized text. So there we go. You know, having options, that's a good thing. When stylizing text, keep your options in mind and make sure that the solution that you use is going to fit your overall site strategy. Don't use structural markup unless the situation calls for it. Make sure that your styles are written so that the proper weight and style is passed on based on the rendering intent.
Get unlimited access to all courses for just $25/month.Become a member