Styling from the Inside Out Lesson 6 of 7

The style attribute lets you apply CSS directly to a single element — no stylesheet needed.

HTML 101   DESN 368
← Previous Next →

Exercise: Styled Poem or Quote

  • First: make sure you’re signed into CodePen, then name your pen HTML 101 — Styling from the Inside Out
  • Find or write a short poem, song lyric, or notable quote (3–8 lines) and mark it up in HTML
  • Style every element using only style="" attributes — no external CSS, no <style> block
  • Use at least 4 different CSS properties across the piece
  • Focus on typography: font-size, font-weight, line-height, letter-spacing, and color are all fair game
  • Save the pen — you’ll submit the link to Canvas when all 7 lessons are done

Three Ways to Add CSS

There are three places CSS can live:

  1. External stylesheet — <link rel="stylesheet" href="style.css"> in <head>
  2. Style block — <style> inside <head>
  3. Inline style — style="" attribute directly on an element

This lesson covers #3.

The style Attribute

  • Accepts a string of CSS property-value pairs, separated by semicolons
  • The syntax inside the quotes is exactly the same as inside a CSS rule — property: value;
  • No selector needed — the element is the selector
<p style="color: #333; font-size: 18px; line-height: 1.6;">
  This paragraph has inline styles applied directly.
</p>

Common Properties for Inline Styles

Text styling:

<h1 style="color: #b7142e; font-size: 2rem; font-weight: 800;">
  Headline
</h1>

Background and spacing:

<div style="background: #f5f5f0; padding: 1.5rem; border-radius: 8px;">
  A styled container
</div>

Border:

<blockquote style="border-left: 4px solid #006ba6; padding-left: 1rem; margin-left: 0;">
  A pull quote or testimonial
</blockquote>

Inline code look:

<span style="font-family: monospace; background: #eee; padding: 2px 6px; border-radius: 3px;">
  inline code
</span>

Inline Styles Override Everything

  • Inline styles have the highest specificity of any CSS rule (except !important)
  • They beat stylesheet rules every time
<!-- Even if an external stylesheet says h2 { color: blue; },
     this h2 will be red — inline styles always win. -->
<h2 style="color: red;">This heading is always red</h2>
  • Useful for one-off overrides
  • Dangerous in larger codebases — they’re hard to undo from a stylesheet

A Complete Example

Here’s a short poem styled with inline styles only:

<article>
  <h1 style="font-size: 1.5rem; font-weight: 700; letter-spacing: 0.02em;">
    Inventory
  </h1>

  <p style="font-style: italic; color: #555; margin-bottom: 0.25rem;">
    Four chairs, one table.
  </p>
  <p style="font-style: italic; color: #555; margin-bottom: 0.25rem;">
    A lamp that flickers in the wind.
  </p>
  <p style="font-style: italic; color: #555;">
    Everything I own fits in a van.
  </p>

  <p style="font-size: 12px; color: #999; margin-top: 1.5rem;">
    — K.L.W.
  </p>
</article>
  • Every style decision is made element-by-element
  • Fine for a single experimental page — unmanageable at scale

Designer Note

  • Professional CSS uses design tokens — named variables like —color-text or —spacing-md — that live in a stylesheet
  • Inline styles bypass that system entirely — every inline style is a one-off that can’t be changed globally
  • Use them for quick experiments and prototyping; avoid them in production work
← Previous Next →