Linking External Style Sheets in CSS

CSS Web Development Front End Technology

CSS allows us to link external style sheets to our files. This helps us make changes to CSS separately and improves the page load time. External files are specified in <link> tag inside <head> of the document.

Syntax

The syntax for including external CSS is as follows.

<link rel="stylesheet" href="#location">

Example

The following examples illustrate how CSS files are embedded &miuns;

HTML file

Live Demo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Demo Text</h2>
<div>
<ul>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
<li>This is demo text.</li>
</ul>
</div>
</body>
</html>

CSS file

h2 {
   color: red;
}
div {
   background-color: lightcyan;
}

Output

This gives the following output −

Example

HTML file

Live Demo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html>

CSS file

p {
   background: url("https://www.tutorialspoint.com/images/QAicon.png");
   background-origin: content-box;
   background-size: cover;
   box-shadow: 0 0 3px black;
   padding: 20px;
   background-origin: border-box;
}