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.
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:
<head>
<link rel="stylesheet" href="styles.css">
</head>
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:
<head>
<link rel="stylesheet" href="mystyles.css">
</head>
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.
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.
You can refer to our guided paths on the Coding Ninjas. You can check our course to learn more about DSA, DBMS, Competitive Programming, Python, Java, JavaScript, etc. Also, check out some of the Guided Paths on topics such as Data Structure and Algorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.
569+ registered 
