A CSS class is a reusable name for a shared set of styles. Define the styles once, then add the class name to each heading, paragraph, or other HTML element that should use them. This keeps style code separate from site content and avoids repeating the same inline properties. section 7.6
For example, instead of writing color and font settings inside every paragraph, create a class rule named greensans. The class attribute applies that rule to a specific element; several different elements can use the same class. section 7.6 section 7.6
.greensans {
color: green;
font-family: sans-serif;
}
This rule defines the greensans class. The period before the name identifies the class rule; the properties inside are the styles it supplies. section 7.6
Apply one style in several places
After defining greensans in Additional CSS, add class="greensans" to each element that needs green, sans-serif text. If the design changes later, edit the class rule once instead of changing every element separately. section 7.6 section 7.6
A practical workflow is:
- Define a short, lowercase class name and its style properties in the Additional CSS area. section 7.6 section 7.2
- Add that name through a class attribute on the HTML element, such as a heading or paragraph. section 7.6
- In Gutenberg, apply a defined class through code view or, for supported blocks, the Advanced module’s Additional CSS Class(es) field. section 7.7
- Preview the visible result, then revise the single class rule when the shared design needs changing. section 7.6
Classes are especially useful when only selected elements need a shared look. A site-wide rule for h1 affects every h1 heading, while a class can be attached only where that particular style is wanted. Inline CSS can still target a small one-off area, but limiting it is recommended. section 7.5 section 7.6
Use class names consistently. Class names can be case-sensitive in some contexts, so lowercase names help avoid a mismatch between a CSS selector and the HTML that uses it. section 7.2
