Types of CSS Styles

Inline, Embedded, and External Style Sheets

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "Types of CSS Styles." ThoughtCo, May. 10, 2017, thoughtco.com/types-of-css-styles-3466921. Kyrnin, Jennifer. (2017, May 10). Types of CSS Styles. Retrieved from https://www.thoughtco.com/types-of-css-styles-3466921 Kyrnin, Jennifer. "Types of CSS Styles." ThoughtCo. https://www.thoughtco.com/types-of-css-styles-3466921 (accessed October 19, 2017).
CSS3 logo
CSS3 includes a number of new style options.

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 have 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 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, I rarely ever use inline styles on my 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 style sheet (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 you 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 I build all my webpages.

    Original article by Jennifer Krynin. Edited by Jeremy Girard on 5/2/17