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:

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?

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> 
<html> 
    <head> 
        <style> p { color: #A020F0; } </style> 
    </head> 
    <body> 
        <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> 
    </body> 
</html>

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>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

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

</body>
</html>

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:

FreeCodeCamp
TheOdinProject
W3Schools

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.

Youtube

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

The image featured at the top of this post is ©GagoDesign/Shutterstock.com.