CSS Guide Part 2 – Inline, Internal or External CSS. Know What Is The Difference

Posted by TotalDC

Now that you know what CSS is, lets find what is the difference between inline, internal or external CSS. Like HTML, CSS is written in simple, plain text through text editor on your computer and there are three ways to add CSS code to your HTML pages. CSS code can be inline, internal or external. First, inline styles are snippets of CSS written directly into HTML code and applicable only to a single HTML tag’s content. For example:

<h1  style=”font-size:40px;color:blue;”>This is headline</h1>

would make one specific headline on a single HTML page to appear blue and have font size of 40 pixels.

Secondly, internal style sheets are CSS instructions written directly into the header of a specific HTML page. An internal CSS looks something like this:

<head>
<style>
Body  {  background-color:lightgrey;  }
P  {  font-size:20px;  color:black;  }
</style>
</head>

You would get lightgrey background color and paragraphs with 20 point, black font will now be applied to this single .html page.

And finally, external CSS are saved as .css files and can be used to determine the appearance of an entire website through one file. To use an external style sheet your HTML document need to include header section that links to the external style sheet which looks something like that:

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

This will link the HTML file to your external CSS in this case – style.css and all of the CSS instructions in that file will then apply to your linked HTML pages.

Worth noticing that CSS stands for cascading stile sheet which means that there are some hierarchy. Let’s say you have all three inline, internal and external CSS in your website in this case inline code would be rendered first , then internal CSS would follow (from the header) and on top of that external CSS would be rendered.

So let’s say you have written style to <h1> tag in every way possible. Then only the CSS code targeting your <h1> from external CSS would be applied because external CSS is most important and always overrides internal and inline CSS code. CSS hierarchy looks like that – first goes inline code, then internal on top of it and then external on top of it.