css_cheatsheet.md

CSS Cheatsheet

Selectors

/* Basic Selectors */
*                   /* Universal */
element             /* Type */
.class              /* Class */
#id                 /* ID */
[attribute]         /* Attribute */
[attr="value"]      /* Attribute value */
[attr^="start"]     /* Starts with */
[attr$="end"]       /* Ends with */
[attr*="contains"]  /* Contains */

/* Combinators */
A B                 /* Descendant */
A > B               /* Direct child */
A + B               /* Adjacent sibling */
A ~ B               /* General sibling */

/* Pseudo-classes */
:hover              /* Mouse over */
:focus              /* Keyboard focus */
:active             /* Being clicked */
:visited            /* Visited link */
:first-child        /* First child */
:last-child         /* Last child */
:nth-child(n)       /* Nth child */
:nth-child(odd)     /* Odd children */
:nth-child(even)    /* Even children */
:nth-child(2n+1)    /* Custom pattern */
:not(selector)      /* Not matching */

/* Pseudo-elements */
::before            /* Before content */
::after             /* After content */
::first-line        /* First line */
::first-letter      /* First letter */
::selection         /* Selected text */
::placeholder       /* Input placeholder */

Box Model

/* Box Sizing */
box-sizing: content-box; /* Default */
box-sizing: border-box; /* Include padding/border */

/* Dimensions */
width: 300px;
height: 200px;
min-width: 100px;
max-width: 500px;
min-height: 50px;
max-height: 300px;

/* Padding */
padding: 10px; /* All sides */
padding: 10px 20px; /* Vertical | Horizontal */
padding: 10px 15px 20px; /* Top | Horizontal | Bottom */
padding: 10px 15px 20px 25px; /* Top | Right | Bottom | Left */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;

/* Margin */
margin: 10px; /* All sides */
margin: 10px auto; /* Center horizontally */
margin: 0 auto; /* Center block element */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

/* Border */
border: 2px solid #333;
border-width: 2px;
border-style: solid; /* solid | dashed | dotted | double */
border-color: #333;
border-radius: 5px;
border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double yellow;

/* Box Shadow */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Inner shadow */
box-shadow: 0 2px 4px red, 0 4px 8px blue; /* Multiple shadows */

Layout

/* Display */
display: block; /* Block element */
display: inline; /* Inline element */
display: inline-block; /* Inline-block */
display: none; /* Hide element */
display: flex; /* Flexbox */
display: grid; /* CSS Grid */
display: table; /* Table display */

/* Position */
position: static; /* Default */
position: relative; /* Relative to normal position */
position: absolute; /* Relative to positioned parent */
position: fixed; /* Relative to viewport */
position: sticky; /* Sticky positioning */

/* Position Properties */
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
z-index: 1000;

/* Float (Legacy) */
float: left;
float: right;
float: none;
clear: both;
clear: left;
clear: right;

/* Overflow */
overflow: visible; /* Default */
overflow: hidden; /* Hide overflow */
overflow: scroll; /* Always show scrollbars */
overflow: auto; /* Show scrollbars if needed */
overflow-x: hidden; /* Horizontal only */
overflow-y: scroll; /* Vertical only */

Flexbox

/* Container Properties */
.flex-container {
  display: flex;

  /* Direction */
  flex-direction: row; /* row | row-reverse | column | column-reverse */

  /* Wrap */
  flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */

  /* Shorthand */
  flex-flow: row wrap; /* direction wrap */

  /* Main Axis Alignment */
  justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | space-evenly */

  /* Cross Axis Alignment */
  align-items: stretch; /* stretch | flex-start | flex-end | center | baseline */

  /* Wrapped Lines Alignment */
  align-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | stretch */

  /* Gap */
  gap: 20px;
  row-gap: 20px;
  column-gap: 10px;
}

/* Item Properties */
.flex-item {
  /* Grow */
  flex-grow: 1; /* Grow factor */

  /* Shrink */
  flex-shrink: 1; /* Shrink factor */

  /* Basis */
  flex-basis: 200px; /* Initial size */

  /* Shorthand */
  flex: 1; /* grow shrink basis */
  flex: 1 1 200px;

  /* Self Alignment */
  align-self: center; /* Override container align-items */

  /* Order */
  order: 2; /* Visual order */
}

CSS Grid

/* Container Properties */
.grid-container {
    display: grid;

    /* Define Columns */
    grid-template-columns: 200px 1fr 100px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    /* Define Rows */
    grid-template-rows: 100px auto 50px;
    grid-template-rows: repeat(3, 100px);

    /* Define Areas */
    grid-template-areas:
        "header header header"
        "nav main aside"
        "footer footer footer";

    /* Gap */
    gap: 20px;
    row-gap: 20px;
    column-gap: 10px;

    /* Alignment */
    justify-items: start;       /* start | end | center | stretch */
    align-items: start;
    justify-content: start;     /* start | end | center | stretch | space-around | space-between | space-evenly */
    align-content: start;
}

/* Item Properties */
.grid-item {
    /* Position by Lines */
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;

    /* Shorthand */
    grid-column: 1 / 3;         /* start / end */
    grid-row: 2 / 4;
    grid-area: 2 / 1 / 4 / 3;   /* row-start / col-start / row-end / col-end */

    /* Span */
    grid-column: span 2;
    grid-row: span 3;

    /* Named Areas */
    grid-area: header;

    /* Self Alignment */
    justify-self: center;
    align-self: center;
}

/* Grid Functions */
minmax(200px, 1fr)          /* Min and max size */
repeat(3, 1fr)              /* Repeat pattern */
auto-fit                    /* Fit content */
auto-fill                   /* Fill space */
fr                          /* Fractional unit */

Typography

/* Font Properties */
font-family: Arial, sans-serif;
font-size: 16px; /* px | em | rem | % */
font-weight: normal; /* normal | bold | 100-900 */
font-style: normal; /* normal | italic | oblique */
font-variant: small-caps;
line-height: 1.5; /* Unitless preferred */
letter-spacing: 0.1em;
word-spacing: 0.2em;

/* Text Properties */
text-align: left; /* left | center | right | justify */
text-decoration: none; /* none | underline | line-through | overline */
text-transform: uppercase; /* uppercase | lowercase | capitalize */
text-indent: 2em;
white-space: nowrap; /* normal | nowrap | pre | pre-wrap */
word-wrap: break-word;
text-overflow: ellipsis;

/* Web Fonts */
@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Colors & Backgrounds

/* Color Values */
color: red; /* Named */
color: #ff0000; /* Hex */
color: #f00; /* Short hex */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGBA */
color: hsl(0, 100%, 50%); /* HSL */
color: hsla(0, 100%, 50%, 0.5); /* HSLA */

/* Background */
background-color: #f0f0f0;
background-image: url("image.jpg");
background-position: center; /* top | bottom | left | right | center | x% y% */
background-size: cover; /* cover | contain | auto | x y */
background-repeat: no-repeat; /* repeat | repeat-x | repeat-y | no-repeat */
background-attachment: fixed; /* scroll | fixed */

/* Shorthand */
background: #f0f0f0 url("image.jpg") no-repeat center / cover;

/* Gradients */
background: linear-gradient(45deg, red, blue);
background: linear-gradient(to right, red, yellow, blue);
background: radial-gradient(circle, red, blue);
background: conic-gradient(red, yellow, green, blue, red);

Transforms & Animations

/* 2D Transforms */
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);
transform: scale(1.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(45deg);
transform: skew(30deg, 20deg);

/* 3D Transforms */
transform: translate3d(50px, 100px, 20px);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: perspective(1000px);

/* Transform Origin */
transform-origin: center; /* top | bottom | left | right | center | x% y% */

/* Transitions */
transition: property duration timing-function delay;
transition: all 0.3s ease-in-out;
transition: transform 0.3s ease, opacity 0.2s linear;

/* Timing Functions */
transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

/* Animations */
@keyframes slidein {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

animation: slidein 0.5s ease-out;
animation: name duration timing-function delay iteration-count direction
  fill-mode;

/* Animation Properties */
animation-name: slidein;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-delay: 0.2s;
animation-iteration-count: infinite; /* number | infinite */
animation-direction: alternate; /* normal | reverse | alternate | alternate-reverse */
animation-fill-mode: forwards; /* none | forwards | backwards | both */
animation-play-state: running; /* running | paused */

Media Queries (Mobile-First)

/* Base styles (mobile) */
.element {
  /* Mobile styles */
}

/* Small devices (≥576px) */
@media (min-width: 576px) {
  .element {
    /* Small device styles */
  }
}

/* Medium devices (≥768px) */
@media (min-width: 768px) {
  .element {
    /* Tablet styles */
  }
}

/* Large devices (≥992px) */
@media (min-width: 992px) {
  .element {
    /* Desktop styles */
  }
}

/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
  .element {
    /* Large desktop styles */
  }
}

/* Media Query Features */
@media (max-width: 767px) {
  /* Mobile only */
}
@media (orientation: landscape) {
  /* Landscape */
}
@media (orientation: portrait) {
  /* Portrait */
}
@media (prefers-color-scheme: dark) {
  /* Dark mode */
}
@media (prefers-reduced-motion: reduce) {
  /* Reduced motion */
}
@media print {
  /* Print styles */
}

CSS Custom Properties (Variables)

/* Define Variables */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size-base: 1rem;
  --spacing: 1rem;
  --border-radius: 4px;
}

/* Use Variables */
.button {
  background-color: var(--primary-color);
  font-size: var(--font-size-base);
  padding: var(--spacing);
  border-radius: var(--border-radius);

  /* Fallback value */
  color: var(--text-color, #333);
}

/* Override Variables */
.dark-theme {
  --primary-color: #0056b3;
  --text-color: white;
}

/* Computed Values */
:root {
  --base-size: 1rem;
  --large-size: calc(var(--base-size) * 1.5);
}

Modern CSS Features

/* Aspect Ratio */
aspect-ratio: 16 / 9;
aspect-ratio: 1; /* Square */

/* Clamp Function */
font-size: clamp(1rem, 2.5vw, 2rem); /* min, preferred, max */
width: clamp(300px, 50%, 800px);

/* Logical Properties */
margin-inline: 20px; /* Horizontal margins */
margin-block: 10px; /* Vertical margins */
padding-inline-start: 15px; /* Left in LTR, right in RTL */
inline-size: 300px; /* Width in horizontal writing mode */
block-size: 200px; /* Height in horizontal writing mode */

/* CSS Filters */
filter: blur(5px);
filter: brightness(1.5);
filter: contrast(1.2);
filter: grayscale(100%);
filter: hue-rotate(90deg);
filter: invert(100%);
filter: opacity(50%);
filter: saturate(2);
filter: sepia(100%);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));

/* Container Queries */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

Utility Classes

/* Text Utilities */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-uppercase {
  text-transform: uppercase;
}
.text-lowercase {
  text-transform: lowercase;
}
.text-capitalize {
  text-transform: capitalize;
}

/* Display Utilities */
.d-none {
  display: none;
}
.d-block {
  display: block;
}
.d-inline {
  display: inline;
}
.d-inline-block {
  display: inline-block;
}
.d-flex {
  display: flex;
}
.d-grid {
  display: grid;
}

/* Flex Utilities */
.justify-content-center {
  justify-content: center;
}
.justify-content-between {
  justify-content: space-between;
}
.align-items-center {
  align-items: center;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}

/* Spacing Utilities */
.m-0 {
  margin: 0;
}
.m-1 {
  margin: 0.25rem;
}
.m-2 {
  margin: 0.5rem;
}
.m-3 {
  margin: 1rem;
}
.m-4 {
  margin: 1.5rem;
}
.m-5 {
  margin: 3rem;
}

.mt-2 {
  margin-top: 0.5rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.ml-2 {
  margin-left: 0.5rem;
}

.p-0 {
  padding: 0;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 1rem;
}

/* Width/Height Utilities */
.w-25 {
  width: 25%;
}
.w-50 {
  width: 50%;
}
.w-75 {
  width: 75%;
}
.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}

/* Position Utilities */
.position-relative {
  position: relative;
}
.position-absolute {
  position: absolute;
}
.position-fixed {
  position: fixed;
}
.position-sticky {
  position: sticky;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Common Patterns

/* Center Content */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Card Component */
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Button Reset */
.btn-reset {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Aspect Ratio Box (Legacy) */
.aspect-ratio-16-9 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
}

.aspect-ratio-16-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Truncate Text */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide Scrollbar */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}