The HTML style attribute adds CSS declarations directly to one element. This is also called inline CSS. Use it when a small, local area needs a one-off visual change—for example, a word, sentence, heading, image, or paragraph—without changing the rest of a site. section 7.2.5
Make one sentence red
Place the style attribute inside an HTML tag, then give it a CSS declaration. Here, only this span is red; surrounding content keeps its existing styling. section 7.2.5
<span style="color: red;">This sentence is red</span>
The attribute contains color: red;, while the span tags define the exact local zone that receives the change. section 7.2.5
Inline CSS sits at the local end of the cascade and can overrule browser defaults, a theme style sheet, and site administrator CSS. It can style a single character or a larger container. For related content, put the style attribute on a div so its contents share the styling. section 7.2.5 section 7.5
Use the style attribute for focused adjustments, but keep these limits in mind:
- Use it sparingly. Repeating inline CSS can make styling harder to read and maintain. section 7.5
- Choose a CSS class when the same look belongs on many elements. Define the rule once, then apply the class name where needed. section 7.6
- In WordPress, add site-wide rules through Appearance > Customize > Additional CSS rather than repeating declarations element by element. section 7.2.5 section 7.6
A class keeps content and styling more separate. With a style attribute, every property must be typed again on each element. With a class attribute, one named rule can be reused and later changed in one place, updating every element that uses it. section 7.6
Add inline CSS in Gutenberg
Open Pages > All Pages, select a page, add a Classic block, select it, then choose View > Source Code. Add a style attribute to a paragraph tag and confirm the change. Using code view on a Paragraph block may trigger an invalid-content message and block recovery can delete the block. section 7.7 section 7.7
