By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Make text bold with CSS

This tutorial shows how to make bold text with pure css.

Edited: 2012-12-25 22:44

Making text bold with the use of pure CSS can be done using the font-weight property. Bold text does not carry the same meaning strong or emphasized text, so if you want your boldness to have semantic meaning, you should use either strong or em instead of other elements.

The CSS bold amount can be easily controlled for these elements, using the font-weight property. So while still using the right elements – you could even remove the boldness and replace it with something else – it doesn't matter that you remove the default styling, as long as users get the same impression with your new styling.

Aplying or changing boldness with CSS

The boldness amount can be changed with the CSS font-weight property mentioned earlier in the tutorial. This property accepts a few different values to change the fatness of your text – if your text is to fat, surely you should put it on a diet – its unhealthy to be out of shape, so we can't have that can we?

Most web-designers will just use one of the keywords to make their text lose or gain weight: normal, bold, bolder, lighter – and please, no joking around with these values – it's difficult enough for fat people, they could be offended if they miss-read your stylesheet.

The property also takes a numeric value between 100-900. Below you will find some examples of how you can best use the font-weight property, and be sure not to offend any fat people by using it incorrectly!

head { /* Nah.. Its not a pretty picture. */
 font-weight: bolder;
}
body { /* Man, this body must be gigantic, like 900 pounds (408kg) or something! */
 font-weight: 900;
}

Making text bold is one thing, now lets decorate it!

Sometimes you also want to decorate your text, or change the strong elements default style from bold to italic – this can be done using the text-decoration and font-style properties respectively.

The CSS Text-decoration property can be used to add: overline, underline, strike trough, and the lesser used blink – to make text blink uncontrollably.

Example of how to add italics and underline with CSS:

p {
  font-style: italic;
  text-decoration: underline;
}

More CSS Tutorials

  1. How to make Italic text
  2. How to change font color