3 Types of CSS – With Examples for Inline, Internal, and External CSS

Cascading Style Sheets. Word CSS on wooden desk and laptop

3 Types of CSS – With Examples for Inline, Internal, and External CSS

Key Points

  • CSS is the language used to specify how elements look on a web page, allowing for complex or simple styling.
  • There are three main types of CSS: inline, internal, and external, with external CSS being the most efficient and widely used.
  • Learning CSS can be done through college classes, online courses, free tutorials, or YouTube videos.

What are the different types of CSS? And why should you care? Well, if you’re not a web developer, you likely have no business worrying about CSS. But if you are, then CSS is present in almost everything you do. So, having a mastery of it will get you further in your web development career.

CSS, the gold standard for styling web pages, has been with us for decades now. In that time, it has branched off into three distinct categories. Due to performance and readability issues, some types of CSS should be avoided at all costs.

But how can you tell them apart and decide which one to use? Let’s dive into CSS and explore the different varieties in a little more detail. But first, let’s talk about what CSS even is.

What Is CSS?

To understand CSS, you have to understand HTML. Short for “hypertext markup language, it’s used by 95% of all websites

That’s not surprising at all, considering HTML is necessary to create your page content, structure, and more. However, it sometimes feels like it’s “missing something” — because it is. You can create basic structures with HTML, but you can’t change that much about how they look. 

This is basically what websites looked like before CSS:

website before css
This is what HTML looks like without CSS. While quite boring, it was the reality before CSS.


Until CSS was established in 1996, the internet looked much different than it does today. If you wanted to make a more interesting layout, you had to resort to complicated techniques like using HTML frames or tables.

But we all know, developers and programmers are known for their creativity. So, they created CSS to begin the renaissance of style that we know as the modern internet.

CSS is the language we use to specify how our elements look on a web page. For example, CSS will determine how they are styled or laid out. The uses for CSS vary between being extraordinarily complex to impressively simple. 

You can create the tiniest details on your website using CSS. If you want one word in a sentence to be a separate color from the rest of them, you can use CSS to establish that. Or, let’s say you want a header to be red.

That would look like this:

h1 {
  color: red;
  font-size: 5em;

The h1 in these lines of code state is the selector, targeting the element we want to style. Then, we’ve told it to make that header red with a font size of 5. The color and font size portions of this code are known as attributes.

When we speak of the different types of CSS, we are actually referring to the different methods of integrating CSS with HTML. So, what does that look like exactly?

Different types of CSS in code editor
The 3 types of CSS are shown here in an HTML file.


Adding CSS to HTML

Adding CSS to HTML is relatively easy. There are three main ways to do it.

Inline CSS

This kind of CSS only affects a single element within an HTML tag. As mentioned, you can use CSS to change a single word in a sentence. Let’s see what that looks like with inline CSS:

<h2>This is Inline CSS</h2>
<p>It’s so easy to <span style="color: #ff00ff">change</span> the color of a word in a sentence with Inline CSS.

Think of a lyric booklet from a cd or vinyl of your favorite band. Many bands and artists use a similar technique to highlight unique messages within their lyrics. It’s like a treasure hunt for your audience. 

Minor details like this create visual intrigue and encourage guests to stay on your website for longer periods. This is especially true if you use this technique with intention, like when a band creates a sentence with highlighted words in their lyric booklets.

The thing is, inline CSS becomes nearly impossible to work with on large-scale projects. Having to dig through lines of HTML code to pick out where you used an inline style will make you pull your hair out. A better solution is internal CSS.

Internal CSS

This kind of CSS goes within a <style> element that you find within the <head> of the document. You’re probably going to use internal CSS more frequently than you do inline CSS.

The situations where you use inline CSS might not be so novel, but internal CSS tends to be easier to maintain than inline. It’s great to use in simpler HTML documents. But it still has its limitations.

You can use internal CSS to do things like assign colors to paragraphs on your page. Here is how that would look:

<!DOCTYPE html> 
        <style> p { color: #A020F0; } </style> 
        <h2>This is how you use internal CSS</h2> 
        <p>It’s so easy to change the color of every paragraph using CSS. The standard color on the page would usually be black, but that’s boring!</p> <p>With internal CSS, one simple rule set can change the color of each paragraph element.</p> <p>That’s way easier than inline CSS, where every single word would need to be accounted for. Now, all the paragraphs are purple!</p> 

External CSS

Both inline and internal CSS are significantly limited compared to external CSS. With internal CSS, you don’t have to suffer through difficult readability like you do with inline, but there is another problem.

If you make another HTML file, such as another page on your website, you’ll have to recreate all of the same internal CSS. If you change one file, it does not reflect on the other file. That is bad news if you want to be a productive web developer.

External CSS is the solution. With external CSS, you add all of your CSS code to an additional file, called a stylesheet. The stylesheet is a useful tool that keeps all of your properties in one, convenient place. This file will end in a .css format.

You can simply create a link to your CSS stylesheet in the <head> section of your document. That would look something like this:

<link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="mystyles.css">

External CSS is crucial to understand, and it is the primary form of CSS that you’ll use in your web development career. Out of all the different types of CSS, it is the most efficient, SEO-friendly, and just plain easy.

The whole look of your website can be changed using external CSS by manipulating one simple file.

<!DOCTYPE html>
<link rel="stylesheet" href="mystyle.css">

<h1>HTML knows what to do</h1>
<p>Because the CSS stylesheet gives it simple commands.</p>


Types of CSS: How to Choose

You may find yourself switching between different types of CSS within one website. But this isn’t ideal; you should stick to one type per project. However, it really depends on your overall idea and design requirements.

You should have a thorough understanding of how your website will look client-side. CSS deals mostly in client-side terms. That is, it affects how your website will look. And you want it to look pretty.

There are no excuses for less-than-stellar visual layouts these days. CSS is easier to use than ever before, and there is so much you can do to create something truly beautiful.

Inline and internal CSS are most commonly chosen when instructing students to learn CSS. You will rarely see them in production environments. Instead, most websites will link to an external CSS file.

Once you grasp the basics of CSS, you can move on to things like CSS frameworks. Tailwind CSS and Bootstrap are two extremely popular frameworks that take a lot of time and hassle out of writing CSS, especially if you are working on a massive project.

Learning CSS

CSS will be one of the first things that you learn in your journey to becoming a web developer or programmer. Some high schools even teach the basics of CSS in their STEM classes.

College Classes

College courses love teaching CSS at its most basic and most advanced levels.

Your intro to web development classes will likely have you practice CSS extensively, so make sure to get your flashcards ready now. Memorizing the types of CSS (Inline, Internal, and External) will put you at an advantage in beginner courses.

Taking college classes also gives you the advantage of having a built-in mentor in the form of your professor. You should always ask questions and ask for feedback on your work.

Plus, you can meet like-minded students who share similar aspirations. Peer-to-peer feedback is essential to becoming a skilled web developer or programmer.

Online Courses

There are online classes provided by accredited institutions, like universities, and individuals who simply have a passion for web design. Sometimes, course instructors are professors at universities.

Generally, it will be much quicker to learn CSS via these online “boot camps” than following a traditional university path. You don’t necessarily need a degree to create a stunning website using CSS, but learning from a reliable source is a good idea. Do research on the program before committing time and money to it. 

Free Tutorials

As a self-taught developer myself, I always recommend free tutorials, even though it’s true that they can come with their own set of disadvantages. You don’t always have access to the instructor to ask questions, and you might have a completely different development environment.

But if you can find a decent resource and stick to it, you can teach yourself CSS for free. At the end of the day, it is one of the easiest parts of web development to pick up. But in that same vein, it can be one of the most difficult to truly master.

That being said, our top picks for free online resources for learning CSS are broken down as follows:


These are the big three when it comes to learning web development for free. The only hiccup is that you’ll be completely on your own — it will be up to you to stay motivated and stick to the coursework, even when the going gets tough. On the flip side, you’re not spending a dime.


This is another favorite for learning CSS since there is an endless supply of videos on the subject. You can often find tutorials from FreeCodeCamp as well as the most well-known web development gurus like Programming With Mosh, Traversy Media, and SuperSimpleDev.

Summary Table

Type of CSSDescription
Inline CSSThis kind of CSS only affects a single element within an HTML tag. It’s used for minor details and is not ideal for large-scale projects due to its difficult readability.
Internal CSSThis kind of CSS goes within a <style> element that you find within the <head> of the document. It’s easier to maintain than inline CSS and is great for simpler HTML documents. However, it has its limitations, especially when working with multiple HTML files.
External CSSThis is the most efficient and SEO-friendly type of CSS. With external CSS, all CSS code is added to an additional file, called a stylesheet. This file ends in a .css format and is linked in the <head> section of the document. It’s the primary form of CSS used in web development.

Frequently Asked Questions

What are the 3 types of CSS?

The 3 types of CSS are inline, internal, and external. Each type of CSS is used for different things, according to your individual and client needs. You can switch between the 3 types of CSS depending on your preferences, but external CSS is most commonly used.

Should I use inline or external CSS?

You can use inline CSS to get incredibly specific. For example, if you need to change just one word in a sentence, you would use inline CSS to identify that single property. External CSS is guided by your CSS stylesheet.

You would use external CSS to establish broader visual elements, such as the desired color and font size for your entire HTML document. For most production websites, you should stick to external CSS due to its power and ease of use.

Which type of CSS is the best?

External CSS is perhaps the most important and most frequently used kind of CSS. You’ll use inline CSS the least. Since inline and internal CSS are both specific to each individual HTML file, it can be difficult, or at least much more time-consuming, to use it on websites with more than one page.

Is it easy to use CSS?

It can be! CSS is one of the easiest concepts for most beginners to grasp when they’re learning web development. It’s usually taught alongside HTML to some capacity since they’re used together.

You don’t tend to get one without the other. CSS can become more complicated if your visual elements are more complicated.

Should I learn CSS in college?

Yes! If you have the opportunity to learn any web development skills in college or at a university level, please do so.

You are not only receiving high-quality education in the traditional sense, but you’re receiving guidance from skilled experts who are passionate about what they do.

Feedback from your instructors can be all the difference as you grow into a professional web developer. Plus, you can learn from your peers, too!

Can I learn CSS by myself?

Yes, learning CSS by yourself is certainly doable. It is easy to get the hang of things, and many options are available online for you to learn from.

You can learn at your own pace, and seeing your work come to life via simple projects will give you much-needed motivation to keep studying. Just remember, mastery takes time.

To top