HTML and CSS — htmlstart Learn

Three ways to add CSS to HTML — inline, internal, and external.

3 Ways to Add CSS

1 — Inline CSS

Add a style attribute directly to any HTML element:

<p style="color: red; font-size: 18px;">Styled paragraph</p>

2 — Internal CSS

Add a <style> block inside <head>. Applies to this page only:

<head>
  <style>
    body { font-family: Arial, sans-serif; }
    h1   { color: #D62828; }
    p    { line-height: 1.6; }
  </style>
</head>

3 — External CSS (Recommended)

Link a separate .css file — styles apply to every page that includes the link:

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

Then in style.css:

body { margin: 0; font-family: system-ui, sans-serif; }
h1   { color: #D62828; font-size: 2rem; }
.card { padding: 24px; border: 1px solid #e5e5e5; border-radius: 8px; }

Which to Use?

Method	Best for
Inline	Quick overrides, dynamic styles via JS
Internal	Single-page demos, email HTML
External	Every real project — reusable across pages

An external CSS file is cached by the browser — all pages load faster after the first visit. This is reason enough to always use it.