Underlining text when using CSS - html

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.

Answer 2

As you say, HTML is for content and CSS is for styling. So, you don't have to use styling stuff in your HTML. Indeed, when you think in HTML you must think in content as well in a semantic way.
So the class you use for your div.usage is very well chosen, because it doesn't say anything about its style, but about its semantic. Now, what about the text you want to underline? I would say that in a semantic way this is a text you want to highlight, and HTML has a good element for this: <strong>. Then, in your HTML you can override the browser default style for <strong> elements (bold) for the underline you want.
<div class="usage">This is <strong>very</strong> important.</div>
strong {
font-weight: normal;
text-decoration: underline;
}
If you want to have this style only for highlighted text inside of your div.usage element, then be more specific:
.usage strong {
font-weight: normal;
text-decoration: underline;
}
Surely, you don't want to add the div to the selector (i mean .usage better than div.usage). This way you are ready in case you are going to code, for example, a list or a pragraph with the usage semantic.

Answer 3

The "text-decoration: underline" property allows you to undeline text.

Answer 4

You should use one of these tags: <strong> or <em> and style them in the css.
.usage strong { font-weight: bold; }
In your markup you define some content that you want to emphasize (<em>) or strongly emphasize (<strong>). See http://www.w3.org/TR/html4/struct/text.html.
I would not use underline for emphasizing as this will confuse users in thinking it's a hyperlink.

Answer 5

Just a bit of friendly advice, it's a good idea not to use underline on the web, as it is very often confused with a clickable link.
I would suggest using
<strong>this is important</strong>
Which will appear bold by default.
Or perhaps you could use a yellow background on the text, like a highlight marker...
<p>text <span class='highlight'>hightlighed</span> text</p>
And put this in your CSS
span.highlight {
background-color: #FF9;
}

Answer 6

you can try this:
<div class="usage">This is <span class="underline">very</span> important.</div>
css:
.underline { text-decoration: underline; }

Answer 7

hi for underline you can take a small example here
HTML
<div>
<p>
This is just a text to check <span>underline</span> with CSS
</p>
</div>
CSS
div p { font-style: italic; }
div p span{ text-decoration: underline;}

Answer 8

Nowadays, people use to say that <u> markup should not be used, but few people can back this up with factual arguments (as opposite to citing purported authorities and using negative-sounding adjectives). If you really want underline (which is generally not a good idea in HTML documents, as pointed out here), then <u> is the simplest and most robust way. You would still have the liberty of later deciding that you wish to use, say, bolding instead of underlining, and then you could do it simply in CSS:
u { text-decoration: none; font-weight: bold; }
For emphasis, other methods are almost always better than underlining. But there are situations where underlining is part of a conventional notation (e.g., in phonetics or mathematics), and then you might want to use <u> (and you would not want to rely on CSS).

Answer 9

You could encapsulate the text you wish to underline in span and specify a class for that span
.underline {
text-decoration:underline;
}
<div class="usage"> This is <span class='underline'>very</span> important.</div>