CSS Cheat Sheet

CSS is huge and flexible and it can take a lifetime to master it all. Let's outline a basic version here that covers fundamental aspects of CSS, including layout, text formatting, and responsiveness.

This cheat sheet provides a glimpse into CSS’s capabilities. CSS is incredibly powerful and flexible, allowing for detailed styling and layout of web pages. For in-depth learning, I recommend exploring the MDN Web Docs for CSS, which is an invaluable resource for web developers at all levels.

Basic Selectors

• *{ } – Universal selector, targets all elements.
• element{ } – Type selector, targets all instances of the element.
• .class{ } – Class selector, targets all elements with the specified class.
• #id{ } – ID selector, targets the element with the specified ID.

Box Model

• margin: top right bottom left;– Space outside the border.
• border: width style color;– Boundary around the padding and content.
• padding: top right bottom left;– Space inside the border.
• width: px|%|em;– Width of the content area.
• height: px|%|em;– Height of the content area.

Layout & Positioning

• display: block|inline|inline-block|flex|grid;– Determines how an element is displayed.
• position: static|relative|absolute|fixed|sticky;– Determines how an element is positioned.
• top/right/bottom/left: px|%|em;– Positioning offsets.
• flex-direction: row|column;– Direction of flex items.
• justify-content: flex-start|flex-end|center|space-between|space-around;– Horizontal alignment of flex items.
• align-items: stretch|flex-start|flex-end|center|baseline;– Vertical alignment of flex items.
• grid-template-columns/rows: px|%|fr|repeat();– Defines columns/rows in a grid layout.

Text & Fonts

• font-family: "Font Name", fallback, sans-serif;– Typeface for text.
• font-size: px|em|rem;– Size of the font.
• font-weight: normal|bold|100-900;– Thickness of characters.
• text-align: left|right|center|justify;– Horizontal alignment of text.
• color: hex|rgb(a)|hsl(a);– Color of the text.
• line-height: normal|number|px|%|em;– Space between lines of text.

Colors & Background

• background-color: hex|rgb(a)|hsl(a);– Background color of an element.
• background-image: url("");– Image to be used as a background.
• background-size: cover|contain|px|%|auto;– Size of the background image.
• background-position: top right bottom left center;– Starting position of a background image.

Pseudo-Classes & Pseudo-Elements

• :hover– Styles when an element is hovered.
• :active– Styles when an element is clicked.
• :focus– Styles when an element is focused.
• ::before– Inserts content before an element’s content.
• ::after– Inserts content after an element’s content.

Responsiveness

• @media (max-width: 768px) { }– Media query for custom styles on devices with width ≤ 768px.