Juanita's Technical Blog
3 Ways to Apply CSS to an HTML Document

3 Ways to Apply CSS to an HTML Document

Juanita Washington's photo
Juanita Washington
·

4 min read

Table of contents

Did you know there's more than one way to apply CSS to an HTML document?

As stated by the title, there're three methods:

  1. Inline

  2. Internal

  3. External

So if you want to know how it's done, here's a quick rundown of each method, with its advantages and disadvantages.

P.S. the examples use CodePen. If you're unfamiliar, just click the corresponding button to see the full code!

Inline CSS

Inline CSS is when you apply a style to a single HTML element. To declare an inline style, use the style attribute on that particular element. Here's an example:

<h1 style="color: magenta">This is inline CSS. My color is magenta.</h1>

<p style="text-align: center">And so is this. My text is centered.</p>

<h1>I'm just a regular H1.</h1>
https://codepen.io/juanita-washington/pen/LYBwXRO

As you can see, the color: magenta style applies only to the first h1 and the text-align: center to the p.

Now there may be a few instances where using this type of CSS is ideal. Maybe you want to do something that doesn't require a whole stylesheet and just for a specific element. Otherwise, it's advised not to go this route. Mixing style and content can make things messy and disorganized making it very difficult to maintain the style, especially if changes need to be made. So it's best to use inline as little as possible.

Internal CSS

Internal is a bit of a step up from Inline CSS. In this case, the style tag is placed within the head, and goes before the body in an HTML document:

<head>
  <style>
    body {
      background-color: linen;
    }

    h1 {
      color: dodgerblue;
      text-align: right;
    }

    p {
      font-size: 2em;
    }
  </style>
</head>
https://codepen.io/juanita-washington/pen/zYJOQWg

Here, the internal stylesheet is a little more efficient than doing it inline, since you can apply a style to any of the corresponding elements, and not have to keep doing this for a particular one. Take a look at the h1s in the example. The declarations affect any h1 in the document, and if I added another p, the same case applies.

Unfortunately, the drawback of using internal CSS is that it only works on the document on which it's used. If you're working on a single-page project or if one page is to stand out from the others on a site, internal can work. But it's very inefficient if you try to approach a multipage project needing consistent style with this method since you'd have to write out the CSS on every. Single. Page.

Lastly, though in separate sections there's still the issue of style and content coexisting on the same document. If you add a whole bunch of styles it could get bloated making things hard to maintain and read.

External CSS

Now, last and most certainly not least is the third method of CSS application: external.

With external CSS, you create a separate stylesheet and add a link referencing it within the HTML documents, like so:

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

Just like the internal method, the style goes in the head section, with the difference being the stylesheet is applied to the document using the link tag with the rel and href attributes. rel indicates the relationship between the HTML document and the external one while href provides the source URL or location.

https://codepen.io/juanita-washington/pen/mdGdjxL

This is the best practice when it comes to styling a site or page. Style and content are completely separated and don't share a space. This makes the code a lot cleaner and things easier to maintain. No need to write in line, or at the top of every page. If you're dealing with a multipage site all you have to do is link to the stylesheet on every page. And if changes are to be made, just edit it and they'll be reflected across all linked pages.

Can I do a mix of all three?

Well yes, you can if you feel your situation calls for a combo. But you'd have to be mindful of the concepts in CSS called cascading and specificity.

In CSS, these have to do with which style rules take precedence. Cascading has to do with the order and inheritance of style declarations, and specificity means the more specific selector takes priority. In other words, the "closer" one is to the HTML, the higher priority it takes. So inline precedes internal which in turn precedes external.

Wrap-Up

To sum it all up:

  • Inline CSS - Style is added to a single element.

  • Internal CSS - Style affects only the document on which it is applied.

  • External CSS - Style is written on a separate stylesheet. Can be applied to any document to which it is referenced. Preferred method.

I hope this clarifies things for you. If it was helpful please let me know. If there's any way to make this better, don't hesitate to reach out!

CSSCSS3Beginner DevelopersWeb Development