CSS is added to the HTML Page to format the document and HTML elements according to the information in the style sheet.
Here are three types or method to insert the CSS in HTML Document.
Inline CSS is used to apply a unique style for a single line or element.
For use the Inline style we add the style attribute to particular element and this style attribute contain any CSS property.
Example :
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;text-align:center;">This is a heading</h1>
<p style="color:blue;">This is a paragraph.</p>
</body>
</html>An Internal CSS style sheet is used to format the single HTML Page with the unique style.
The internal style is defined inside the <style> element and this tag inside the head section.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: aliceblue;
}
h1 {
color: tomato;
margin-left: 20px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>With an external style sheet, we can the change the entire website formatting using including the single css file.
Each HTML page must include a reference to the external style sheet file using the <link> tag inside the head section.
Syntax for Include the External CSS File.
<link rel="stylesheet" href="mystyle.css" >
mystyle.css
body {
background-color: aliceblue;
}
h1 {
color: tomato;
margin-left: 10px;
}
The Below Example show the using of external css using <link> tag and how external css working in HTML document.
Example :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>body {
background-color: aliceblue;
}
h1 {
color: tomato;
margin-left: 10px;
}