Way to Insert CSS With Example
You can apply CSS over HTML Element by following ways :
- Inline Styling
- Internal Styling
- External Styling
Above mentioned ways can be implement to insert CSS over HTML Element.
So first we are going to see Inline Style means how we can use inline style and what is the syntax of Inline styling.
 |
| Different Ways to Insert CSS by Tech Talk Tricks |
Inline Style:
If we style out HTML content inside that particular element then it is inline style.
Example :
<p style="color:red;font-size:15px">Hello Tech Talk Tricks</p>
Explanation :
If we want to style only particular element or HTML content then we used inline style method. As you can see the style="color:red;font-size:15px". So this the high priority styling in HTML document.
Note : If you are using inline styling then don't forget to use Style Attribute before assign it properties and value.
Internal Style:
Internal Style are basically used when we want to append our style on only specific web-page. As you saw, that if we want to style only particular element of web-page the we used Inline Style.So if we want to use style for specific web-page then we can use Internal style.
For Internal style, we'll place our css code between <head>...</head> tag surrounded by <style>...</style> tag.
Example :
<html>
<head>
<style>
p{color:red;font-size:15px;}
</style>
</head>
<body>
<p>Hello Tech Talk Tricks</p>
</body>
</html>
Explanation :
As above example, you can use internal styling in head tag surrounded by style tag.
If you want to manage all styling of your complete website the you can use external styling method. For external style we will create a CSS file and then link that created CSS file to our each web-page of website.So if we change any style from CSS file then it will be affect the whole web-page means single CSS file will control all design part of your website.
Example :
<html>
<head>
<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Hello Tech Talk Tricks</p>
</body>
</html>
demo.css file Content
p{color:red;font-size:15px;}
Explanation :
In Above example, we create a file name as demo and inside demo.css file we write p{color:red;font-size:15px;} after that saved that file with .css extension.
So if you run your HTML file and if everything is correct then you will get the same output as above mentioned Inline style and Internal Style.
? What if we apply different style on same HTML element
There may be scenario In which we applied different CSS on same HTML element, then what will be happen and which style (Inline/Internal/External) will be apply on that element.
so understand the scenario by Example,
> First we applied Inline style on p Element :
<p style="color:red;">Hello Tech Talk Tricks</p>
> Second we applied Internal style on p Element :
<html>
<head>
<style>
p{green;}
</style>
</head>
<body>
<p>Hello Tech Talk Tricks</p>
</body>
</html>
> Third we applied External style on same p Element :
p{color:yellow;}
So we saw we applied different color for p element on different styling ways then which color it will take to display on web browser. So here is the priority list >
If all styling ways try to style the same HTML element then it will first take Inline Style.If Inline style not found then it will go for Internal style and Internal Style also not found then it will apply the External style CSS code.
<html>
<head>
<link href="demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Hello Tech Talk Tricks</p>
</body>
</html>
demo.css file Content
p{color:red;font-size:15px;}
Explanation :
In Above example, we create a file name as demo and inside demo.css file we write p{color:red;font-size:15px;} after that saved that file with .css extension.
So if you run your HTML file and if everything is correct then you will get the same output as above mentioned Inline style and Internal Style.
? What if we apply different style on same HTML element
There may be scenario In which we applied different CSS on same HTML element, then what will be happen and which style (Inline/Internal/External) will be apply on that element.
so understand the scenario by Example,
> First we applied Inline style on p Element :
<p style="color:red;">Hello Tech Talk Tricks</p>
> Second we applied Internal style on p Element :
<html>
<head>
<style>
p{green;}
</style>
</head>
<body>
<p>Hello Tech Talk Tricks</p>
</body>
</html>
> Third we applied External style on same p Element :
p{color:yellow;}
So we saw we applied different color for p element on different styling ways then which color it will take to display on web browser. So here is the priority list >
Inline Style > Internal Style > External Style
If all styling ways try to style the same HTML element then it will first take Inline Style.If Inline style not found then it will go for Internal style and Internal Style also not found then it will apply the External style CSS code.
Watch videos of CSS on YouTube, Click on the below link :
Watch Video in HINDI on YouTube Click on the below video
