Providing CSS | Notion

CSS can be provided through different ways:

Embedded stylesheets

Adding <style> in <head> section

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>

External stylesheets

Creating an external .css file and linking it to html

/* CSS file */
p {
  color: grey;
}

<!-- HTML file -->
<head>
  <link rel="stylesheet" href="style.css" />
</head>

Inline styles

Styling inside an independent tag

<body>
  <p style="color: blue; font-weight: bold">Lorem ipsum dolor sit amet.</p>
</body>

==Note: This is NOT recommanded since it difficult to modify later==

Instead, we can use id or class to specify a tag:

<head>
  <style>
    /* styling ID */
    #first {
      color: palegreen;
      font-weight: bold;
    }
    /* styling Class */
    .second {
      color: wheat;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p id="first">Lorem ipsum dolor sit amet.</p>
  <p class="second">Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
</body>

==Note: id MUST be unique, whereas class doesn’t necessarily.==