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
Benjamin Ku
6,720 PointsCSS Overrides with Skeleton.css
Hi all,
Not sure if this question's been answered, but I'm having a hard time figuring it out. I'm currently messing around with the Skeleton framework, and the css file in it is divided into base.css, layout.css and grid.css. I've been finding that a lot of the styles I want to set in the layout.css are being overwritten by base styles set in the other two css files.
For instance if I wanted to add a margin-top:10px to an <li> element in the layout.css, I'm finding that the reset css styles are just setting the margins back down to 0 again. I'm wondering if there's a way to have the styles in the layout.css supercede that of the base/grid css styles.
I've also tried adding a class to the <li> element and added the margin style to the class, but it's still being overwritten. Not sure what to do at this point, so any help would be appreciated.
Thanks!
4 Answers
Jacob Cho
7,937 PointsHmm, I just tried that and was able to override the left float. I would open up Chrome dev tools and see what else is overriding it. A media query is all I can think of.
James Barnett
39,199 PointsSource order is important in CSS. So you should link your reset file first, then your framework then your own styles.
Jacob Cho
7,937 PointsI've also been using the Skeleton framework, albeit modified. If you use Skeleton's html template as well, source order should already be set out for you. You should be setting your own ID's and styling using those. Do not style using the classes that Skeleton already provides.
Benjamin Ku
6,720 PointsYeah as you stated, the framework already ordered the reset file before the layout css. The problem I'm having is that the float:left property of the grid css is pretty much overriding any float:right I want to assign to an element that's using the properties from the grid, even tho those elements should be in the layout.css and thus come after the grid.css float:left designation.
Not sure if anyone else has run into this problem.