Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 12, 2019 05:03 pm GMT

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!

.ltag__user__id__123155 .follow-action-button { background-color: #FFFFFF !important; color: #9878FF !important; border-color: #9878FF !important; }
emmawedekind image

Emma Wedekind

UX Engineer, bibliophile, & cat mom

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. Its also removed from the document flow. So elements in the DOM pretend like its 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!

Stay tuned for our bonus more advanced CSS episode that comes out this Thursday!


Original Link: https://dev.to/ladybug/css-cheat-sheets-3ee0

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To