Using CSS in HTML
Actually we are having three methods by which we can use our CSS inside the HTML. These are as follows :-
- External style sheet
- Internal style sheet
- Inline sheet
External style sheet
It means that you are having any different stylesheet in which you are doing the styling part of your HTML elements
and this different style sheet is linked with your existing webpage. And this link we provide through <link> tag
inside the <head> tag.
For Example:-
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<p> Let's see here </p>
<p id="main"> I am Manish Singh Bhakuni </p>
</body>
</html>
This stylesheet can be written in any editor but it must be saved with the .css extension.
Here is our "main.css" file . Let's see:-
body{
background-color:pink;
}
p{
color:red;
font-size:20px;
}
Output of the program
Let's see here
I am Manish Singh Bhakuni
Internal style sheet
Internal style sheet can be used with the same HTML page inside the <script> tag
which must be inside the <head> tag.
For example:-
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:pink;
}
p{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<p> Let's see here </p>
<p id="main"> I am Manish Singh Bhakuni </p>
</body>
</html>
Output of the program
Let's see here
I am Manish Singh Bhakuni
Inline style
We can also defines the styling for any element in the same line after using
style attribute following after the tags.
For example:-
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:pink";>
<p> Let's see here <p>
<p style="color:red; font-size:20px;"> I am Manish Singh Bhakuni <p>
</body>
</html>
Output of the program
Let's see here
I am Manish Singh Bhakuni
