CSS Cheat Sheet

/* Element */
h1 { color: blue; }

/* Class */
.box { padding: 10px; }

/* ID */
#header { background: gray; }

/* Universal */
* { margin: 0; }

/* Group */
h1, h2, p { font-family: sans-serif; }

.red { color: red; }
.hex { color: #ff0000; }
.rgb { color: rgb(255, 0, 0); }
.hsl { color: hsl(0, 100%, 50%); }

.box {
  width: 100px;
  padding: 2em;
  font-size: 1rem;
  height: 50vh;
  width: 80vw;
}

.container {
  margin: 20px;
  border: 1px solid black;
  padding: 15px;
  width: 300px;
}

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}

.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.hidden { display: none; }

.static { position: static; }
.relative { position: relative; top: 10px; }
.absolute { position: absolute; left: 20px; }
.fixed { position: fixed; bottom: 0; }
.sticky { position: sticky; top: 0; }

.left { float: left; }
.right { float: right; }
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.above { position: absolute; z-index: 10; }
.below { position: absolute; z-index: 1; }

.scrollable {
  overflow: scroll;
}
.hidden {
  overflow: hidden;
}
.auto {
  overflow: auto;
}

display: flex

.flex-container {
  display: flex;
}

flex-direction

.row { flex-direction: row; }
.column { flex-direction: column; }

justify-content

.centered {
  justify-content: center;
}

align-items / align-self

.stretch { align-items: stretch; }
.align-end { align-self: flex-end; }

flex-wrap

.wrap { flex-wrap: wrap; }

gap

.spaced {
  gap: 10px;
}

display: grid

.grid-container {
  display: grid;
}

grid-template-rows / columns

.grid-container {
  grid-template-columns: 100px 1fr 2fr;
  grid-template-rows: auto auto;
}

grid-gap / row-gap / column-gap

.grid-container {
  gap: 20px;
  row-gap: 10px;
  column-gap: 15px;
}

grid-area / grid-template-areas

.grid-container {
  grid-template-areas:
    "header header"
    "sidebar main";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }

justify-items / align-items

.grid-container {
  justify-items: center;
  align-items: start;
}

width / height / max- / min-

.box {
  width: 100px;
  height: 200px;
  min-width: 50px;
  max-height: 400px;
}

margin / padding (shorthand)

.box {
  margin: 10px 15px;
  padding: 5px 10px 15px 20px;
}

auto sizing

.centered {
  margin: 0 auto;
}

Background

.bg {
  background-color: lightblue;
  background-image: url("image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

Borders

.bordered {
  border-width: 2px;
  border-style: solid;
  border-color: black;
  border-radius: 10px;
}

Box-shadow / text-shadow

.shadow {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-shadow: 1px 1px 2px gray;
}

Opacity

.transparent {
  opacity: 0.5;
}

Transitions

.btn {
  transition: background-color 0.3s ease;
}

Transforms

.rotated {
  transform: rotate(45deg);
}
.scaled {
  transform: scale(1.2);
}

Animations (@keyframes)

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade {
  animation: fadeIn 2s ease-in;
}

Media Queries

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Mobile-first Design

Start with styles for mobile, then use media queries for larger screens.

Viewport Units

.hero {
  height: 100vh;
  width: 100vw;
}

Responsive Images

img {
  max-width: 100%;
  height: auto;
}

:hover / :focus / :active / :nth-child

a:hover {
  color: red;
}
input:focus {
  outline: 2px solid blue;
}
button:active {
  background-color: gray;
}
li:nth-child(odd) {
  background: #f9f9f9;
}

::before / ::after

.quote::before {
  content: "\201C";
}
.quote::after {
  content: "\201D";
}

[attribute]

input[type="text"] {
  border: 1px solid #ccc;
}

:not()

p:not(.highlight) {
  color: gray;
}

:has() (future support)

article:has(img) {
  border: 1px solid red;
}

:is() / :where()

:is(h1, h2, h3) {
  margin-bottom: 1rem;
}
:where(section, article) {
  padding: 1em;
}

CSS Variables (--var)

:root {
  --main-color: #333;
}
.box {
  color: var(--main-color);
}

calc()

.half {
  width: calc(100% - 20px);
}

clamp()

.text {
  font-size: clamp(1rem, 2vw, 2rem);
}

min() / max()

.box {
  width: min(100%, 600px);
  height: max(100px, 10vh);
}

Custom Fonts (@font-face)

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

Transitions vs Animations

Use transition for simple changes; animation for keyframe control.

Important (!important)

.override {
  color: red !important;
}

Cascading & Specificity

More specific selectors override less specific ones. Later rules override earlier ones unless specificity differs.

Inheritance

Some properties (like color, font) are inherited. Use inherit to force inheritance.