HTML and CSS work together. These two technologies complement each other.
There are three different ways to add CSS to an HTML file:
- External Addition
- Internal Addition
- Inline Insertion
In this article, you can find information about all of these addition styles plus the multiple CSS usage. Let’s start with adding external styles first.
Adding External Styles
All CSS codes are in a file with the extension .css in external styling.
This way, you can change the look of the entire website with just one file. Adding an External Style is the easiest and most convenient method.
Thus, all HTML files become references to the style file.
By placing the <link> tag between the <head> </head> tags of the HTML page, the .css file is linked.
All CSS codes you add with this method are valid for every HTML page that contains a link to the .css file.
Adding Internal Styles
If you want to add your CSS codes using the internal method, these codes will only be valid for one page.
With this method, CSS codes are positioned between <head> </head> tags.
It is inserted by placing the <style> tag between the <head> </head> tags of the CSS code.
Adding Inline Style
If you want to use the inline styling method, this method only applies to an HTML element.
This method is not the best way unless it is very necessary.
If you want to add an inline style, you can do so by placing a <style> tag in the HTML element. This tag contains CSS values and properties.
If you use CSS inline, as a result, you will eliminate many features of CSS.
You don’t need to use the inline CSS method as long as you don’t have too much trouble.
Multiple CSS Usage
You can use all the CSS insertion styles described above on an HTML page at the same time.
In most applications, you can decide the choice of styles according to the instant situation.
If you are wondering which CSS code is written both internally and externally for the same element will be valid, I will explain this with the examples below.
The most recently added CSS code is valid in the HTML file. So if we look at this situation, it is the most dominant inline.
Even with internal and external code, inline CSS code becomes dominant because it is the last code.
If you want to change the location of internal and external code, then the opposite happens.
If we consider that the codes we wrote above are the opposite, if the external CSS link will come before the internal CSS link, the linked CSS code will be valid, and ”<h1>” will be displayed in blue.
You can find the priority of applying CSS code to the HTML element below.
You can apply your code to the HTML element by following the order below:
- Inline (Inline CSS)
- External and internal (internal) CSS Code (based on priority in HTML <head> tab)
- Browser defaults (Browsers have default CSS values for HTML elements)
According to the order I made above, the most dominant is the inline CSS implementation. In short, if all the styles I listed above are used in an HTML document, what is written in inline CSS is dominant and valid.
Conclusion of Adding CSS
In this article, we explained how you can add CSS Link to an HTML file. We have mentioned all three addition styles and the multiple usage of CSS. We hope we have been able to answer the questions in your mind and help you. If you want to learn more about HTML, we have articles regarding to this topic. You may also like how to indent in HTML.