Including CSS in HTML Documents

To include CSS in HTML documents, we can either include them internally, inline or link an external file.

Syntax

The syntax for including CSS files in HTML is as follows

/*inline*/
<element style="/*declarations*/"></element>
/*internal*/
<head>
<style>
/*declarations*/
</style>
</head>
/*external*/
<head>
<link rel="stylesheet" href="#location">
</head>

Example

The following examples shows the linking of CSS file in HTML Documents

Inline CSS

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family: Forte;">Demo text</p>
<p style="background-color: lightblue;">This is Demo text</p>
<img src="https://www.tutorialspoint.com/memcached/images/memcached.jpg" style="border: 3px groove orange;">
</body>
</html>

Output

This gives the following output −

Including CSS in HTML Documents

Example

Internal linking

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   padding: 15px;
   width: 33%;
   border: 2px solid;
   border-radius: 5%;
}
div > div {
   border-color: transparent;
   box-shadow: inset 0 0 6px red;
}
div > div > div {
   border-color: red;
}
</style>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

Output

This gives the following output −

Including CSS in HTML Documents

Example

External linking

In CSS, you can also include an external css file and place the css styles in it. The same can be referred from the HTML file as shown in the below example −

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Demo text</p>
<p>Demo text again</p>
</body>
</html>

Output

This gives the following output −

Including CSS in HTML Documents

Following is the style.css −

p {
   text-decoration: overline;
   text-transform: capitalize;
}