Hey Friends in our last tutorial we have seen that how to select the Html element in CSS. And Different types of selectors available in CSS. Now in this tutorial, we are going to learn about how to insert CSS in our Html file. So let’s begin…
How to ADD CSS in HTML Document.
There are commonly three ways to add CSS in your Html document. These are:-
- Inline CSS
- Internal CSS
- External CSS
1) INLINE CSS
The first method to add css into html document was Inline CSS. In the Inline CSS, CSS Property will be written inside the html element. For Example:-
Ex :- <p style="color: red; background-color: yellow; "> This is a Paragraph.</p>
Example :-
<head>
<title> Add CSS to html File </title>
</head>
<body>
<p style="color: red; background-color: yellow; font-size: 30px;"> This is a Paragraph.</p>
</html>
Output :-
2) Internal CSS
This is the second method to add CSS into the Html documents. Internal CSS is used under the style tag. It affects all the Html elements of the page. For Example:-
Ex :- <style> p : { color : red; } </style>
Important: The main difference between inline and internal CSS Was:-
- In Inline CSS, CSS Property is used only on the particular element in which CSS has written, it doesn’t affect other elements.
- But in Internal CSS, CSS Property will apply in all the Html elements used in your Html document. Look at the example below.
Example :-
<head>
<title> Add CSS to html File </title>
</head>
<style>
p{
color: red;
font-size: 33px;
background-color: rgb(168, 214, 168);
}
</style>
<body>
<p> This is a Paragraph.</p>
<p> This is the Second Paragraph. </p>
</html>
3) External CSS
This is the last method and for web developers, it is a very useful method comparing to the other methods. In this method, a new CSS file will be created and add to the Html documents. All the CSS property is written on this file. Let us see through an example
Example:-
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css"> // Style.css is a File in which all the css code is written.
</head>
<body>
<h1> This is a Heading. </h1>
<p> This is a Paragraph </p>
<div>
<p> This is a Paragraph Inside Div Container.</p>
</div>
</body>
</html>
CSS Code :-
background-color: yellow;
color: red;
font-size: 23px;
}
h1{
font-size: 30px;
color: green;
background-color: greenyellow;
}
Output:-
You May Also Like :-
- Introduction to CSS
- CSS Syntax With Example
- CSS Comments With Example
- CSS Selector & Different types of Selectors
0 comments:
Post a Comment