CSS is added to HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents.
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
Inline CSS is used to apply CSS on a single line or element.
Syntax
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
Internal CSS
Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page. It is written inside the style tag within head section of html.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>internal </h1>
<p>Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page.
It is written inside the style tag within head section of html</p>
</body>
</html>
External CSS
External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS code in a css file. Its extension must be .css for example style.css.
p{color:blue}
You need to link this style.css file to your html pages like this:
<link rel="stylesheet" type="text/css" href="style.css">