Starting with CSS, part 2

Let's continue with ...

Loading our styles

There are 3 basic ways to achieve this.
The first is by adding our CSS on the same lines as the HTML elements we are trying to style in the HTML file and it's called Inline.

<h1 style="color: blue;">
     Title 
</h1>}

It is not recommended though, as it is considered not good practice to include the styling in the HTML file, it should include the structure and the content. It's not very efficient, we would have to add our styling to every single element we mean to manipulate, we cannot use the styling anywhere else. Lastly this method might add to the page's loading time on the browser.

The second method is called Style Element.
It's slightly similar to Inline, we have to again include the styling in the HTML file, but this time we are creating all the CSS in the head section of the file.

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

This is also not recommended because we would have to include a style section in every HTML file, styling is applied only to the page it is included in and not re-usable across our pages, something not efficient or practical.

The third method, External CSS
requires as to create separate CSS file or files that will include all our styling and be linked to the HTML pages, through the pages themselves.

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

We use the above syntax to link an external file to our HTML.
It requires adding two attributes, first the rel one - we define the relation between the files - rel="stylesheet" will tell HTML this is a stylesheet file. The other one is href - we point to the location of the file - href="style.css" will let HTML know where to look for the file, we can use a relevant (to the location of the HTML) path or a URL as the location.

This is the recommended method of loading our styles and the one most widely used. It will keep the content/general structure and the presentation/style of that content separate, it allows us to re-use styles through our application and is considered good practice.