Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

WDS27 - Multiple Style Sheets

In the last article, we learned about ways in which we can attach CSS to HTML which are:
  • External Style Sheets
  • Internal Style Sheets
  • Inline Styles
We have also seen that External style sheets are most convenient to use. Let's see one example of external CSS...
(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:
  1. Inline Style(written inside HTML element)
  2. External and Internal CSS(according to above rules)
  3. Browser default
Try one example with all the three types of styling and especially by changing the order of external and internal CSS.

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.

This post first appeared on The Coding Express, please read the originial post: here

Share the post

WDS27 - Multiple Style Sheets


Subscribe to The Coding Express

Get updates delivered right to your inbox!

Thank you for your subscription