</>
Skip to content
CSS lessons (5/66)

CSS — How To

Applying CSS to HTML

Three doors into styling — same power, different reach:

1. Inline — on one element

<p style="color: teal; font-size: 18px;">Styled directly.</p>

Reaches one element only. Fine for quick tests and email templates; avoid in real sites because structure and style get tangled.

2. Internal — one page's rules

<head>
    <style>
        p { line-height: 1.6; }
        h1 { color: #0d9488; }
    </style>
</head>

Reaches every element on that page. Great for single-page demos and learning.

3. External — shared stylesheet

styles.css

body { font-family: system-ui, sans-serif; margin: 0; }
h1   { color: #0d9488; }

index.html

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Reaches every page that links it. The professional default:

BenefitWhy it matters
One source of truthRedesign = edit one file
Browser cachingSecond page loads faster
Team-friendlyDesign lives apart from content

Setting up your project

my-site/
├── index.html
├── about.html
└── styles.css

Link the same styles.css from every page. Build pages, refresh browser, repeat — the loop never changes.

Which rule wins?

When styles collide, specificity decides:

inline style  >  id  >  class  >  element tag

<style>
    p       { color: gray; }     /* weakest      */
    .note   { color: blue; }     /* beats tag    */
    #special{ color: red; }      /* beats class  */
</style>

<p id="special" class="note">I render RED.</p>

Later rules also beat earlier ones at equal specificity. Full cascade details come later — today just remember the pecking order above.

Mini Practice

  1. Style one paragraph inline, then move that style into an internal <style> block
  2. Move everything into styles.css and link it
  3. Prove specificity: give one <p> an id and a class with different colors
  4. Break the link (href="style.css" typo) and observe the naked page — recognize this failure forever after

Next: comments →

Related Topics

SelectorsCommentsColorsBackgrounds

Frequently Asked Questions about How To

What is How To in CSS?

How To is a fundamental concept in CSS. This lesson explains it step by step with clear examples, making it easy for beginners to understand.

How do I learn How To?

Start by reading the explanation above, then try the code examples. Practice by modifying the examples and experimenting with different values. Hands-on practice is the best way to learn How To.

Why is How To important in CSS?

How To is essential for CSS development. Understanding this concept will help you write better code and solve real-world problems more effectively.