pelicin › web › CSS

Embedding CSS

There are three ways to apply CSS to an HTML document.

External Stylesheet

Use <link rel="stylesheet" href="..."> to load CSS externally. This is by far the preferred method of loading CSS.

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

Internal Stylesheet

Use <style> to specify and apply CSS to the same HTML document.

<style>
  p.sample {
    color: gray;
    margin: 0;
  }
</style>

<p class="sample">
  The sky turns gray.
</p>
| LIVE PREVIEW

The sky turns gray.

Inline Stylesheet

You should avoid using this method.

Use the style="..." global attribute to apply CSS to a single HTML element. (You no longer write the selectors.)

<p style="color: red">
  Lorem ipsum dolor sit amet
</p>
| LIVE PREVIEW

Lorem ipsum dolor sit amet

References