SASS Typography: Solved Runners

Every runner from the lesson, refactored into semantic HTML with OCS typography classes. No custom CSS, <style> blocks, or inline styles remain.

Example: OCS Role

The lesson intro already uses the right structure: an <h2>, an ocs_lead paragraph, and an ordered list.

View example code 
<h2>Cat Care 101</h2>
<p class="ocs_lead">Follow these basic rules to keep your feline friend happy.</p>
<ol>
  <li>Provide fresh water and food daily.</li>
  <li>Give them plenty of cozy nap spots.</li>
</ol>

Cat Care 101

Follow these basic rules to keep your feline friend happy.

  1. Provide fresh water and food daily.
  2. Give them plenty of cozy nap spots.

Cat Care 101

Follow these basic rules to keep your feline friend happy.

  1. Provide fresh water and food daily.
  2. Give them plenty of cozy nap spots.

Example A: Basic Headings and OCS Lead

<h2> and <h3> provide the hierarchy while ocs_section-title and ocs_lead give the text its role.

View example code 
<h2 class="ocs_section-title">Meet Whiskers</h2>
<h3 class="ocs_lead">The Sleepiest Cat in the World</h3>
<p class="ocs_text">Whiskers spends 18 hours a day napping in sunbeams.</p>

Meet Whiskers

The Sleepiest Cat in the World

Whiskers spends 18 hours a day napping in sunbeams.

Meet Whiskers

The Sleepiest Cat in the World

Whiskers spends 18 hours a day napping in sunbeams.

Example B: Emphasis Inside a Component

The card keeps the text grouped, while <strong> and <em> carry real meaning instead of visual styling.

View example code 
<div class="ocs_card">
  <p class="ocs_text">Please <strong>do not</strong> rub the belly! It is a trap!!</p>
  <p class="ocs_text">It is <em>highly recommended</em> to scratch behind the ears instead!!</p>
</div>

Please do not rub the belly! It is a trap!!

It is highly recommended to scratch behind the ears instead!!

Please do not rub the belly! It is a trap!!

It is highly recommended to scratch behind the ears instead!!

Example C: Full Section Structure

A heading, description, and unordered list form a complete section inside one card.

View example code 
<div class="ocs_card">
  <h2 class="ocs_section-title">Favorite Cat Toys</h2>
  <p class="ocs_description">Approved toys for maximum zoomies include:</p>
  <ul>
    <li>Feather wands</li>
    <li>Cardboard boxes (obviously)</li>
    <li>Laser pointers</li>
  </ul>
</div>

Favorite Cat Toys

Approved toys for maximum zoomies include:

  • Feather wands
  • Cardboard boxes (obviously)
  • Laser pointers

Favorite Cat Toys

Approved toys for maximum zoomies include:

  • Feather wands
  • Cardboard boxes (obviously)
  • Laser pointers

Popcorn Hack: Refactor the Custom CSS

The <style> block and the large-title, sub-title, and normal classes are gone. The heading, subheading, and paragraph now use semantic tags plus OCS roles.

View example code 
<h2 class="ocs_section-title">Why Cats Purr</h2>
<h3 class="ocs_lead">A Sign of Happiness</h3>
<p class="ocs_text">Cats usually purr when they feel safe, cozy, and ready for a nap.</p>

Why Cats Purr

A Sign of Happiness

Cats usually purr when they feel safe, cozy, and ready for a nap.

Why Cats Purr

A Sign of Happiness

Cats usually purr when they feel safe, cozy, and ready for a nap.

Homework Hack: How to Pat a Cat

Refactored into one OCS card with a real heading hierarchy, paragraphs, an ordered list, and <strong> emphasis. The fake numbered paragraphs became a real <ol>.

View example code 
<div class="ocs_card">
  <h2 class="ocs_section-title">How to Pat a Cat</h2>
  <p class="ocs_lead">Have you ever wanted to...</p>
  <p class="ocs_text">pat a cat? Well good for you we will give step by step instructions on how to pat a cat!</p>
  <p class="ocs_text"><strong>How to pat a cat:</strong></p>
  <ol>
    <li>put out your hand</li>
    <li>touch the cat</li>
    <li>move your hand back and forth</li>
  </ol>
  <h3 class="ocs_section-title">Congrats! You pat a cat :D</h3>
</div>

How to Pat a Cat

Have you ever wanted to...

pat a cat? Well good for you we will give step by step instructions on how to pat a cat!

How to pat a cat:

  1. put out your hand
  2. touch the cat
  3. move your hand back and forth

Congrats! You pat a cat :D

Validation Checklist

  • Preserved %%html and the UI_RUNNER comment in every code cell.
  • Removed all <style> blocks, custom classes, and inline style attributes.
  • Used h2 to h4 for the heading hierarchy.
  • Turned the fake numbered lines into one <ol> with three <li> items.
  • Replaced visual bold with <strong>.
  • Applied ocs_card, ocs_section-title, ocs_lead, ocs_text, and ocs_description for roles.