Loading Please Wait...
Base on the CSS style use, there are three types of CSS.
Inline CSS is included by the style attribute.
It is used to style single HTML element
<p style="color: red;">This is paragraph</p>
Internal CSS is included by the style element in the head section.
It is used to style multiple HTML element in a single page.
<!DOCTYPE html>
<html>
<head>
<style>
p{ color: red; }
</style>
</head>
<body>
<p>All the paragraphs</p>
<p>styled at once</p>
</body>
</html>
External CSS is included by the link element in the head section.
It is used to style multiple HTML element for multiple page.
We need to create a separate file for CSS style and save it with ".css" extension.
p{ color: red; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>All the paragraphs</p>
<p>styled at once</p>
</body>
</html>
We can use all three CSS style for a single HTML element. The browser selects the style that is defined at the last.
The order of CSS inclusion is very important. It defines the style that the browser detect at the last and hence apply the style accordingly.
Hence Inline CSS have the high priority and override internal and external CSS.
Similarly if both Internal and External CSS are used then order of inclusion defines the style to be picked up.
There may be a question arises that Among all the CSS types, which one should we use?
We have listed some key points which will guide you.
| Points | Inline | Internal | External |
|---|---|---|---|
| Priority | High | Medium | Low |
| Complexity | High | Medium | Low |
| Code Length | Lengthy | Medium | Minimal |
| Extensibility | Low | Medium | High |
| Upgradable | Low | Medium | High |
| Usability | Use this if you have single element to be style differently | Use this if you have single page to be style differently | Try to use this all the time. |
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved