Exercise: Styling Elements

Instructions

In the Site Editor:

  • Open the Styles panel.
  • Open the Colors panel

Colors

Set the following colors:

  • Link: Highlight
  • Caption: Contrast / Two
  • Button:
    • Text: Base
    • Background: Highlight

Typography

Set the following type properties:

Buttons

Appearance: bold

Headings

H1

  • Font size: Extra Extra Large

H2

  • Font size: Extra Large

H3

  • Font size: Large

H4

  • Font size: Medium

H5

  • Font size: Medium
  • Appearance: Bold Italic

H6

  • Font size: Medium
  • Appearance: Regular Italic

Line Height

Enable the control

In theme.json, under settingstypography: Add a lineHeight key, with the value set to true.

Implement the styles

In the Site Editor, under Typography:

  • Text: Set the line height to 1.5.
  • Headings: Set the line height to 1.3.


Solution

Complete and Continue