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 jennifer ray
jennifer ray
7,875 Points

css structure

Is there a certain way you should structure your css page? should you start with head, body ect ect like your html code? or because it cascades in what order should the code be written?

Abe Layee
Abe Layee
8,378 Points

Your normally start by declaring the doctype which tells the browser which html version you're using. The browser reads the code from the top to the bottom. I always start my code like this. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

5 Answers

Marc Busby
Marc Busby
35,550 Points
Marc Busby
Marc Busby
35,550 Points

Hi Jennifer,

You should structure your CSS page in a way that suits your html code. Because it cascades the structure will likely be different for each site you make as it will be dependent on what you want to do to your html elements.

Personally I tend to work down my html page and start with the header, then content and finally the footer. I usually get it all working how I want and then go over it again to see where I can remove code or re-position it to make it flow better / reduce the amount of code.

Hope this helps.

Regards,

Marc Busby
Marc Busby
35,550 Points
Marc Busby
Marc Busby
35,550 Points

The cascade basically means that the CSS file is read from top to bottom, and if the same element is declared twice with the same values, then the one furthest down the style sheet is used.

For example: 

h1 {
  font-size: 1.25em;
}

h1 {
  font-size: 2em; /* This style declaration will be the one that is applied */
}

This also applies if you load two style sheets into your html file and they have the same elements declared with the same arguments. The second style sheet that is loaded will overwrite styles from the first one.

I hope this helps clear it up a bit. Remember to up vote answers that help :)

Regards,

Will Long
Will Long
5,449 Points
Will Long
Will Long
5,449 Points

it cascades into what order, so I believe that there is a specific way

jennifer ray
jennifer ray
7,875 Points
jennifer ray
jennifer ray
7,875 Points

Thank you marc that is the way I thought i would work though mine. So when it cascades what exactly does that mean what code for example would be overwritten by another?

jennifer ray
jennifer ray
7,875 Points
jennifer ray
jennifer ray
7,875 Points

Perfect thank you very much I understand it now. Thanks marc :)