In the last article, we learned about ways in which we can attach CSS to HTML which are:
(Remember: In the code examples I am showing here using JSFiddle, it is not required to connect CSS file to HTML by writing link tag in the head of HTML as it automatically syncs it in the background, but you will have to attach CSS to HTML using syntax given in the last post.)
Now you can comfortably add CSS to your HTML files.
Let's now move to question that I asked at the end of the last article. The question is:
What will happen if I apply multiple CSS to the same element using various methods?
Let's see an example...
Here you will notice that heading has two associated styles:
1. External which sets it's color to blue
2. Internal which sets it's color to red
As JSFiddle imports external style sheet(which is written in CSS tab) first, it is overwritten by Internal CSS written in style tags inside the head tag.
If you import External CSS after completing style tag in the head tag of HTML, external CSS will overwrite the internal CSS.
Conclusion: Whichever is written later in the head tag of HTML, will be applied if conflict happens.
What if there is Inline styling...
Following is the order of CSS rules where number one has the highest priority:
That's all for today. From the next part, we are going to see various CSS properties in Fast Forward Mode as many of them in HTML.
Till the #keepCoding.
- External Style Sheets
- Internal Style Sheets
- Inline Styles
(Remember: In the code examples I am showing here using JSFiddle, it is not required to connect CSS file to HTML by writing link tag in the head of HTML as it automatically syncs it in the background, but you will have to attach CSS to HTML using syntax given in the last post.)
Now you can comfortably add CSS to your HTML files.
Let's now move to question that I asked at the end of the last article. The question is:
What will happen if I apply multiple CSS to the same element using various methods?
Let's see an example...
Here you will notice that heading has two associated styles:
1. External which sets it's color to blue
2. Internal which sets it's color to red
As JSFiddle imports external style sheet(which is written in CSS tab) first, it is overwritten by Internal CSS written in style tags inside the head tag.
If you import External CSS after completing style tag in the head tag of HTML, external CSS will overwrite the internal CSS.
Conclusion: Whichever is written later in the head tag of HTML, will be applied if conflict happens.
What if there is Inline styling...
Following is the order of CSS rules where number one has the highest priority:
- Inline Style(written inside HTML element)
- External and Internal CSS(according to above rules)
- Browser default
That's all for today. From the next part, we are going to see various CSS properties in Fast Forward Mode as many of them in HTML.
Till the #keepCoding.
