The Best Ways to Link External CSS to HTML

Cascading Style Sheets (CSS) are an essential part of web design.

They allow you to style and format your HTML content, giving your web pages a professional and polished look. 

This post will provide a comprehensive guide on all the different methods to link an eternal CSS to your HTML code.

How to Link External CSS to HTML

You can use the link tag <link/>, the @import rule or a Content Delivery Network (CDN) to link external CSS to HTML. You can also use the @import directive in the CSS file “itself” to import external CSS styles.

What is External CSS?

External CSS is a way of adding style to your HTML content using an external file. Instead of adding style information directly to your HTML code, you create a separate CSS file that contains all your style information. 

Then, you link this file to your HTML code, and your web page will use the style information from the external file.

Why Use External CSS?

Using external CSS has several advantages:

• Separation of Concerns: By separating the style information from your HTML code, you can focus on the structure and content of your web page separately from its appearance.
• Reusability: You can use the same CSS file across multiple pages, which saves you time and effort.
• Maintenance: If you need to change your website’s appearance, you only need to update the CSS file, and all the pages that link to it will automatically update.

Now, let’s look at the different methods of linking external CSS to HTML.

Method 1: Using the Link Tag to Link External CSS to HTML

The link tag is a very useful tag in HTML, particularly for linking external resources such as stylesheets, icon files, and fonts. It is the most commonly used method for linking external CSS to HTML. 

Below are the steps to use the link tag to link CSS in your HTML code.

Step 1: Create a CSS file.

Create a new file with a .css extension and add your CSS code. For example, create a file called “style.css” and add the following code:

Step 2: Save the CSS file

Save the CSS file in the same directory as your HTML file.

Step 3: Link the CSS file.

Add the following code to the head section of your HTML file to link the CSS file:

The link element specifies the relationship between the current and linked documents. The rel attribute defines the relationship type, which should be set to “stylesheet” to indicate that the linked document is a CSS stylesheet.

Other Link tag properties include:

• href: This attribute specifies the URL of the linked resource. For example, if you’re linking to a stylesheet, the href attribute would point to the URL of the CSS file.
• rel: This attribute specifies the relationship between the document and the linked resource. For stylesheets, the rel attribute should be set to “stylesheet.” Other possible values for rel include “icon” (for favicon files), “preconnect” (for DNS prefetching), and “preload” (for preloading content).
• type: This attribute specifies the MIME type of the linked resource. For stylesheets, the type attribute should be set to “text/css.”
• media: This attribute specifies the media type or query for which the styles in the linked stylesheet should be applied.
• integrity: This attribute specifies a hash value that can be used to verify the integrity of the linked resource. This is particularly useful for security reasons, as it can help prevent malicious modifications to the linked file.
• crossorigin: This attribute specifies whether the linked resource should be requested with CORS (Cross-Origin Resource Sharing) semantics. This can be useful when linking to resources on other domains, as it can help prevent security issues.

Method 2: Using @import to Link External CSS to HTML

Another method of linking external CSS to HTML is the @import rule. Below are the steps to use the @import rule tag to link CSS in your HTML code.

Step 1: Create a CSS file.

Create a new file with a .css extension and add your CSS code. For example, create a file called “style.css” and add the following code:

Step 2: Save the CSS file.

Save the CSS file in the same directory as your HTML file.

Step 3: Link the CSS file.

Add the following code to the head section of your HTML file to link the CSS file:

The @import rule imports a CSS file into another CSS file. In this case, we are using it to import our external CSS file into our HTML file.

Method 3: Using the @import directive in the CSS file to Link External CSS to HTML

Another way to link external CSS to HTML is by using the @import directive in the CSS file itself. Below are the steps to add CSS using the import directive.

Step 1: Create a CSS file.

Create a new file with a .css extension and add your CSS code. For example, create a file called “style.css” and add the following code:

In this example, we will import a Google font, ‘Open Sans’, using the @import rule. You can use this method to import other CSS files as well.

Step 2: Save the CSS file.

Save the CSS file in the same directory as your HTML file.

Step 3: Link the CSS file.

Add the following code to the head section of your HTML file to link the CSS file:

Note: Even though we used the @import rule in the CSS file, we still need to link the CSS file to the HTML file using the link tag.

Method 4: Using a Content Delivery Network (CDN) to Link External CSS to HTML

A Content Delivery Network (CDN) is a network of servers that are distributed around the world. CDNs host and deliver static files, such as images, videos, and CSS files, to users quickly and efficiently.

Using a Content Delivery Network (CDN) to link external CSS is a great way to improve the performance of your website, as it can help reduce the load time for your pages by caching the files and serving them from a network of servers around the world.

Here are the steps to link to a CSS file on a CDN:

Step 1: Choose a CDN.

There are several CDNs available, such as Google CDN, Microsoft CDN, and Cloudflare CDN. Choose the one that works best for you.

Step 2: Link to the CSS file

Add the following code to the head section of your HTML file to link to the CSS file on the CDN:

Replace “cdn.example.com” with the URL of your chosen CDN and “style.css” with the name of your CSS file.

Below are some popular CSS libraries that can be linked via CDN:

• Bootstrap: Bootstrap is a popular CSS framework that provides a set of pre-built UI components, styles, and JavaScript plugins that can be used to build responsive websites quickly.
  
  Bootstrap can be linked via CDN by including the following code in the <head> section of your HTML document:

• Font Awesome: Font Awesome is a popular icon library that provides a wide range of icons that can be used in your website or application. Font Awesome can be linked via CDN by including the following code in the <head> section of your HTML document:

• jQuery UI: jQuery UI is a popular UI library that provides a set of pre-built UI components, styles, and effects that can be used to enhance the look and feel of your website.
  
  jQuery UI can be linked via CDN by including the following code in the <head> section of your HTML document:

How to link external CSS to a React Application

Create a CSS file in the /src directory and give it a common name like index.css. Once done, you can import this CSS file inside your component file using the import rule below:

How to link external CSS to a NextJS Application

Create a CSS file inside the /styles directory or anywhere inside your components files and give it a common name like index.css. Unlike ReactJS, you must import this file inside your _app.js file to apply the styles on your application: