Add CSS in HTML
Technically, three ways are available to add CSS or CSS files in a web page in HTML that help to simplify the CSS code to use in an HTML web page.
- Inline CSS Code
- Internal CSS Code
- External CSS Code
Inline CSS Code
Through inline CSS code, you can write the CSS code directly in the tag by using the STYLE keyword. You can see the below example for more understanding:
<p style="font-size: 20px; color: red;">This is the 1st paragraph with Inline CSS code.</p>
Internal CSS Code
If you want to include Internal CSS code in your web page then you need to write the CSS code in the header section and call it in the Body section of a web page by using Class, here is an example of Internal CSS Code for more understanding:
<head>
.MyParagraph {
font-size: 20px;
color: red;
}
</head>
<body>
<p class="MyParagraph">This is the 1st paragraph with Internal CSS code.</p>
</body>
External CSS Code
If you want to use External CSS Code on your web page then first you need to create a "style sheet" and write your all CSS code on that "style sheet" and then call it on the head section of your web page where you want to use it, here is an example of External CSS code for more understanding:
style-sheet (name of the style page where you are writing CSS code)
.MyParagraph {
font-size: 20px;
color: red;
}
web page (call style-sheet by using the link by using the extension of ".css")
<head>
<link href="style-sheet.css" rel="stylesheet" />
</head>
<body>
<p class="MyParagraph">This is the 1st paragraph with External CSS code.</p>
</body>