Bold And Italic CSS: Web Design Series: CSS Part 6

Bold and Italic CSS

Bold and Italic font with CSS and HTML
Get the source code for this lesson at the end of the post!

Welcome back! The mission today is a simple one; learn how to bold and italicize text with CSS. Text styling is a big part of web design, and knowing the right way to style text can be very valuable to your page loading times. As you have already seen in previous posts, we can bold text or italicize it using the HTML tags <em>, <i>, <b>, or <strong>. There may be times when you just need to make one or two words bold or italic. In this case, it is probably best to just add the HTML tags around the text you want to affect. but the best way to do it is within your CSS code. CSS is not only a great tool for designing, but it also keeps your code incredibly organized. Imagine if throughout your entire website design you used HTML style tags and inline CSS. That would be pretty messy, hard to read and alter things down the road, and would probably slow down your page load times.

By using CSS instead of HTML we are creating all of our style code in one neat and organized place that is very easy to navigate through, find things, and make changes quickly that could affect many elements at once. The point here is that HTML could be used for bold or italic. But it is recommended to use CSS to style even the simplest things like this wherever possible and sensible. Below is an example of a few HTML elements and CSS code. You might want to zoom in on your browser to see the image text a little better; there was a lot in this example. On my laptop, a zoom of 200% gives me a full-screen display of the code. I could add the source code directly to the post instead of in an image by using special escape characters. By now you should have a pretty good idea of how a text editor works, so this would make the code easier to read at normal size. To see an example of what that would look like, check out my animated navigation menu source code post. Please leave a comment if you’d prefer that. UPDATE: I HAVE ADDED THE SOURCE CODE AT THE END OF EVERY LESSON.

bold and italic example code

bold and italic example display

Let’s start with the h4 CSS rule. We introduce a new property:value pair in this rule. font-style is the property we want to target and oblique is the value we give it. This makes the font in our h4 header italic. I wanted to use the value oblique here to show you that it can be used instead of italic, which would have been an acceptable value for font-style. They both do the same thing. And that is; make the font italic(emphasized). The only real difference between the values italic and oblique that you’ll see depends on the browser that your page is running in. As you build and design websites more and more, you will notice that what might display the way you want it to in Google Chrome might not display the same in Internet Explorer. And occasionally if the viewer of your page has an old version on I.E. or Chrome; they might not see all of the styles that you put into your design. We will discuss this more. A good rule to remember is to run your page in multiple browsers to make sure everything looks the same.

The next element that we style with a CSS rule is our ol(ordered list). We gave it a property:value pair of font-weight: bold. Now every li(list item) in our ol is bold due to inheritance. The li’s inherited the style we specified in the ol rule.

Our final CSS rule in our internal style sheet is the ul(unordered/bullet list). We give this rule two property/value pairs. font-weight: bolder and font-style: italic. You may be asking why we used the value bolder instead of bold, and that is because there are four values that can be used for font-weight. This is one. The others are lighter, normal, and bold. Bolder is the darkest. Try all four values and run to see the difference in the saturation of the font. I personally only ever use bold or normal. Normal would be used wherever you need to take the bold away. That might sound stupid, but there are times where that does come up. The other property:value pair that we gave to it, font-style: italic is self-explanatory. It has the same effect as oblique.

You now know the different ways of adding bold and italic to your font/text with CSS. Test out the different values to see what result you get. As you follow along with these posts, you should always be writing the code yourself as well. There is no better way to remember code than first-hand experience. You will retain much more information.

I’ve included a few examples of bold and italic with HTML. They are mixed in throughout the p(paragraph) element. Just like the values in CSS, there are some variations in these HTML tags also. For bold you can either surround the text you want bolded with <strong> tags or <b> tags. For italic you have the option of <em> or <i> tags. A good time to use HTML instead of CSS to bold or italicize would be when you only need to style one word. Even a few words would be acceptable; as long as you don’t get carried away with HTML style tags; it should have a noticable impact on your page loading speed.

Source Code


<!DOCTYPE html>
<html>
<head>
<title>Bold And Italic Examples</title>
<style>
h4{
font-style: oblique;
}
ol{
font-weight: bold;
}
ul{
font-weight: bolder;
font-style: italic;
}
</style>
</head>
<body>
<h4>This heading is italicized with CSS code</h4>

<p>In this paragraph, we have some examples of <strong>bold text using HTML tags</strong> and <em>emphasized text</em> that
is surrounded with HTML emphasis tags. You could also use the <i>&lt;i&gt; tags to make the text italic.</i> It does the same
job. Just like <b>the &lt;b&gt; tags for bold.</b> The choice is up to you.</p>

<ol>
<li>Popcorn</li>
<li>Soda</li>
<li>Chocolate</li>
<li>Chips</li>
</ol>

<ul>
<li>Breakfast</li>
<li>Lunch</li>
<li>Snack</li>
<li>Dinner</li>
</ul>
</body>
</html>

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: