How to apply your CSS to your HTML

How to apply your CSS to your HTML

There are three different ways to apply CSS to an HTML document that you'll commonly come across, some more useful than others. Here we'll briefly review each one.

External stylesheet

You've already seen external stylesheets in the previous lesson, but not by that name. An external stylesheet is when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML <link> element. The HTML file looks something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First CSS Example</title>
    <link rel="stylesheet" href="style.css"> <!--This will link to your css file saved as .css-->
  </head>
  <body>
    <h1>Welcome to my Website!</h1>
    <p>My first CSS example</p>
  </body>
</html>

And the CSS file:

h1 {
  color: orange;
  background-color: black;
  border: 1px solid black;
}

p {
  color: red;
}

This method is arguably the best, as you can use one stylesheet to style multiple documents, and would only need to update the CSS in one place if changes were needed.

Internal stylesheet

An internal stylesheet is where you don't have an external CSS file, but instead place your CSS inside a <style> element, contained inside the HTML head. So the HTML would look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First CSS Example</title>
    <style>
      h1 {
        color: orange;
        background-color: black;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to my Website!</h1> 
<p>My first CSS example</p>
</html>

This can be useful in some circumstances (maybe you're working with a content management system where you can't modify the CSS files directly), but it isn't quite as efficient as external stylesheets — in a website, the CSS would need to be repeated across every page, and updated in multiple places if changes were required.

Inline styles

Inline styles are CSS declarations that affect one element only, contained within a style attribute:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My First CSS Example</title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Welcome to my Website!!</h1>
    <p style="color:red;">My first CSS example</p>
  </body>
</html>

Please don't do this, unless you really have to! It is really bad for maintenance (you might have to update the same information multiple times per document), and it also mixes your presentational CSS information with your HTML structural information, making the CSS harder to read and understand. Keeping your different types of code separated and pure makes for a much easier job for all who work on the code.

The only time you might have to resort to using inline styles is when your working environment is really restrictive (perhaps your CMS only allows you to edit the HTML body.)

CSS OUTLINE