The main difference between inline CSS and external CSS is that inline CSS renders faster as it only requires the browser to download one file, while using external CSS will require you to download separate HTML and CSS files.
In this tutorial, you’ll learn the difference between the three types of CSS styles: inline, outer, and inner. We will also look at the advantages and disadvantages of using each method.
What is CSS exactly?
Cascading Style Sheets is a markup language that takes care of the appearance of web pages. Control the colors, fonts, and layout of your website elements.
This style sheet language also allows you to add effects or animations. You can use it to display some CSS animations like button click effects, loaders, and animated backgrounds.
Without CSS, your website will look like a simple . This is what it would look like if we disabled its CSS:
Difference between CSS Inline, Outer and Inner styles
There are three types of CSS styles: inner, outer, and inline. Let’s break them down.
Internal CSS
Internal or embedded CSS requires you to add the tag
Your HTML file will look like this:
Tutorials
This is a paragraph
Advantages of Internal CSS:
Disadvantages of Internal CSS:
- Adding the code to the HTML document can increase page size and load time.
External CSS
With external CSS, you will link your web pages to an external .css file, which can be created with any text editor on your device (for example, ).
This type of CSS is a more efficient method, especially for styling a large website. When editing a file .cssyou can change your entire site in one go.
Follow these steps to use external CSS:
- Create a new file .css with the text editor and add the style rules. For example: .xleftcol {
float: left;
width: 33%;
background:#809900;
}.xmiddlecol {
float: left;
width: 34%;
background:#eff2df;
} - In the section of your HTML document, add a reference to your file .css external just after the tag
:
don't forget to change style.css by the name of your file .css.
Advantages of External CSS:
- Since the CSS code is in a separate document, your HTML files will have a cleaner structure and smaller size.
- You can use the same file .css for multiple pages.
Disadvantages of External CSS:
- Your pages may not display correctly until the external CSS is loaded.
- Uploading or linking multiple CSS files can increase your site's load time.
css-inline
CSS inline is used to style a specific HTML element. For this type of CSS style, you will only have to add the attribute style to each HTML tag, without using selectors.
This type of CSS is not really recommended, as each HTML tag must be styled individually. Managing your website can be too difficult if you only use inline CSS.
However, CSS inlining in HTML can be useful in some situations. For example, in cases where you don't have access to CSS files or you need to style a single element.
Let's see an example. Here we add a CSS inline to the tag
Y
:
Tutorials
This is a paragraph.
Advantages of CSS Inline:
- You can easily and quickly insert CSS rules into an HTML page. Therefore, this method is useful for testing or previewing changes and making quick fixes to your website.
- There is no need to create and upload a separate document like in external CSS.
Disadvantages of CSS Inline:
- Adding CSS rules to each HTML element is time consuming and clutters the HTML structure.
- Styling multiple elements can affect page size and load time.
conclusion
In this tutorial, you've learned the difference between the three types of CSS styles: inner, outer, and inline. Let's see the summary:
- internal or embedded – add the tag
in the section of the HTML document. - External – link the HTML sheet to a file .css separate.
- line – apply CSS rules to specific elements.
So what CSS style are you going to use? Share it with us in the comments section below.
Betania is a copywriter with a passion for digital marketing and website creation. She writes tutorials and performs SEO analysis on 's Content team. In her free time, she enjoys dancing, singing or watching a good classic movie.