Is it possible to apply different styles to individual words within a paragraph, for example:

I like TO watch TV!

I'd also like to be able to use different fonts within the same block of text.

3 answers


Some would say that Ben's class names are presentational, rather than semantic, they might suggest that a class name should reflect its purpose, not its behaviour, so class="shout" or class="exclaim" would be better, but you might also use existing elements like <strong> and <em> and style those as uppercase and bold italic.


<p>I like <strong>to</strong> watch <em>TV!</em></p>


strong {font-size: 14px;
 text-transform: uppercase;}

em {font-size: 14px;
 font-weight: bold;
 font-style: italic;}

Nothing wrong with Ben's suggestion, but a purist would prefer to re-use appropriate elements and use a naming convention based on content not presentation.

Answered almost 10 years ago by Tony Crockford
micmcg 15

you could use javascript (jQuery) to parse the string, split on spaces into words, and wrap the words with spans with classes that are randomly assigned. Or if you want to specify it in advance, just wrap the words in spans manually.

Answered almost 10 years ago by micmcg

To expand on part of what Micmcg said, you could use spans to style specific text within your paragraph:

<p>I like <span class="bigCap">to</span> watch <span class="bigOb">TV!</span></p>

then style it:

.bigCap {font-size: 14px;
 text-transform: uppercase;}

.bigOb {font-size: 14px;
 text-transform: uppercase;
 font-style: italic;}

Now, obviously you can do alot more than that but it should give you an idea.

edit: used your example.

Answered almost 10 years ago by Ben Shoults