DEV Community

Cover image for CSS Cheat Sheets!
Ali Spittel for Ladybug Podcast

Posted on • Updated on

CSS Cheat Sheets!

We all know that Peter Griffin Family Guy gif of him unable to work some blinds. This gif is always associated with the frustrations of CSS. Something changes, then something breaks. Why do people have these issues? How can you improve your CSS skills? What are the key concepts that you need to understand to write clean, maintainable styles?

This week on the Ladybug Podcast, we talked all about the nuances of CSS -- what it is, how it works, and how to get better at it.

And, we made you all some cheat sheets to remember it all!

Shoutout to Emma for making these!

[deleted user] image

[Deleted User]

The Box Model

The content is in the center.<br>
This is surrounded by padding.<br>
Then comes the border.<br>
And finally margin!

Combinators

Descendant selector: You can use a space to denote a descendant selector. This matches all elements which are descendants of a specified element.<br>
Child selector: Use a greater than symbol (>) to select all elements that are immediate children of a specified element.<br>
Adjacent sibling selector: Use a plus sign (+) to select all elements that are adjacent siblings of a specified element. They must have the same parent and immediately follow this element.<br>
General sibling selector: Use a tilde (~) to select all elements that are siblings of an element.

Positioning

Static: the default positioning of HTML elements.<br>
Fixed: Element is positioned relative to the viewport and stays in the same place even if the page is scrolled. It’s also removed from the document flow. So elements in the DOM pretend like it’s not even there!<br>
Relative: Element is positioned relative to its normal position.<br>
Absolute: Element is positioned relative to the nearest relatively positioned ancestor. If no ancestor with position of relative is found, the element positions against the document body.

Display

Block: Starts on a new line and spans the entire width.<br>
Examples: h1 - h6 and p elements<br>
Inline: Displays inline with other elements. Any height and width properties, as well as margin-top and margin-bottom have no effect.<br>
Examples: a and span elements<br>
Inline-Block: The element is an inline element, but can be formatted with width, height and top and bottom margin.<br>
Example: a tag with width/height properties

You can listen to the full episode wherever you listen to podcasts!

Also, check out our second CSS episode, where we dove even deeper into discussing layouts, animations, and best practices!

We have more cheat sheets for that episode too!

Latest comments (45)

Collapse
 
devlorenzo profile image
DevLorenzo
Collapse
 
mahfuz55 profile image
mahfuz Hasan

really great !

Collapse
 
mihir9376 profile image
mihir9376

awesome Information Very Informative.

Collapse
 
cbmgit profile image
codeblogmoney

Amazing.. Sometimes I use this to entangled the CSS jsonformatter.org/css-beautifier

Collapse
 
bipubipu profile image
Geek Lady

Great summary! Very helpful!

Collapse
 
mattymaloney profile image
mattymaloney

Love the illustrated demos.

Collapse
 
shivabhusal profile image
Shiva Bhusal

Nice post!
I also find it easy to see all CSS properties in one place like here ohmycheatsheet.com/css

Collapse
 
shahrozahmd profile image
Shahroz Ahmed

very informative :)

Collapse
 
miteshkamat27 profile image
Mitesh Kamat

I wonder how cheatsheets are fun way to learn than official API docs :D

Collapse
 
dynamitebud profile image
Rudra

Hi, can you help me with isolated scope in CSS. I am trying to crawl a website and it has random class names that change with every session could you suggest something..

Collapse
 
sgsuneel profile image
Suneel Mohan SG

What's the best material to learn CSS?

Collapse
 
jennyphan profile image
Jenny Phan

Can you please direcct me to the CSS Cheat Sheets for episode 2?

Collapse
 
kaxi1993 profile image
Lasha Kakhidze

Great! thanks ❤️

Collapse
 
jmurray90 profile image
Jake Murray

This is awesome! Thanks so much, and I have loved your podcast, you ladies are so helpful and encouraging to listen to.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.