What is inline CSS?
- Inline CSS refers to CSS found in an HTML file
- It is found in the head of a document between style tags
- Inlining CSS simply means putting your CSS into your HTML file instead of an external CSS file
Why use it?
Inlined CSS 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. When done right it is an important part of an optimized CSS delivery solution.
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>
</style>
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>
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;}
h1{font-size:3.5em;}
h2{font-size:2.4em;}
h3{font-size:1.6em;}
p, ul, ol{margin-top:0;line-height:180%;}
a{text-decoration:underline;color:#FF2929;}
</style>
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.
It allows less render blocking CSS and faster pageloads.
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.
Google recommends 1 inlining of blocking css...
"For best performance, you may want to consider inlining the critical CSS directly into the HTML document. This eliminates additional roundtrips in the critical path and if done correctly can be used to deliver a “one roundtrip” critical path length where only the HTML is a blocking resource".
Use the CSS delivery tool which will explain how CSS is being used by a certain page.
by