Ways to Bold Text in CSS
One of the simplest methods of calling attention to something in design is called emphasis. If you want specific words or phrases to stand out, you can make them bold, so they stand out against the normal-sized text surrounding it. For those who are newer at CSS, it can be a struggle to understand how to add emphasis and variation to your text. If you follow this tutorial, I’ll show you various ways on bolding text in CSS.
Wrap text in Strong
This is one of the simplest ways of creating bold text. You can add an opening and closing strong tag around a single word or a group of words in order to make it bold. Below is an example of bold text using this method:
<p>This is how you <strong>create bold text</strong> using the strong method.</p>
Result:
This is how you create bold text using the strong method.
Use a Span
You can also use the span method. You can do this in 2 ways. One way, which isn’t recommended is to use inline styles, which means you add css mixed within the text. This is applied by adding the style declaration in the opening span wrapper. Below is the same sentence as above, using this example.
<p>This is how you <span style=”font-weight:bold;”>create bold text</span> using the strong method.</p>
Use a Span Class
The other method is to use a span class, which is perfectly acceptable. This would be used for specific purposes, such as a special bold class that is a specific color and has unique styling applied to it, otherwise you’d want to just use the strong wrapper method. Below is an example of the span class method. You can use classes over and over again, making them useful, and keeping your site consistent and organized.
<p>This is how you <span class=”bold_special”>create bold text</span> using the strong method.</p>
I used a class called bold special, but you could use whatever you want, as long as it makes sense. When using classes, you want to use something that gives you an idea of what it is and what it does. For example, you wouldn’t use a class called monkey-elephant, because that doesn’t give a clue as to what it does. You could, but web designers usually don’t.
Conclusion
There are several different ways to do the same thing in web design. You’ve seen how to bold text in CSS using different methods. Some are better than others, but you can decide for yourself which one to use, and in what situation. If you’re just getting started with CSS, you might want to check out my CSS Guide.