The 3 Types of CSS Styles Explained

If you’re new to CSS knowing how to add it to your website and where it’s supposed to go can be tricky. Or if you’ve used one method of adding CSS but would like to learn more about the other two this is a great place to start!

The three different types of CSS are:

Inline

Internal

External

In this post we’re going to explore what is meant by each of the different types and how they are utilised within web development.

Firstly if you’re new to CSS the main use of it within websites is to provide styles for the web page. Without it all of the elements would be relatively basic and would display wherever they sit within the page. Other aspects of CSS allow for animations, hover effects, active link styling and much more!


So let’s get started and take a look at the 3 types:

Inline:

Inline styling involves adding code directly to the web page that you’re working on within the tags of the elements that you’re using. For example let’s say we want to style a paragraph element.

Within html a basic <p> or paragraph element would look something like this:

<p> Hello </p>

To style this with inline CSS we would add styles directly to the tag for example:

<p style=”color:orange;”>Hello</p>

This would set the color of the text to orange, then if we wanted to add multiple styles to the inline structure it would be like this:

<p style=”color:orange; font-size: 2.5em;”> Hello </p>

This would set the font color and the font size of the text.

Positives/Negatives:

Inline code is quick and easy and if you need to change a very small amount of very specific text it can be helpful to quickly add it inline.

Inline code isn’t really suitable for substantial amounts of CSS code, it will slow the page load speed down, become cumbersome to write and view and doesn’t allow for many of the features that external or internal CSS allows such as that ability to add specific styles to the hover element. 

Internal:

This CSS type is still within the page however the code sits within the head section of each page and allows for a little more structure to the CSS code than inline.

So to add internal CSS you would add it within Style tags to the head section of the web page these would look like:

<style type=”text/css”> </style>

Within these tags you can then add CSS rules utilising CSS selectors and ID’s for example:

<style type=”text/css”>
p {
Colour: orange;
}

.class-name {
Width: 100%;
}

With the above we’re setting anything within the page to display the colour of text within <p> tags to orange. We are then setting the section that holds the CSS class of .class-name to be 100% width.

Positives/Negatives:

With Inline CSS you can use the class and ID selectors which enables the application of styles to multiple sections with one bit of code.

You can also add features such as targeting :hover styles where for example on the hover of some text you can change the colour.

Adding the CSS inline within the page especially if it’s a substantial amount of code can reduce the page load speed times as it adds directly to the code of the HTML page. 

External:

External CSS uses an external .css file or multiple external css files. This allows you to control the CSS for your entire website in one place, or add specific files for specific features such as a CSS file for the header and then one for the main features of the website pages.

To add an external stylesheet to a HTML page you will need to add to the head within the page.

<link rel="stylesheet" type="text/css" href="style.css" />

This then references the file style.css within your site files. You can link to multiple stylesheets for the above mentioned styling of specific elements.

Within that stylesheet you would then simply add the relevant styles using regular CSS as we did with the internal CSS for example:

p {
Colour: orange;
}

.class-name {
Width: 100%;
}

Again this sets the colour of the text within the <p> tag to orange and the item with the class name ‘.class-name’ to 100% width.

Positives/Negatives:

In most cases external CSS will be the best way to implement your CSS in your site. It creates a specific place to edit the CSS for your entire website. It also helps to keep load speeds at reasonable levels in comparison to large amounts of inline CSS.

The main drawback to external CSS is that it requires the site to have additional files and it has to render them on loading. So for very small amounts of CSS code it’s a slightly longer way of displaying it within the page. 

Summary:
Overall in most cases you will be best to use CSS with external files as this provides the most structured approach for many multi-page websites that need a large number of styles applied throughout. However for small CSS additions / code tweaks Internal and Inline styles can be an effective solution.

Additional Reading:

Setting Fonts Directly With CSS

Adding CSS to WordPress

We hope this helps you to understand the different CSS types and how to add them to your website, we’d appreciate a share or any comments!

Leave a Comment

Your email address will not be published. Required fields are marked *