Underlining text when using CSS

Question

I'm fairly new to CSS, so I want to ensure I'm implementing it correctly. I need to include an explanatory paragraph on a web page. I'd like it to look different, so I've included the following in the external CSS file:

div.usage { font-style: italic; margin-left... margin-right... ; }

and then included <div class="usage">Explanation</div> in the HTML file. This is working as expected.

My understanding is that when using CSS, content and layout are separated. How, then, would I underline some text in my explanation? My understanding is that I should avoid the following: <div class="usage">This is <u>very</u> important.</div>.

Answer 1

You are right about separating content and layout, but in this case, I would wrap it in a tag. The <u/> tag is deprecated, though. What I would use, is something like this:

<div class="usage">This is <em>very</em> important.</div>

and

em { text-decoration:underline; }

The <em/> stands for emphasized text. The default is italic, so depending on your CSS reset, you may need to also reset font-syle to normal.

As an aside, it's usually a bad idea to underline text, as most people assume underlined text are links. I would make it bold instead, or maybe even give it a background color.