How to add CSS to HTML page for BEST performance

1. Add css file external to html.

This is the most popular way to add css to html web page. We will separate css to another file with the .css extension. This file can contain large css define and you can import css file to many html pages. To add css file to html page, html support <link> tag to help import a css file. You can use multiple <link> tags to import multiple CSS files into one Html file. You should put this tag inside the <head> tag. However, you can also put it inside of the <body> tag.
The syntax for import css file to html page as below:

<link rel="stylesheet" type="text/css" href="yourfile.css" media="screen" />
<link href="yourfile.css" ... >
<link href="sub-folder/yourfile.css" ... >
<link href="https://www.yourdomain.com/foldername/yourfile.css" ... >

1.1 Advantages

- Scalable
- Easy maintain
- Reuseable
- Change css file will affect all html file
- Increases time load site

1.2 Disadvantages

If you add more css files to html page, it will make more requests when the page loads and make the page load slowly.

2. Add css using the style tag.

You can add css directly to html documents by using a <style> tag. It looks like as below:

<style type="text/css"> /* Add style rules here */ </style>

2.1 Advantages

- Faster loading times because it does not make any request HTTP for your site.
- You can reusable css but it only for that html document.
- Works great with dynamic styles.

2.2 Disadvantages

- It is harder to maintain than create an external file.
- It makes the site heavier.
- CSS must be downloaded with every page request, it can not cache by the browser.

3. Add css inline using the style attribute of html tag.

You can write css directly to any Html element by attribute style of that element. You can see example code below:

3.1 Advantages

- Works great with dynamic styles.
- Faster loading times because it does not make any request HTTP for your site.

3.2 Disadvantages

- Can not be reusable: if you have many tags with the same style you need to repeat it many times.
- It makes the site heavier.
- Very difficult to maintain.
- Not good for SEO.

4. Using Javascript to add css to html page.

This way is not usually used to add css to an html page but sometimes you need using js to add a css file to html for best performance or simple you want to add a class or css property for any html tag.

4.1 How to Inject an external stylesheet file with javascript.

To add a css file you need to create an element <link> tag and then append it to <head> tag of Html document.

/* create the link tag html */ 
var cssHtmlTag = document.createElement('link');
/* add attributes */
cssHtmlTag.setAttribute('rel', 'stylesheet'); cssHtmlTag.setAttribute('href', 'mystyles.css');
/* attach to the document head */ document.getElementsByTagName('head')[0].appendChild(cssHtmlTag);

4.2 Insert a block of rules.

This way allows one or more internal css styles, same with way 2 above. This way is often used to generate dynamic css from the database.

/* specify your css rules */ 
var cssInternal = 'p { font-size:15px; color:#000; }';

/* create the style tag html */
var styleTag = document.createElement('style');
/* add css rules to the style tag */ styleTag.appendChild(document.createTextNode(cssInternal)); /* append the style tag to the document head or body */ document.getElementsByTagName('head')[0].appendChild(styleTag);

4.3 Add inline styles to any Html element.

You can add direct inline css for any Html element by using Javascript. This way for the result is the same as the way 3 above.

/* get a element */ 
var element = document.getElementById('header');
/* add css properties */
element.css.color = 'green';
element.css.backgroundColor = 'red';

4.4 Advantages

- Suitable for generating dynamic css.
- Support Lazy load css.

4.5 Disadvantages

- It’s same three-way above

5. Using @import to add css file to another css file.

This way is not a popular way to link css file to html page but sometimes it is very helpful, you can use @import to add a css file to another css file as below:

@import "anotherstyles.css";

5.1. Advantages

No need to change the code of the Html page but it will affect too many pages if they use the same css file.

5.2 Disadvantages

It makes more requests when loading sites.

6.1 Minify css

We need to minify css to remove white space, comment and more… to reduce the total size of the CSS file. Thereby help to load webpage faster.
Have some website support for minifying css you can refer to https://cssminifier.com or https://csscompressor.com

6.2 Preload css file

This is a new technology, it ensures all css files are available earlier and are less likely to block the page’s render thereby improving performance. Syntax as below:

<link rel="preload" href="style.css" as="style" />
<link href="style.css" rel="stylesheet" type="text/css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" /> 
<noscript><link href="style.css" rel="stylesheet" /></noscript>

6.3 Load css asynchronous

To fix the issue block the page’s render of css you can use LoadCSS.js to resolve this problem. This is a small js and also a pattern for loading CSS asynchronously. You can download the js plugin and see an example by the above link.

7. Summary

In this article, I just introduced to you some tips how to add css to html page and some tips to load css for best performance. I hope it is helpful to you and also recommend using way 1 to do it.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store