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 Framework Basics Prototyping with Foundation Building a JavaScript Dropdown Menu and Orbit Slider

Juan Guillermo Mariño
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juan Guillermo Mariño
Front End Web Development Techdegree Graduate 19,423 Points
Posted by Juan Guillermo Mariño
.a{fill-rule:evenodd;}techdegree seal-36
Juan Guillermo Mariño
Front End Web Development Techdegree Graduate 19,423 Points

Don't understand the order of the <link> tags in the <head>

So I saw the my-styles.css stylesheet wasn't showing effect on the page, but I changed the order in the <head> and it started to work, I would like to know why and what priority do the <link> tags have in what order?

THIS ONE WORKED

    <link href="css/normalize.css" rel="stylesheet" media="screen">
    <link href="css/foundation.css" rel="stylesheet" media="screen">
    <link href="css/my-styles.css" rel="stylesheet" media="screen">

THIS ONE DIDN'T

    <link href="css/normalize.css" rel="stylesheet" media="screen">
    <link href="css/my-styles.css" rel="stylesheet" media="screen">
    <link href="css/foundation.css" rel="stylesheet" media="screen">

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Juan! This has nothing to do with Team Treehouse's parser. Remember that when using workspaces for the HTML and CSS courses, it is essentially a fancy text editor with your work backed up on the Treehouse servers. The code you are writing is actually being carried out client side on your computer and in your browser.

The reason the first one works has to do with the cascading nature of CSS. Let's say, for example that all of those files happen to have some color style applied to your <h1> elements. I know this is not the case, but for the sake of this example let's say they do. The last style sheet loaded with the last <h1> color will be applied.

You can find more information on the cascading nature of CSS in this MDN documentation.

Hope this helps! :sparkles: