DEV Community

loading...
Cover image for CSS Cheat Sheets!
Ladybug Podcast

CSS Cheat Sheets!

Ali Spittel
Passionate about education, Python, JavaScript, and code art.
Updated on ・2 min read

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!

Discussion (48)

Collapse
codingsam profile image
Coding Sam • Edited

I used to hate CSS but the more I learn about it... The more I love it. I think people don't usually like it because they don't understand it. Most developers don't really know the power of CSS 😄
This cheat sheet is really well made and simple. Thank you so much! 👍

Collapse
csharplove profile image
csharplove

Lol I hate it but I will take a break and be patient with css once you learn it you start loving it ,is frustrating

Collapse
jeremy profile image
Jeremy Schuurmans

This is so good! Thank you for putting these together! Bookmarking this for easy reference.

Collapse
djpandab profile image
Stephen Smith

Great listen! Learned a few things.

Collapse
karlkras profile image
Karl Krasnowsky

Nice to see you trying different professions! (Stephen A Smith) 😄

Collapse
jasterix profile image
Jasterix

This is amazing. Thank you!

Collapse
zed_m profile image
Amine Hammou

great!!

Collapse
sansseryph profile image
Kyla

These are amazing!!! Thank you for sharing them

Collapse
raisaugat profile image
Saugat Rai

Awesome illustrations of properties.

Collapse
nickster13x profile image
Nick Paul

Thanks for the cheat sheet. I have a love/hate relationship with css. Today I love it!

Collapse
dominicduffin1 profile image
Dominic Duffin

OMG these are amazing!

Collapse
angelarae63 profile image
Angela Whisnant

Thank You!!! This is awesome!

Collapse
mohamedelidrissi_98 profile image
Mohamed ELIDRISSI

Positioning used to confuse the hell out of me back when I was learning CSS for the first time

Collapse
danjconn profile image
Dan Conn

Amazing!

Collapse
tmamedbekov profile image
Tony Mamedbekov

Useful stuff, thanks!

Collapse
garrett profile image
Garrett

Extremely useful! Thank you

Collapse
lwatson2 profile image
Logan Watson

This is great!

Collapse
olisun profile image
Olisun

Thank you!

Collapse
mahfuz55 profile image
mahfuz Hasan

really great !

Collapse
pcmichaels profile image
Paul Michaels

I apologise in advance for this, but it seemed appropriate:

flexboxfroggy.com/

Collapse
matthewbcool profile image
Matt

Well done!

Collapse
rafaacioly profile image
Rafael Acioly

You're the best Ali! <3

Collapse
cronwel profile image
Noel Irias

Love the design! So clean!

Collapse
hseritt profile image
Harlin Seritt

Is there a link to the cheatsheet? I don't see it in the article or it's not obvious to me. Thanks :-)

Collapse
aspittel profile image
Ali Spittel Author

they're all embedded as images in the article!

Collapse
hseritt profile image
Harlin Seritt

ok 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.

Collapse
devlorenzo profile image
DevLorenzo
Collapse
mihir9376 profile image
mihir9376

awesome Information Very Informative.

Collapse
cbmgit profile image
cbmgit

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

Collapse
kaxi1993 profile image
Lasha Kakhidze

Great! thanks ❤️

Collapse
filipenmarques profile image
Filipe Marques

Nice, thank you! ♥

Collapse
moeelsadig profile image
Moe Elsadig

Thank you~ 😄

Collapse
bipubipu profile image
Geek Lady

Great summary! Very helpful!