Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Inline CSS
2.1.
Example
3.
Internal or Embedded CSS
3.1.
Example
4.
External CSS
4.1.
Example
5.
Frequently Asked Questions
5.1.
Can I use more than one type of CSS in a single project?
5.2.
Which type of CSS is the best to use?
5.3.
Do styles from different types of CSS ever conflict?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

Types of CSS

Author Sinki Kumari
0 upvote
gp-icon
Basics of Javascript
Free guided path
10 chapters
68+ problems
gp-badge
Earn badges and level up

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. 

Types of CSS

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.

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.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

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 DSADBMSCompetitive ProgrammingPythonJavaJavaScript, etc. Also, check out some of the Guided Paths on topics such as Data Structure and AlgorithmsCompetitive ProgrammingOperating SystemsComputer Networks, DBMSSystem Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.

Previous article
Guide to top CSS Frameworks
Next article
CSS Font Family
Guided path
Free
gridgp-icon
Basics of Javascript
10 chapters
68+ Problems
gp-badge
Earn badges and level up
Live masterclass