The main concern for all beginners about CSS is “How to add CSS” in a webpage. Without adding CSS, you can’t give a proper look and feel to your webpages. Adding CSS is the most important feature of the webpages, so there are various ways to add CSS.
Three Main Ways to add CSS
Here are three main ways to add CSS, which is given below:
- External CSS
- Internal CSS
- Inline CSS
1. External CSS
In External CSS, you will create a separate CSS and written all code on it. After creating the CSS file, you linked this file to your webpage inside the head section with the help of the <link> tag. You can add the same CSS file to many webpages to style the relevant elements.
Example
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="demostyle.css"> </head> <body> <h2>There are many types of heading</h2> <p>Today we learn, how to add CSS</p> </body> </html>
2. Internal CSS
In Internal CSS, if you want to design a single page in a unique style, then you will add an internal style sheet. With the help of <style> tag define an internal style sheet, inside the head section.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #000;
}
h2 {
color: red;
margin-left: 40px;
}
</style>
</head>
<body>
<h2>There are many types of heading</h2>
<p>Today we learn, how to add CSS</p>
</body>
</html>
3.Inline CSS
In Inline CSS, you can use a unique style for a single line or element.
To apply inline styles, you will add the style attribute to given line or element.
Example
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="demostyle.css"> </head> <body> <h2 style="color:blue;text-align:center;">There are many types of heading</h2> <p style="color:red;">Today we learn, how to add CSS</p> </body> </html>