Linking External Style Sheets in CSS

CSSWeb DevelopmentFront 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;
}

Output

This gives the following output −

raja
Published on 08-Jan-2020 08:00:31
Advertisements