Speed Inline small CSS

inlined css in html

Inlining CSS simply means putting your CSS into your HTML file instead of keeping it in an external CSS file. This reduces the amount of files the browser has to download prior to displaying your web page. If you are using an external CSS file, the browser must first load your HTML file, then download your CSS file.

After you inline your CSS the browser only has to download your HTML file. Downloading one file is faster than downloading two.

How to inline CSS

You just copy the contents of your external CSS file and paste them between style tags in the head section of your HTML file.

It looks like this:

<style type="text/css">

The important thing to remember is to place this info in the head section of your HTML. You must also use the proper HTML style tags. Copy and paste the contents of your external CSS file inbetween the style tags:

<style type="text/css">
body{margin:0;padding:0;background:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:15px;color:#555;}
h1, h2, h3{margin:0;padding:0;font-weight:normal;color:#555;}
p, ul, ol{margin-top:0;line-height:180%;}

What does this do?

Putting your CSS into the head section of your HTML will save the web browser a round trip to the server, since you are no longer asking for a separate external file for the browser to load to see your CSS.

Pros and Cons

While this does save a round trip to the server (good) it also means that your CSS file will no longer be cached (bad).

When you use external CSS files the entire file is cached (remembered) by the browser so it doesn't have to take the same steps over and over when a user goes to another page on your website. When you inline your CSS, this does not occur and the CSS is read and acted upon again when a visitor goes to another page of your website. This does not matter if your CSS is small and simple. If your CSS is large and complex, as they often tend to be, then you may want to consider that the caching of your CSS is a better choice.

Many people inline the CSS of their homepage or landing pages that have to load super quick to be effective and then use external CSS for the rest of their site.

Tip: Use the CSS delivery tool which will explain how CSS is being used by a certain page.

Patrick Sextonby Patrick Sexton