Inline, Internal or External CSS. Know The Difference
Posted by TotalDC
Now that you know what CSS is, let’s find out what is the difference between inline, internal or external CSS. Like HTML, CSS is written in simple, plain text through a 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 appear blue and have a 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 will get a light grey background color and paragraphs with 20 points, black font will now be applied to this single .html page.
Finally, external CSS is 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 needs to include a header section that links to the external style sheet which looks something like this:
<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 style sheet which means that there is 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 this – first goes inline code, then internal on top of it, and then external on top of it.
