You can basically have three alternatives when it comes to place your CSS code:
We will normally use external CSS files to enter our CSS code. It is the simplest method to maintain the code and edit only one file for changes to have effect site-wide. The only condition is that all HTML files have to include the css <link/> tag inside the head section.
HTML<head>
.......
<link rel="stylesheet" type="text/css" href="external_file.css" />
.......
</head>A CSS file can be writhed in any text editor like notepad, notepad++ sublime text etc. When you're done you will just have to save the file using the .css extension
Here we have a simple CSS code
CSSbody { background-image: url("img/image.png"); }
hr { color: #efefef;}
p { margin-left: 15px;}Just a simple note here: do not place any space between the number and the measurement unit. Writing for example "margin-left: 15 px;" will just not work.
The inline CSS code is the one that goes inside the head section of the HTML document. This is very useful when you want to give a specific page, his own custom style. The is no difference between the CSS code that you place inside an external file and the internal one. The only thing to remember is that you need to wrap it up inside the style tag
HTML<head>
<style type="text/css">
body { background-image: url("img/image.png"); }
hr { color: #efefef; }
p { margin-left:15px; }
</style>
</head>As we previously mention, the css code must be placed inside the style tag that will have the type="text/css". All this will be inserted in the head section of our html file.
Inline CSS is just a fancy word for placing CSS inside the HTML tag. Remember that using the inline CSS, we will be losing all advantages of centralizing all code in one place. On the other hand, there are also some advantages. But let's see how we use the inline CSS:
HTML<p style="text-align:right; color:green; font-family: 'times new roman'; margin-left:15px;">This is just a simple, inline formatted paragraph.</p>Note:
As you can observe I used simple quotes to encapsulate the font name that is a 3 words name separated by space. This way I avoid breaking the double quotes CSS code encapsulation.
Like we said we can use all three forms of adding CSS to our HTML file. But what about when we use all three of them? Which one will take effect at the end
The CSS priority when using all three forms of formatting will be as follows:
Conclusion:
The inline formatting will overwrite all the other styles when used. Browser standards will be applied only when no other style is defined.
Exception:
Normally the <link> tag that loads the external CSS file is placed before the <style> tag. That is why we say that the internal CSS overwrites the external css. But when you include an external css after the style tag, they will be interpreted in the order that they are found by the browser and the last inserted will overwrite the first one. Take a look at the next example:
CSS<head>
<style type="text/css">
body { background-image: url("img/image.png"); }
hr { color: #efefef;}
p { margin-left: 15px;}
</style>
<!-- This css will overwrite any style insert before this line-->
<link rel="stylesheet" type="text/css" href="external_file.css" />
</head>