Understanding the 3 Types of CSS Styles

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

Front-end website development is often represented as a three-legged stool comprised of:

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

The second leg of this stool, Cascading Style Sheets, supports three different styles you can add to a document.

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

Each of these CSS styles presents unique benefits and drawbacks.

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

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:

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

This CSS rule deactivates the standard underline text decoration for 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 a unified page design. That is not a best practice: In fact, it is one step removed from the days of font tags and the admixture of structure and style in web pages. 

Inline styles also require very high specificity. This makes them 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 make this hard to do.

Inline styles are only appropriate when you use them sparingly, in the "exception to the rule" approach that sets one or two elements off from their peers on the page.

Embedded Styles

Embedded styles reside in the head of the document. They're encased in <style> tags and look much like external CSS files within that portion 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 features styles defined in the header, if you wanted to make a site-wide 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 approach is better than inline styles but still problematic in many instances.

<style>
h1, h2, h3, h4, h5 {
font-weight: bold;
text-align: center;
}
a {
color: #16c616;
}
</style>

Stylesheets that are added to the head 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 they load immediately with the page itself, instead of requiring other external files to be loaded. This technique 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. They're called into the main document using a <link> tag in the head of the document. External style sheets can either reside on the same server as the HTML, or they can be pulled in from another server entirely. This is often the case with assets, like fonts, which many sites borrow from Google.

External style sheets 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 one style sheet. This economy makes long-term site management much easier.

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

Most professional web designers use a primary CSS file to govern a site's layout and design.

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 not large to begin with. If your entire site uses a single CSS file, you also get the benefit of that document being cached after it is initially loaded, which means that there could be a slight performance hit on the first page for some visits, but subsequent pages will use the cached CSS file, so any hit would be negated. 

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Understanding the 3 Types of CSS Styles." ThoughtCo, Sep. 30, 2021, thoughtco.com/types-of-css-styles-3466921. Kyrnin, Jennifer. (2021, September 30). Understanding the 3 Types of CSS Styles. Retrieved from https://www.thoughtco.com/types-of-css-styles-3466921 Kyrnin, Jennifer. "Understanding the 3 Types of CSS Styles." ThoughtCo. https://www.thoughtco.com/types-of-css-styles-3466921 (accessed March 19, 2024).