External CSS

HTML 5

<link rel="stylesheet" href="css/styles.css" />

HTML 4

<link rel="stylesheet" href="css/styles.css" type="text/css" />

@import

  • Not recommended because of the potential of slowing down the website.
  • Usually used in CSS Pre-processors.
@import url("b.css");
<head>
  <style>
    @import url("css/b.css");
  </style>
</head>

Inline CSS

  • Shouldn’t be used widely.
  • Overrides defined stylesheets.
<p style="color:red;">Red text!</p>

Internal CSS

  • Inefficient with multiple pages.
  • Better than inline CSS.
<head>
  <style>
    h1 {
      color: green;
    }
  </style>
</head>