🎁 Exclusive offer: Get EXTRA Bits and Celebrate Bybit's 6th Birthday With $2.2M Prize Pool. Act Now!

Code has been added to clipboard!

How to Link CSS to HTML: CSS External Style Sheets Explained

Reading time 2 min
Published Jun 11, 2019
Updated Jan 21, 2020

TL;DR — CSS external stylesheet means that you upload all styling properties and values to a separate .css file. Then, you link the document to your website. Learn how to link CSS to HTML to boost website performance and to update CSS rules easily.

How To Link CSS To HTML

  • CSS external stylesheet is a .css file with all CSS rules.
  • You can link CSS to HTML by using the <link> element.
  • After learning how to link a CSS file to HTML, you can style multiple pages and separate style from content.
DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

Styling Multiple HTML Pages

CSS external stylesheets refer to .css documents that contain CSS properties and values for the entire website.

Tip: .css files cannot contain HTML tags.

The following example shows how to link CSS to HTML by adding an external .css file into an HTML <head> section:

Example
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

Note: modifications and updates to the .css file will apply to the whole website. Linking HTML to CSS is the best option for easy website maintenance.

You have to use the <link> element to link HTML to CSS. The element itself is empty, but it contains three attributes:

  • rel describes the relationship between the HTML document and a linked document.
  • type determines what type of data should be taken by an input element.
  • href points to a specific file that you're uploading.

Note: you can create a .css file with any text editor. The document must have the .css extension.

The example below illustrates how a .css file from the first external CSS example looks like:

Example
h1 {
   color: red;
   margin-left: 20px;
}

p {
   color: blue;
}

Note: never leave a space between property value and unit. Write 10px, not 10 px.

  • CSS external stylesheet is the standard option for web design.
  • Knowing how to link a CSS file to HTML lets you optimize code and create websites with a consistent style.
  • Linking many external stylesheets to websites might increase website loading time.
  • Use inline CSS for styling a single element, and internal CSS for one page.