How to add CSS

There are three ways to insert a stylesheet and styles in to a web page:

External stylesheet

You can reference one or more external stylesheets (a .css file) in the <head>

This is the preferred way to include styles as they can be reused on multiple pages easily

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    ...
  </body>
</html>

You can create a stylesheet inside a HTML page by using the <style> element

Normally, the <style element and CSS will be placed inside the <head> as it will be processed before the DOM loads

Some paragraph here

<style>
  .internal-style-demo {
    background-color: yellow;
    color: navy;
    padding: 10px;
  }
</style>

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.

This technique is not recommended as it is hard to reuse styles and maintain the code

Some paragraph here

<p style="color: orange; background: #111;">Some paragraph here</p>