Cheatsheets

    • CSS3 Cheatsheet

    Complete CSS3 cheatsheet covering fonts, layouts, flexbox, grid, animations, media queries, and modern styling techniques for web development.

    css3(1)styling(1)web(4)frontend(2)

    CSS3 Cheatsheet

    CSS3

    Styling

    Web

    Frontend

    Complete reference for CSS3 properties, selectors, layouts, animations, and modern styling techniques for creating beautiful and responsive web designs.

    Quick Reference

    🎨 Typography & Colors

    Font properties, text styling, and color systems

    📦 Box Model & Layout

    Positioning, spacing, borders, and backgrounds

    🔧 Flexbox & Grid

    Modern layout systems for responsive design

    ✨ Animations & Media Queries

    Transitions, animations, and responsive design

    Font Properties

    Font properties allow you to control the appearance of text, including family, size, weight, and style.

    Font Family and Style

    Font family declaration

    body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  /* Multiple fonts declared in order of preference */
}

    Font style variations

    .text {
  font-style: normal | italic | oblique;
}

    Font variants

    .small-caps {
  font-variant: normal | small-caps;
}

    Font weight options

    .bold-text {
  font-weight: normal | bold | bolder | lighter | 100-900;
}

    Font size units

    .responsive-text {
  font-size: 16px | 1rem | 1.2em | larger | smaller;
}

    Font shorthand property

    .complete-font {
  font: italic small-caps bold 16px/1.5 Arial, sans-serif;
  /* style variant weight size/line-height family */
}

    Text Properties

    Text properties control text alignment, spacing, decoration, and transformation for better typography.

    Text Alignment and Spacing

    Text alignment options

    .container {
  text-align: left | right | center | justify;
}

    Letter and word spacing

    .spaced-text {
  letter-spacing: 0.1em | 2px | normal;
  word-spacing: 0.25em | 4px | normal;
}

    Text indentation

    .paragraph {
  text-indent: 2em | 30px | 10%;
}

    Line height control

    .readable-text {
  line-height: 1.5 | 24px | 150% | normal;
}

    Text Decoration and Transform

    Text decoration styles

    .decorated-text {
  text-decoration: none | underline | overline | line-through;
  text-decoration-color: red;
  text-decoration-style: solid | dotted | dashed | wavy;
}

    Text transformation

    .transformed-text {
  text-transform: none | uppercase | lowercase | capitalize;
}

    Background Properties

    Background properties control the visual backdrop of elements, including colors, images, and positioning.

    Background Images and Colors

    Background image setup

    .hero-section {
  background-image: url("path/to/image.jpg");
  background-position: center | top left | 50% 30%;
  background-size: cover | contain | 100% 50%;
  background-repeat: no-repeat | repeat | repeat-x | repeat-y;
  background-attachment: scroll | fixed | local;
}

    Background color options

    .colored-bg {
  background-color: #ff6b6b | rgb(255, 107, 107) | hsl(0, 79%, 72%);
}

    Background shorthand

    .complete-bg {
  background: #f0f0f0 url("bg.jpg") no-repeat center/cover;
  /* color image repeat position/size */
}

    Border Properties

    Border properties define the outline of elements with customizable width, style, color, and radius.

    Border Styles and Dimensions

    Border width and style

    .bordered-element {
  border-width: 1px | thin | medium | thick;
  border-style: solid | dotted | dashed | double | groove | ridge | inset | outset;
  border-color: #333 | rgb(51, 51, 51) | currentColor;
}

    Border radius for rounded corners

    .rounded-element {
  border-radius: 5px | 50% | 10px 20px 30px 40px;
  /* single value | circle | top-left top-right bottom-right bottom-left */
}

    Individual border sides

    .custom-borders {
  border-top: 2px solid red;
  border-right: 1px dashed blue;
  border-bottom: 3px dotted green;
  border-left: 4px double yellow;
}

    Border shorthand

    .simple-border {
  border: 2px solid #333;
  /* width style color */
}

    Box Model Properties

    The CSS box model consists of content, padding, border, and margin. Understanding this is crucial for proper layout control.

    Positioning and Layout

    Display types

    .layout-element {
  display: block | inline | inline-block | flex | grid | none;
}

    Positioning methods

    .positioned-element {
  position: static | relative | absolute | fixed | sticky;
  top: 10px;
  right: 20px;
  bottom: 30px;
  left: 40px;
  z-index: 100;
}

    Float and clear

    .floated-element {
  float: left | right | none;
  clear: left | right | both | none;
}

    Dimensions and Spacing

    Width and height

    .sized-element {
  width: 300px | 50% | auto | fit-content;
  height: 200px | 100vh | auto | fit-content;
  max-width: 1200px;
  min-width: 320px;
  max-height: 600px;
  min-height: 100px;
}

    Margin and padding

    .spaced-element {
  margin: 10px | 10px 20px | 10px 20px 30px 40px | auto;
  padding: 15px | 15px 25px | 15px 25px 35px 45px;
  /* single | vertical horizontal | top horizontal bottom | top right bottom left */
}

    Overflow control

    .overflow-element {
  overflow: visible | hidden | scroll | auto;
  overflow-x: hidden;
  overflow-y: scroll;
}

    Visibility and opacity

    .visibility-element {
  visibility: visible | hidden | collapse;
  opacity: 0.5 | 0 | 1;
}

    Box sizing

    .box-sizing-element {
  box-sizing: content-box | border-box;
}

    Color Systems

    CSS supports multiple color formats including named colors, hex, RGB, HSL, and with alpha transparency.

    Color Formats

    Different color representations

    .colorful-text {
  /* Named colors */
  color: red | blue | cornsilk | transparent;
  
  /* Hexadecimal */
  color: #ff0000 | #f00 | #ff0000ff;
  
  /* RGB/RGBA */
  color: rgb(255, 0, 0) | rgba(255, 0, 0, 0.5);
  
  /* HSL/HSLA */
  color: hsl(0, 100%, 50%) | hsla(0, 100%, 50%, 0.5);
}

    Table Styling

    Table Properties

    Table layout and spacing

    table {
  border-collapse: separate | collapse;
  border-spacing: 5px | 5px 10px;
  table-layout: auto | fixed;
  caption-side: top | bottom;
  empty-cells: show | hide;
}

    Column Layout

    Multi-column Properties

    Column configuration

    .multi-column {
  column-count: 3 | auto;
  column-width: 200px | auto;
  column-gap: 20px | normal;
  column-rule: 1px solid #ddd;
  column-rule-width: thin | medium | thick | 2px;
  column-rule-style: solid | dotted | dashed;
  column-rule-color: #333;
  column-span: none | all;
}

    List Styling

    List and Marker Properties

    List style customization

    ul, ol, li {
  list-style-type: disc | circle | square | decimal | none;
  list-style-position: inside | outside;
  list-style-image: url("bullet.png") | none;
  list-style: square inside url("custom-bullet.gif");
}

    Animations

    CSS animations bring your designs to life with smooth transitions and keyframe-based animations.

    Animation Properties

    Animation configuration

    .animated-element {
  animation-name: slideIn;
  animation-duration: 2s | 500ms;
  animation-timing-function: ease | linear | ease-in | ease-out | 
                           ease-in-out | cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-delay: 1s | 200ms;
  animation-iteration-count: 3 | infinite;
  animation-direction: normal | reverse | alternate | alternate-reverse;
  animation-fill-mode: none | forwards | backwards | both;
  animation-play-state: running | paused;
}

    Animation shorthand

    .quick-animation {
  animation: slideIn 2s ease-in-out 1s infinite alternate both;
  /* name duration timing-function delay iteration-count direction fill-mode */
}

    Keyframes definition

    @keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    transform: translateX(-10%);
    opacity: 0.7;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

    Transitions

    Transition Properties

    Smooth state changes

    .transition-element {
  transition-property: all | color | transform | opacity;
  transition-duration: 0.3s | 300ms;
  transition-timing-function: ease | linear | ease-in | ease-out;
  transition-delay: 0.1s | 100ms;
}

    Transition shorthand

    .smooth-hover {
  transition: all 0.3s ease-in-out 0.1s;
  /* property duration timing-function delay */
}
 
.smooth-hover:hover {
  color: blue;
  transform: scale(1.1);
}

    CSS Flexbox

    Flexbox is a powerful one-dimensional layout method for arranging items in rows or columns with flexible sizing.

    Flex Container Properties

    Flex container setup

    .flex-container {
  display: flex | inline-flex;
  
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  flex-flow: row wrap; /* shorthand for direction and wrap */
  
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  align-items: stretch | flex-start | flex-end | center | baseline;
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  
  gap: 10px | 10px 20px; /* row-gap column-gap */
}

    Flex Item Properties

    Flex item behavior

    .flex-item {
  order: 0 | 1 | -1; /* default is 0 */
  
  flex-grow: 0 | 1 | 2; /* default 0 */
  flex-shrink: 1 | 0 | 2; /* default 1 */
  flex-basis: auto | 0 | 200px | 30%; /* default auto */
  
  flex: 1 | 0 1 auto | none; /* shorthand for grow shrink basis */
  
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

    CSS Grid

    CSS Grid is a powerful two-dimensional layout system perfect for complex layouts and responsive designs.

    Grid Container Properties

    Grid container setup

    .grid-container {
  display: grid | inline-grid;
  
  grid-template-columns: 200px 1fr 100px | repeat(3, 1fr) | auto 1fr;
  grid-template-rows: 100px auto 50px | repeat(2, minmax(100px, auto));
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
  
  grid-template: 
    "header header" 80px
    "sidebar main" 1fr
    "footer footer" 60px
    / 200px 1fr; /* rows / columns */
  
  column-gap: 20px;
  row-gap: 15px;
  gap: 15px 20px; /* row-gap column-gap */
  
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
  place-items: center; /* align-items justify-items */
  
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
  place-content: center; /* align-content justify-content */
  
  grid-auto-columns: 100px | 1fr | minmax(100px, auto);
  grid-auto-rows: 50px | auto | minmax(50px, 100px);
  grid-auto-flow: row | column | row dense | column dense;
}

    Grid Item Properties

    Grid item positioning

    .grid-item {
  grid-column-start: 1 | span 2 | auto;
  grid-column-end: 3 | span 1 | auto;
  grid-row-start: 2 | span 1 | auto;
  grid-row-end: 4 | span 2 | auto;
  
  grid-column: 1 / 3 | 1 / span 2 | 2 / -1;
  grid-row: 2 / 4 | 1 / span 3 | 1 / -2;
  
  grid-area: header | 1 / 1 / 3 / 3 | 2 / 1 / span 2 / span 3;
  
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
  place-self: center; /* align-self justify-self */
}

    Media Queries

    Media queries are essential for responsive design, allowing different styles for different devices and screen sizes.

    Responsive Breakpoints

    Standard device breakpoints

    /* Mobile First Approach */
/* Small screens - MOBILE */
@media only screen and (max-width: 640px) {
  .mobile-only {
    display: block;
  }
}
 
/* Medium screens - TABLET */
@media only screen and (min-width: 641px) and (max-width: 1024px) {
  .tablet-styles {
    font-size: 18px;
  }
}
 
/* Large screens - DESKTOP */
@media only screen and (min-width: 1025px) {
  .desktop-styles {
    max-width: 1200px;
    margin: 0 auto;
  }
}

    Common responsive patterns

    /* Tablet landscape with retina */
@media only screen and 
       (min-width: 641px) and 
       (max-width: 1024px) {
  .tablet-retina {
    max-width: 1200px;
    margin: 0 auto;
  }
}
 
/* Desktop first breakpoints */
@media all and 
       (min-width: 1024px) and 
       (max-width: 1280px) {
  /* Desktop styles */
}
 
@media all and 
       (min-width: 768px) and 
       (max-width: 1024px) {
  /* Tablet landscape */
}
 
@media all and 
       (min-width: 480px) and 
       (max-width: 768px) {
  /* Tablet portrait */
}
 
@media all and (max-width: 480px) {
  /* Mobile */
}
 
/* iPhone Portrait */
@media screen and 
       (max-device-width: 480px) and 
       (orientation: portrait) {
  .iphone-portrait {
    padding: 10px;
  }
}
 
/* iPhone Landscape */
@media screen and 
       (max-device-width: 480px) and 
       (orientation: landscape) {
  .iphone-landscape {
    padding: 5px;
  }
}
 
/* iPad Portrait */
@media screen and 
       (min-device-width: 481px) and 
       (max-device-width: 1024px) and 
       (orientation: portrait) {
  .ipad-portrait {
    columns: 2;
  }
}
 
/* iPad Landscape */
@media screen and 
       (min-device-width: 481px) and 
       (max-device-width: 1024px) and 
       (orientation: landscape) {
  .ipad-landscape {
    columns: 3;
  }
}

    Advanced Media Queries

    Orientation and device features

    /* Orientation */
@media screen and (orientation: portrait) {
  .portrait-layout {
    flex-direction: column;
  }
}
 
@media screen and (orientation: landscape) {
  .landscape-layout {
    flex-direction: row;
  }
}
 
/* High DPI/Retina displays */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  .retina-image {
    background-image: url("high-res-image@2x.png");
  }
}
 
/* Dark mode support */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #ffffff;
  }
}
 
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

    Modern CSS Features

    CSS Custom Properties (Variables)

    CSS variables

    :root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size-base: 16px;
  --spacing-unit: 8px;
}
 
.component {
  color: var(--primary-color);
  font-size: var(--font-size-base);
  margin: calc(var(--spacing-unit) * 2);
}

    CSS Functions

    Useful CSS functions

    .modern-css {
  /* Calculations */
  width: calc(100% - 40px);
  
  /* Clamping values */
  font-size: clamp(14px, 4vw, 24px);
  
  /* Min/Max values */
  width: min(500px, 100%);
  height: max(200px, 50vh);
  
  /* Color functions */
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  color: hsl(200, 50%, 50%);
}

    Best Practices

    Follow these CSS3 best practices for maintainable, performant, and accessible stylesheets.

    • Use semantic class names that describe content, not appearance
    • Implement mobile-first design with progressive enhancement
    • Utilize CSS Grid and Flexbox for modern layout solutions
    • Optimize performance by minimizing reflows and repaints
    • Use CSS custom properties for consistent theming
    • Follow BEM methodology for scalable CSS architecture
    • Validate your CSS and test across different browsers
    • Consider accessibility with proper contrast ratios and focus states
    • Use CSS animations sparingly and respect user preferences for reduced motion

    Learn More

    Explore comprehensive CSS3 documentation and advanced styling techniques

    Resources

    Written by

    Deepak Jangra

    Created At

    Wed Jan 15 2025

    Updated At

    Fri Jun 13 2025

    Cheatsheets

    Your go-to resource for quick reference guides on essential development tools and technologies.

    GitHubTwitter

    Quick Links

    Recent Cheatsheets

    © 2025 Deepak Jangra. All rights reserved.