Problem: Paragraph Rhythm Setter

easy
15 min
Try to define a CSS custom property for the rhythm unit and use it to set the line-height and bottom margin of paragraphs, ensuring uniform vertical flow.

Problem description

You have a document with multiple paragraphs. Your task is to create a CSS variable for a 1.5rem baseline rhythm and apply it to the line-height and margin-bottom of all elements to maintain consistent vertical spacing throughout the content.

Goal

Use only HTML and CSS to:

  1. Define --rhythm as 1.5rem in :root.

  2. Apply line-height: var(--rhythm); and margin-bottom: var(--rhythm); to all <p> elements.

Constraints

  • Only CSS is allowed.

  • Use rem units and CSS variables.

  • CSS file must be named styles.css.

  • Do not alter HTML structure or add inline styles.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.

Problem: Paragraph Rhythm Setter

easy
15 min
Try to define a CSS custom property for the rhythm unit and use it to set the line-height and bottom margin of paragraphs, ensuring uniform vertical flow.

Problem description

You have a document with multiple paragraphs. Your task is to create a CSS variable for a 1.5rem baseline rhythm and apply it to the line-height and margin-bottom of all elements to maintain consistent vertical spacing throughout the content.

Goal

Use only HTML and CSS to:

  1. Define --rhythm as 1.5rem in :root.

  2. Apply line-height: var(--rhythm); and margin-bottom: var(--rhythm); to all <p> elements.

Constraints

  • Only CSS is allowed.

  • Use rem units and CSS variables.

  • CSS file must be named styles.css.

  • Do not alter HTML structure or add inline styles.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.