How to Build an Internal Style Sheet

CSS That Affects Just the Current Document

A business man working at office
A business man working at office. Kohei Hara/Getty Images

What are Internal Style Sheets

Internal style sheets are styles that are placed in the of the HTML document. These styles affect only the document they are in, and cannot be referenced by any other Web document.

Advantages of Internal Style Sheets

  • Internal style sheets affect only the page they are on.
    If you are working on a large site and need to test styles before you load them on the site as a whole, internal style sheets can be a great tool. They allow you to test the styles in the context of the entire site without breaking any page but the one you are testing.
  • Internal style sheets can use classes and IDs.
    Unlike inline styles, internal style sheets can still take advantage of classes, IDs, siblings, and other element relationships.
  • Internal style sheets don't require that you upload multiple files.
    This is especially useful when you're working with things like email or kiosks where you have only one HTML file available to edit. I often use inline styles when I am not sure what the URL would be a style sheet loaded into a CMS - keeping the styles with the document means I know what styles affect that document.
  • Internal styles may have higher precedence than external style sheets.
    This is determined by the order that the external style sheets are loaded. The Web developer of the page has control over where the internal styles will be placed in the head of the document. If they are placed after the link to external styles, they will have a higher precedence in the cascade, and over-ride the external style sheet.

    Disadvantages of Internal Style Sheets

    • They affect only the page they are on.
      If you want to use the same styles in several documents, you need to repeat them for every page (or link to an external style sheet).
    • Internal style sheets increase page load times.
      Every page that has an internal style sheet must load and parse the style sheet information every time the page is loaded. External style sheets are cached by browsers - which improves load times for every page after the first is loaded.

      How to Write an Internal Style Sheet

      element:

      1. Open an HTML document in your Web editor.
      2. Add the following inside the

      A complete internal style sheet would look like this:

      Format
      mla apa chicago
      Your Citation
      Kyrnin, Jennifer. "How to Build an Internal Style Sheet." ThoughtCo, May. 7, 2017, thoughtco.com/how-to-build-an-internal-style-sheet-3466391. Kyrnin, Jennifer. (2017, May 7). How to Build an Internal Style Sheet. Retrieved from https://www.thoughtco.com/how-to-build-an-internal-style-sheet-3466391 Kyrnin, Jennifer. "How to Build an Internal Style Sheet." ThoughtCo. https://www.thoughtco.com/how-to-build-an-internal-style-sheet-3466391 (accessed November 21, 2017).