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.
