Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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 90,705 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 :)

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 90,705 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.

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