Linking CSS

CSS can be added in three ways: an external file via <link rel="stylesheet">, an internal <style> block in head, or inline via the style attribute. An external file is best practice for real sites.

Example

<head>
  <style>
    body { font-family: sans-serif; background: #f6f8fa; }
    h1 { color: #1f6feb; }
  </style>
</head>
<body>
  <h1>A styled heading</h1>
</body>

▶ Try it in the editor

Task

Add a rule to the <style> block that makes all paragraph (p) text gray.

Related tools

The <link> tag

The rel, href, and as attributes of the <link> tag: stylesheets, favicons, preload.

CSS Formatter & Minifier

Format and compress CSS styles online. Local browser-only processing.