Problem: Paragraph Rhythm Setter
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:
Define
--rhythmas1.5remin:root.Apply
line-height: var(--rhythm);andmargin-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
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:
Define
--rhythmas1.5remin:root.Apply
line-height: var(--rhythm);andmargin-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.