CODEWITHSUNDEEP
htmlcss
rwallace
rwallace

Reputation: 33365

Coloring a single word with CSS

I want to set the color of individual words within a <pre> block (roughly speaking, for displaying code with syntax highlighting). The <font> tag is deprecated in favor of using CSS, fair enough; what's the required syntax? In particular, in what element should the words be wrapped? I've previously used <div> to mark chunks of text for CSS styling, but that would seem only suitable for marking full paragraphs.

Upvotes: 15

Views: 75776

Answers (5)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

There’s no markup magic here: you can use any inline markup, and you do the magic (coloring or other formatting) in CSS. Technically, not all inline markup is valid inside pre, but browsers don’t really care. It’s more important that some inline markup has some default rendering or functionality.

If you don’t want any default rendering, you can use a or font or span markup, which have no impact on anything when they don’t have attributes and they are not styled. If you want some default rendering, you can use corresponding markup, if it exists, such as b for bold, or u for underline. This means that some special presentation is applied even if your stylesheet is not used.

Most people decide to use just span, as suggested in other answers. It’s simple, and nobody can claim that it has “wrong semantics”, because it has none. But the magic is really in CSS, and you use markup just to distinguish some sequence of characters as an element, so that it can be styled as a unit.

Contrary to what you probably hear most people saying, there is nothing inherently wrong with using font when you are really doing some font settings. But there is a practical problem in the old-style usage like <font color=red>. If you have gazillion tags like that and your boss or customer or wife tells you to use a different shade of red, you will have to change myriads of tags, perhaps in dozens of files. But if you have written <font class=keyword> or <a class=keyword> or, if you prefer, <span class=keyword>, and you use a CSS file referred to in all of your HTML files, you will need to change just one value in that CSS file.

Upvotes: 0

Jon
Jon

Reputation: 437336

You should use the simplest, most generic inline element: <span>. For each type of token, give one or more appropriate classes to the span. For example:

<span class="type">int</span>
<span class="name">foo</span>
<span class="op">=</span>
<span class="number literal">42</span>

See it in action.

Update: StackOverflow also does code highlighting -- the code just above is highlighted! What does the HTML for that look like? Viewing the source HTML shows that the first line is highlighted using

<span class="tag">&lt;span</span>
<span class="pln"> </span>
<span class="atn">class</span>
<span class="pun">=</span>
<span class="atv">"type"</span>
<span class="tag">&gt;</span>
<span class="pln">int</span>
<span class="tag">&lt;/span&gt;</span>

// and it goes on

Upvotes: 28

zessx
zessx

Reputation: 68790

Use <span class="red">text</span> and some basic CSS like .red { color: red; }

Edit : notice class name "red" isn't a good practice

Upvotes: 4

Marcx
Marcx

Reputation: 6826

<span>

This HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.

Upvotes: 5

John Stimac
John Stimac

Reputation: 5493

Use span with a style attribute on it. Like:

This is a <span style="color:#f00;">sentence</span>.

Upvotes: 8

Related Questions