Do you think IIT Guwahati certified course can help you in your career?
Introduction
Making websites look good is important. This is where CSS comes in. CSS stands for Cascading Style Sheets and it's like the paint and wallpaper for a website. It decides how everything looks, from colors to layouts.
In this article, we're going to talk about three ways to use CSS: putting it right in the web page, keeping it in the same file but separate, and using a whole different file for it. This will help you understand how to make web pages not just work well, but also look great.
Types of CSS
CSS can be implemented in three different ways:
Inline CSS
Internal or Embedded CSS
External CSS
Inline CSS
Inline CSS means putting the style directly into the HTML tag. It's like dressing up each part of your web page separately. When you use inline CSS, you're telling that specific part of the page, like a paragraph or a headline, exactly how to look right there in the HTML code.
Here's a simple example. Let's say you have a sentence you want to stand out by making it red. You can do this by adding the style right into the HTML like this:
<p style="color: red;">This sentence will be red.</p>
This tells the browser, "Hey, display this text in red!" It's a quick way to make changes, but if you have a lot of text and you want all of it to look the same, it can get a bit messy because you'd have to repeat the style for every single piece. So, it's best for small, one-time changes.
Example
Consider you're writing a blog post and you want just one sentence to stand out by being bold and colored blue. Here's how you'd do it using Inline CSS:
<p>This is a normal sentence.</p>
<p style="font-weight: bold; color: blue;">This sentence is bold and blue.</p>
<p>Back to normal text here.</p>
In this example, the second sentence will stand out because we've applied the style directly to it, making the text bold and blue.
Pros and Cons of Inline CSS
Pros of Inline CSS
Styles are applied directly to the HTML element, making it easy to see and edit.
No need for external files, i.e. works out of the box with minimal setup.
Useful for quick fixes or testing specific styles on a single element.
Overrides both internal and external CSS with higher specificity.
Cons of Inline CSS
Not reusable i.e., styles must be repeated for each element.
Clutters HTML and reduces code readability.
Difficult to maintain, especially in large projects.
Slows down performance if used extensively across a website.
Internal or Embedded CSS
Internal CSS is when you put the style for your web page inside the <head> part of your HTML file. Think of it as setting rules for your page's look in one place, so everything can follow it. This way, you don't have to repeat the style for each part like in inline CSS.
Here's how you do it:
<head>
<style>
p {
color: blue;
}
</style>
</head>
With this code, all the paragraphs (<p>) on your web page will be blue. It's like telling all paragraphs to wear a blue shirt. This method is great when you want many parts of your page to look the same without writing the same style over & over.
But remember, this style only works for this one web page. If you have another page and you want the same style, you'd have to write it again in that page's <head>.
Example
Imagine you want all the headings on your page to be centered and colored teal, and all paragraphs to have a gray background. You'd use Internal CSS like this inside your HTML file:
<head>
<style>
h1 {
text-align: center;
color: teal;
}
p {
background-color: lightgray;
}
</style>
</head>
<body>
<h1>This is a Centered Heading</h1>
<p>This paragraph will have a gray background.</p>
</body>
Here, the <style> tag within the <head> section of the HTML document contains the CSS rules for the entire page, applying the specified styles to all <h1> headings and <p> paragraphs.
Pros and Cons of Internal CSS
Pros of Internal CSS
You don’t need an external CSS file; styles are written inside the HTML document.
It allows you to override external styles easily when needed.
It is simple to edit and manage, especially for small or single-page websites.
Placing styles in the <head> section gives better control and visibility.
Cons of Internal CSS
Styles cannot be reused across different pages, so you must repeat them.
It can slow down the website if the same styles are written on multiple pages.
Not suitable for large websites where modular and organized CSS is needed.
External CSS
External CSS is when you put all your style rules in a separate file. This file ends with .css. It's like having a whole closet for your web page where it can pick outfits from. This method is super handy because you can use the same closet (or .css file) for many web pages, making them all match without repeating the same styles.
To connect your web page to this style closet, you add a link in the <head> part of your HTML file, like this:
And in the styles.css file, you might have something like:
p {
color: green;
}
Now, all paragraphs on any web page linked to this styles.css file will be green. It's great for keeping everything organized and making big changes easily. If you decide all paragraphs should be red instead of green, you just change it in one place, the styles.css file, and all the pages update.
Example
For a more better look across multiple pages, you might decide all the links should be orange and not have the typical underline unless they're hovered over. You'd put this in an external CSS file, say mystyles.css:
/* mystyles.css */
a {
color: orange;
text-decoration: none; /* Removes the underline */
}
a:hover {
text-decoration: underline; /* Adds underline on hover */
}
Then, in each HTML file where you want these styles to apply, you'd link to this CSS file in the <head> section like this:
With this setup, all links in your HTML documents that link to mystyles.css will be orange and only underline when the mouse hovers over them, ensuring consistency across all pages using this stylesheet.
Pros and Cons of External CSS
Pros of External CSS
Offers a clean and organized way to manage styles across a website.
Promotes reusability—link one CSS file to multiple HTML pages.
Centralized updates: edit one file, and changes reflect across all pages.
Reduces code duplication and helps improve page load times.
Ideal for large websites with many pages and complex styling needs.
Cons of External CSS
Requires an extra HTTP request to load the CSS file.
If the link or file path is broken, the page appears unstyled.
Not practical for single-page or very small projects due to added complexity.
When to Use Inline, Internal, and External CSS
Inline CSS
Best for quick testing or applying a one-time style to a specific element.
Useful when style changes are minimal and isolated.
Limitation: Not reusable and clutters HTML code.
Internal CSS
Ideal for single-page sites or when styles are specific to one HTML page.
Easier to manage for small projects.
Limitation: Not reusable across multiple pages and increases HTML size.
External CSS
Best choice for websites with multiple pages.
Centralized styling improves consistency and maintainability.
Limitation: Depends on external file loading—broken links can affect styling.
Which Type of CSS is Best for Multiple Web Pages?
External CSS is the best choice for managing styles in multi-page websites. Here's why:
Reusability: One CSS file applies to all linked HTML pages.
Centralized Updates: Change styles in one place to update the entire site.
Inline/Internal CSS require duplication and are harder to maintain in large-scale projects.
Key Differences — Inline CSS vs Internal CSS vs External CSS
Feature
Inline CSS
Internal CSS
External CSS
Location of CSS
Within the HTML element
Inside <style> tag in <head>
In a separate .css file
Ideal Use Case
Small changes or quick fixes
Single-page projects
Multi-page or large-scale websites
Syntax Style
style="color:red;"
Standard CSS rules inside <style>
Standard CSS in an external file
Scope of Effect
A single HTML element
Entire HTML page
All pages linked to the CSS file
Reusability
Not reusable
Not reusable across pages
Highly reusable
Page Loading Impact
Slower for multiple styles
Medium (can grow bulky)
Faster (browser caching)
Ease of Implementation
Easiest to use
Moderate complexity
Best for organized, scalable styling
Frequently Asked Questions
Can I use more than one type of CSS in a single project?
Yes, you can mix inline, internal, and external CSS in one project. For example, you might use external CSS for the overall look, but then use inline CSS for something specific on just one page.
Which type of CSS is the best to use?
It depends on your needs. External CSS is great for big projects because it keeps your styles consistent across multiple pages and makes changes easier. Internal CSS is useful for styling a single page, and inline CSS is handy for quick, one-off changes.
Do styles from different types of CSS ever conflict?
Yes, they can. If you set styles in both your external CSS file and inline, the inline style will usually win because it's closer to the element being styled. There's a whole system called "CSS specificity" that decides which style applies if there's a conflict.
Conclusion
CSS is a powerful tool that makes our web pages look good. We've seen how inline, internal, and external CSS can be used to style web pages, each with its own advantages. Inline CSS is quick for small changes, internal CSS keeps a single page's styles organized, and external CSS is best for styling multiple pages consistently. By understanding and using these different types of CSS effectively, you can create web pages that not only function well but also have the visual appeal to attract and retain viewers.
27+ registered 
