Types of Cascading Style Sheet . I can recall the first time I heard this phrase. Honestly? It sounded too technical. My teacher replied, CSS is of three kinds. And I said, great, one more thing to memorize.
However, once I began doing the coding of my first website, everything just came together. CSS was no longer theory, it was the brush that brought to life my boring HTML page. And what are the kinds of cascading style sheet? They were the various brushes that I could pick based on my desired painting. 🎨
This is why I will take you through the 3 styles of cascading style sheet and that is; inline, internal and external CSS in the same manner I would have desired someone to explain it to me in a simple and easy to understand manner plus with real life examples.
Which Are the Types Of Cascading Style Sheet
We should clear some basics before we get down to it. It is CSS (Cascading Style Sheets) that makes sites look good. Without it all the sites would be plain black text on a white paper.
However, the fun part here is that 3 types of cascading style sheet exists in all of which have their purpose. Consider them as various decorations you can make to your room:
- A fly-by sticky note (inline CSS).
- An internal poster (internal CSS). Or
- an entire design template of the house (external CSS).
Now, let’s break each one down.
1. Inline CSS – The Quick Fix ✏️
CSS Inline is the writing of notes in the margin of your notebook. You use the style on an element of HTML.
How it looks in code:
It is an inline formatted paragraph.
<p style="color: red;">This is an inline styled paragraph.</p>
My real-life example: I didn’t want to have more than one heading in blue when I was creating my first HTML page. I was not aware of both external and internal CSS. So, I threw in an inline style. It worked like magic.
Pros:
- Very fast when making minor changes.
- Easy to test.
Cons:
- Gets messy fast.
- Not reusable.
👉 I would recommend inline CSS as a testing or one off modification only.
Internal CSS – The Middle Ground
In internal CSS, you use styles written in the part of the HTML file that is called tags.<|human|>Under internal CSS you write styles in a part of HTML file titled, tags. It is a way of not throwing all your decorations around the house.
Code example:
<head>
<style>
h1 { color: green; }
p { font-size: 18px; }
</style>
</head>
My real-life example: I created a personal portfolio Web site in college. It was just a single page. CSS inside was ideal as all was clean and it was within the same HTML file.
Pros:
- Less complex than inline.
- The same page may use styles that are reused.
Cons:
- Doesn’t scale with multi-page sites.
- Reduces the speed of the page when it becomes excessive.
👉 Internal CSS is effective in the case of small projects or one-page applications.
3. External CSS 🌐✨ the Choice of the Professional.
This is the gold standard. External CSS: you store all of your styles in a .css file and connect it to HTML.
Code example:
<link rel="stylesheet" href="styles.css">A real-life example: The first client project that I worked on, the group provided me with a style.css file. I bowed down I saw– oh! this is the way professionals do it. A single file, clean, reusable and easy to handle.
Pros:
- Super organized. T
- he same can be used on several pages.
- Faster and efficient.
Cons:
- Incurs an additional HTTP request (however, that is a minor price to pay).
- In case the CSS file fails to load, your site is plain.
Quick Comparison of the Types of Cascading Style Sheet
| Type | Where it goes | Best for | Example |
|---|---|---|---|
| Inline CSS | Inside the element | Quick fixes | <h1 style="color:blue;"> |
| Internal CSS | Inside <style> in HTML | Single-page sites | <style> h1 {color:blue;} </style> |
| External CSS | In a .css file | Large projects | link rel="stylesheet" |
Why Do You Care about the types of Cascading Style Sheet
The point is here: knowledge of the kinds of cascading style sheet is not only to pass exams or coding tasks. It is a matter of creating websites in the proper way.
- Want to make small edits fast? Use inline.
- Simple one-page project? Internal CSS is your friend.
- Developing a professional, multi-page web? It will save you with external CSS.
I experienced that a transition to internal to external CSS in my first client project made the process of maintaining the site changeable into a serene one. The design was governed by one CSS file.
Final Thoughts
We discussed the 3 forms of cascading style sheet which are: inline, internal and external. Each has its role. In my case, they did not need learning as theory and I found myself opening new levels of creativity.
You can experiment with all three in case you are beginners. Break things. Fix them. That’s how I learned. At some point you will realize that external CSS is your best friend in the world projects.
If You want to learn CSS, Web Designing Course & Front End Development Course visit www.kaashivinfotech.com
And the next time someone questions you about the kinds of cascading style sheet, not only will you know what it is, but you also have stories and real life experience to support this.
Related Reads:
