Understanding the 3 Types of CSS Styles

Inline, embedded, and external style sheets: Here's what you need to know

An illustration of a laptop display CSS on the screen.
hardik pethani / Getty Images

Front-end website development is often represented as a 3-legged stool. These legs are as follows:

  • HTML for the structure of a site;
  • CSS for the visual styles;
  • Javascript for behaviors.

The second leg of this stool, CSS or Cascading Style Sheets, is what we are looking at here today. Specifically, we want to address the 3 kinds of styles you can add to a document.

  1. Inline styles
  2. Embedded styles
  3. External styles

Each of these kinds of CSS styles has their benefits and drawbacks, so let's take a deeper look at each of them individually.

Inline Styles

Inline styles are styles that are written directly in the tag in the HTML document. Inline styles affect only the specific tag they are applied to. Here is an example of an inline style applied to a standard link, or anchor, tag:

<a href="/index.html" style="text-decoration: none;">

This CSS rule would turn the standard underline text decoration off of this one link. It would not, however, change any other link on the page. This is one of the limitations of inline styles. Since they only change on a specific item, you would need to litter your HTML with these styles to achieve an actual page design. That is not a best practice. In fact, it is one step removed from the days of "font" tags and the mixture of structure and style in web pages. 

Inline styles also have very high specificity. This makes them very hard to overwrite with other, non-inline styles. For example, if you want to make a site responsive and change how an element looks at certain breakpoints by using media queries, inline styles on an element will make this very hard to do.

Ultimately, inline styles are really only appropriate when used very sparingly. In fact, we rarely ever use inline styles on our webpages.

Embedded Styles

Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in. Once again, this approach negates one of the strengths of CSS. Since every page would have styles in the, if you wanted to make a sitewide change, like changing the color of links from red to green, you would need to make this change on every page, since every page uses an embedded style sheet. This is better than inline styles, but still problematic in many instances.

Stylesheets that are added to the

of a document also add a significant amount of markup code to that page, which can also make the page harder to manage in the future.

The benefit of embedded style sheets is that the load immediately with the page itself, instead of requiring other external files to be loaded. This can be a benefit from a download speed and performance perspective.

External Style Sheets

Most websites today use external style sheets. External styles are styles that are written in a separate document and then attached to various web documents. External style sheets can affect any document they are attached to, which means that if you have a 20-page website where each page uses the same stylesheet (this is typically how it is done), you can make a visual change to every one of those pages by simply editing that style sheet. This makes long-term site management much easier.

The downside to external style sheets is that they require pages to fetch and load these external files. Not every page will use every style in the CSS sheet, so many pages will load a much larger CSS page than that actually need. 

While it is true that there is a performance hit for external CSS files, it can certainly be minimized. Realistically, CSS files are just text files, so they are generally not very large to begin with. If your entire site uses 1 CSS file, you also get the benefit of that document being cached after it is initially loaded. This means that there could be a slight performance hit on the first page some visits, but subsequent pages will use the cached CSS file, so any hit would be negated. External CSS files are how we build all our web pages.