Add Bold and Italics to Text in CSS

**Swetlano** · 10-02-2009

I am still learning CSS but have a concept of it for the moment. I needed to add bold and italics to my text so I added and tags and gave them each their own entry in the CSS style sheet file:

Code:

b {
font-style:bold;
}

Doing this also made me fail the CSS certification too.To make a word bold, I currently have it like this: bold text. So what am I doing wrong here and how do I make it more proper. I read that and tags were on the way out but have been told otherwise recently. You may be having an idea if you have seen the page of any web site which provide this kind of layout and can suggest me where can I use both currently.

**Ackley** · 10-02-2009

The “bold” and “italic” HyperText Markup Language (HTML) elements, expressed as and , respectively, aren’t illegal. In fact they’re legal to use and have distinct semantic purposes. Whether to use them or not should be dictated by said purposes, and nothing else.That would be a presentational thing and that’s what your Cascading Style Sheet (CSS) is for.

Now while it is very difficult to explored the semantic meaning of the bold and italic elements, I will say this now, “b” does not mean strong emphasis or importance; that’s what the “strong” element, written as , is for. I will also state that “i” does not indicate light emphasis, that’s what the “em” element, written as , is for.

**Adley** · 10-02-2009

Yes, it's true that in the bad old days, programmers used the and tags to mark headers, and yes it's true that that should stop (and should have stopped some years ago). If you're making a header, use a header tag, and use CSS (not and tags) to define the visual appearance of your header.

But and have a proper use as content-bearing tags. The use of bold and italics is as intrinsic to the writing process as the use of all-caps was before bold and italics came on the scene. The and tags, correctly used, are not formatting tags. They are content tags.

we define the Testimonial class in our CSS file as follows :

Code:

span.Testimonial
{
font-style:italic;
}

Add another definition to the CSS file :

Code:

span.Testimonial i
{
font-style:normal;
}

**shilong** · 10-02-2009

I had previously believed that both bold and italic were given extra weight, checking the authority reveals that only bold (and larger font) is given weight.

I would assume that the developers realized fully well that and , while conceptually distinct, are similar enough to be treated similarly. As far as we know currently Google ignores css.