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 orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Useful Css notes to last some time

Hello!

I am trying to figure out how to create an easy to refer to cheat sheet with little pointers on what I have learned from this class. I am having a little trouble organizing my notes in a way that jumps at me let say, 2 years later when I need to refer to it.

For example:

Inline

.Cant use margin-top or margin-bottom or width on inline elements .causes spaces between links that can be arranged with margin-right:-5px;

Would you happen to have some tips on how to organize a cheat sheet so that I can still understand it in 2 years time, and that it is reliable in year's time when see something like a huge margin between my header and the body.

I am asking because I am not god at organizing or laying out my notes in a way for anyone at anytime to understand. And, I am afraid I will forget these useful pointers for I don't stle sheets all the time

Any small tip helps.

Thanks!!!

5 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

I'm not aware of an actual cheat sheet besides this basic one by about.com, but I'm not sure it addresses common issues. However, below are a few resources for you.

CSS Layout

Moving Forward with Flexbox

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Here's some useful cheat sheets.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Dustin,

That is a nice comprehensive sheet, would you happen to know something similar for layout bugs when styling with CSS.

Cheers!

Jason Welsh
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jason Welsh
Treehouse Project Reviewer
Jason Welsh
.a{fill-rule:evenodd;}techdegree seal-36
Jason Welsh
Treehouse Project Reviewer

I think that if you remember which elements are block level, and which are inline level, and what that means, it really helps to organize how you can style them. Of course, you can always change the way they are displayed, so for example, if you wanted to keep something displayed as inline, but wanted to give it the same properties like margin of a block, you could display: inline-block. That will help you with the example you gave in your OP.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Jason, It makes a lot of sense to group them either by display inline or block, and then take it from there if I wanted to do extra stuff on my elements. Thank for this tip!

Hello Dustin, these sheets will definetely be a nice fall back for me.