CSS 58 💻 Cheatsheet

58 – Cheatsheet

Basic Selectors

• Element Selector: Targets elements by tag name.
  p { color: blue; }
• Class Selector: Targets elements with a specific class.
  .highlight { background-color: yellow; }
• ID Selector: Targets an element with a specific ID (unique).
  #main-title { font-size: 36px; }
• Universal Selector: Applies to all elements.
  * { margin: 0; padding: 0; }
• Attribute Selector: Targets elements with specific attributes or attribute values.
  [type="text"] { border: 1px solid black; }

Combinators

• Descendant Combinator (Space): Selects elements that are descendants of another element.
  div p { color: red; }
• Child Combinator (>): Selects direct children of an element.
  ul > li { font-weight: bold; }
• Adjacent Sibling Combinator (+): Selects the element immediately following another element.
  h1 + p { margin-top: 20px; }
• General Sibling Combinator (~): Selects all siblings that follow another element.
  h2 ~ p { font-style: italic; }

Box Model

• Margin: The space outside the border.

margin: 10px;
margin-top: 20px;
margin-left: 30px;
margin-right: 40px;
margin-bottom: 50px;

• Padding: The space inside the border.

padding: 10px;
padding-top: 20px;
padding-left: 30px;
padding-right: 40px;
padding-bottom: 50px;

• Border: The line around an element.

border: 1px solid black;
border-width: 2px;
border-style: dashed;
border-color: red;

• Width/Height: Sets the width and height of an element.

width: 300px;
height: 200px;

Typography

• Font Family: Specifies the font family for text.
  font-family: Arial, sans-serif;
• Font Size: Sets the size of the font.
  font-size: 16px;
• Font Weight: Controls the boldness of the font.
  font-weight: bold;
• Text Align: Aligns text within an element.
  text-align: center;

Background

• Background Color: Sets the background color of an element.
  background-color: #f0f0f0;
• Background Image: Sets a background image for an element.
  background-image: url('image.jpg');
• Background Repeat: Controls how the background image is repeated.
  background-repeat: no-repeat;
• Background Position: Positions the background image within an element.
  background-position: center;

Display

• Display Block: Makes an element take up the full width available and start on a new line.
  display: block;
• Display Inline: Allows elements to sit next to each other horizontally.
  display: inline;
• Display Inline-Block: Combines both inline and block properties.
  display: inline-block;
• Display Flex: Creates a flex container for child elements.
  display: flex;
• Display Grid: Creates a grid container for child elements.
  display: grid;

Positioning

• Position Static: Default value. Elements are positioned according to the normal flow of the document.
  position: static;
• Position Relative: Moves an element relative to its normal position.

position: relative;
top: 20px;
left: 30px;

• Position Absolute: Positions an element relative to the nearest positioned ancestor (not static).

position: absolute;
top: 50px;
right: 100px;

• Position Fixed: Keeps an element in a fixed position even when scrolling.

position: fixed;
bottom: 20px;
left: 30px;

Flexbox

• Flex Direction: Defines the direction of the main axis (row or column).

flex-direction: row; /* Default */
flex-direction: column;

• Justify Content: Aligns items along the main axis.

justify-content: flex-start; /* Default */
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;

• Align Items: Aligns items along the cross axis.

align-items: stretch; /* Default */
align-items: flex-start;
align-items: center;
align-items: flex-end;

Grid

• Grid Template Columns: Defines the number and size of columns in a grid container.
  grid-template-columns: repeat(3, 1fr);
• Grid Template Rows: Defines the number and size of rows in a grid container.
  grid-template-rows: auto;
• Justify Items: Aligns items along the row axis within their grid area.

justify-items: start; /* Default */
justify-items: center;
justify-items: end;
justify-items: stretch;

• Align Items: Aligns items along the column axis within their grid area.

align-items: start; /* Default */
align-items: center;
align-items: end;
align-items: stretch;

Other Useful Properties

• Color: Sets the color of text.
  color: #333333;
• Opacity: Sets the opacity level of an element.
  opacity: 0.5;
• Margin/Padding: Controls the space around or inside an element.

margin: 10px;
padding: 20px;

• Box Shadow: Adds a shadow effect to an element.
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.5);
• Transform: Applies 2D or 3D transformations to an element.
  transform: rotate(90deg);

THE END

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!