Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Vaishak S
Vaishak S
693 Points

My question is about CSS and it has 2 parts

a) What is the meaning of Cascading style sheets? b) When you write a code in the below order in, index.html

(link rel="stylesheet" href="css/main.css")

(link rel="stylesheet" href="responsive.css")

What really happens?

Would this mean that main.css will be over ridden by responsive.css ? Do let me know.

2 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Cascading refers to the nature of how the browser reads stylesheets. Browsers uses something called "specificity" to determine which styles are used.

For example if I was to use the same selector and keywords in a stylesheet, the latter style would be used.

.name {
  color: green;
}

.name {
  color: red;
}

Text would therefore be styled in the colour red.

Specifity takes a little while to get your head around. CSS tricks is great for explaining this stuff :) https://css-tricks.com/specifics-on-css-specificity/

Secondly yes this styles in repsonsive.css would override main.css, so you get the best results you'd need to use your reset styles first so responsive.css is at the top. This makes sure that all little different browser styles are reset before you start developing.

Hope this helps :)

Vaishak S
Vaishak S
693 Points

Hi Jonathan,

Thanks for your reply. I understood the part a) of my question.

I also understand that responsive.css will override main.css. But, I don't understand why you would include main.css file if it would be overridden by another css file.

I feel a bit silly to ask this again. But, it would be great if you could help.

Thank u Regards Vaishak

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi there. :)

There's nothing inherently wrong with styles overriding each other so long as you know that this is happening. It's common for this to happen now in modern times of media queries and CSS resets. Just know that Normalize CSS files are the basis for making sure websites look the same in all browsers before starting your design work. :)

And of course styles will only be overridden if your styles are actually repeating in a preceding file.

Vaishak S
Vaishak S
693 Points
Vaishak S
Vaishak S
693 Points

Ok. Now, I get it. So, if at best, u can make a single css file and add breakpoints in it.

Thanks Jonathan.

Regards Vaishak