Skip to content

CSS Style Cheat Sheet

CSS (Cascading Style Sheets) is used to control the layout and styling of web pages. This cheat sheet covers the most commonly used properties and selectors.

Selectors

Type Example Description
All * { } Match all elements
Type h1 { } Match specific HTML tag
Class .header { } Match elements with class=“header”
ID #main { } Match element with id=“main”
Descendant div p { } Match all p inside div
Pseudo a:hover { } State when hovered with mouse

Box Model 

.box {
  width: 300px;
  height: 200px;
  padding: 10px;    /* Padding */
  border: 1px solid #ccc; /* Border */
  margin: 20px;     /* Margin */
  box-sizing: border-box; /* Include border and padding */
}

Typography

Property Description Example
font-family Font family font-family: Arial, sans-serif;
font-size Font size font-size: 16px;
font-weight Font weight font-weight: bold;
text-align Text alignment text-align: center;
line-height Line height line-height: 1.5;
color Font color color: #333;

Colors & Backgrounds

Property Description Example
background-color Background color background-color: #f0f0f0;
background-image Background image background-image: url('bg.jpg');
background-size Background size background-size: cover;
opacity Opacity opacity: 0.8;

Positioning

  • position: static; : Default flow layout
  • position: relative; : Offset relative to its own position
  • position: absolute; : Position relative to nearest non-static ancestor
  • position: fixed; : Position relative to browser window
  • position: sticky; : Fixed when scrolled to specific position
  • z-index: 10; : Control stack order

Display & Layout

  • display: block; : Block element
  • display: inline; : Inline element
  • display: inline-block; : Inline-block element
  • display: flex; : Enable flex layout
  • display: grid; : Enable grid layout
  • display: none; : Hide element without taking space

Shorthand Properties

  • margin: 10px 5px 15px 20px; (Top Right Bottom Left)
  • padding: 10px 5px; (Top-Bottom Left-Right)
  • border: 1px dashed red; (Width Style Color)