How can you apply different styles to different words in the same line?
Styling Individual Words within a Line Using CSS
CSS allows you to style different words in the same line by wrapping each word (or phrase) in a <span> and applying separate classes or inline styles. This gives you fine-grained control over color, font, size, or other text properties without breaking the line.
- 1
Wrap the words you want to style individually in
<span>elements. - 2
Assign classes or IDs to each
<span>for custom styling. - 3
Use CSS properties like
color,font-weight,font-style,text-decoration,text-shadow, orbackground-clipfor visual effects. - 4
Maintain semantic HTML: do not use spans unnecessarily for non-styling purposes.
- 5
Combine with pseudo-elements (
::first-letter,::first-line) if partial styling of words or lines is needed.
In this example, the word 'highlighted' is styled with a pink italic color, while 'bold' is styled with a bold purple color. Using spans allows multiple styles within the same line without affecting layout or semantic structure.
- 1
Use
<span>only for styling purposes to keep HTML semantic. - 2
Keep styles consistent for readability and accessibility.
- 3
Avoid excessive inline styling; prefer CSS classes for maintainability.
- 4
Test styles across browsers to ensure consistent appearance.
- 5
Combine with CSS variables if multiple words share color schemes or effects.