Teach with us

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;
}
Updated on 08-Jan-2020 12:03:37

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements