Skip to content
Modern CSS Fundamentals

Where do we write CSS?

We know how to select things, but before we can even do that, we need somewhere to write our CSS…

There are a few options:

  • Inline styles
  • Internal styles
  • External styles

Inline styles

Section titled “Inline styles”

A lot of beginner content will start you off using inline styles, where you add a style attribute directly on an element.

<h1 style="color: #FE30F0"></h1>

I’d suggest avoiding using inline styles. There is no benefit to using them.

Internal styles

Section titled “Internal styles”

Internal styles are when we write regular CSS, but do it within our HTML page, with a <style> element in the <head> of the document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example of an internal stylesheet</title>


    <style>
      /* your CSS goes here */
      h1 {
        color: #fe30f0;
      }
    </style>
  </head>
</html>

Once again, I’d generally recommend not bothering with writing your CSS this way.

There are more advanced use cases where you might see these used, but that’s out of scope for this course.

External styles

Section titled “External styles”

The best place to write CSS is in a dedicated CSS file.

  • index.html
  • Directorystyles
    • style.css
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example of an internal stylesheet</title>
    <link rel="stylesheet" href="styles/style.css">
  </head>
</html>

In general, you’ll want to use one single CSS file for your projects.