Ollie Theme Academy

Implementing Styles

Exercise – Implementing element styles

Begin with typography elements by setting a shared line height of 1.3 for all headings, then style each heading level individually: H1 gets extra-large and bold, H2 gets large and bold, continuing down to H6 with medium and italic styling.

Style buttons to use bold text, creating visual emphasis that matches the Bosco design aesthetic. Each heading level gets progressively smaller while maintaining the bold treatment that creates hierarchy.

Configure element colors: links get the red accent color for both default and hover states, captions use the secondary contrast color (dark gray), and buttons use white text on red background for strong visual contrast.

The styles sidebar organizes these logically – typography settings for text treatment, colors for visual hierarchy. Export these changes to see how WordPress organizes element styles in theme.json’s elements section.

Back to: Ollie Theme Academy > Implementing Styles