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.


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


Leave a Replay

Leave a Reply

Your email address will not be published. Required fields are marked *

About Amir

I love both the technical and the multimedia side of things. I have and always do study information technology and digital media design. My passion revolves around understanding how to design a functioning product and service that looks and feels good and to bridge the gap between the two worlds. This has enabled me to see the world in my own unique periscope. So stay awhile and listen.

Recent Posts

When there is love, there is always time and nothing is too much trouble.

Sign up to our newsletter and Let's rock n roll

See how we are Fighting Climate Change and How you can do it by paying for your business investments and expenses.

Contact us to get started