Inline CSS

Modern browsers block on external CSS before painting content to the screen. This incurs additional network latency and increases the time it takes to display content to the screen. To optimize the time to render, if the external CSS resources are small, you can insert those directly into the HTML document. Inlining small CSS in this way allows the browser to proceed with rendering the page.

For example, if the HTML document looks like this:

<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

And the resource small.css is like this:

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

Then you can inline the CSS as follows:

<html>
  <head>
    <style>
      .yellow {background-color: yellow;}
      .blue {color: blue;}
      .big { font-size: 8em; }
      .bold { font-weight: bold; }
    </style>
    </head>
  <body>
    <div class="blue yellow big bold">
      Hello, world!
    </div>
  </body>
</html>

This eliminates the browser request to small.css by placing its contents inline in the HTML document.