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
Live Demo
<!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 −
Example
Internal linking
Live Demo
<!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 −
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 −
Live Demo
<!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 −
Following is the style.css −
p {
text-decoration: overline;
text-transform: capitalize;
}
Published on 08-Jan-2020 16:30:00
