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
<!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
<!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 −
