The Complete CSS3 Properties Cheat Sheet

Introduction to CSS3 Properties

CSS3 (Cascading Style Sheets Level 3) represents the evolution of the CSS standard, introducing powerful styling capabilities that transform the way we design web pages. CSS3 properties control everything from layout and typography to animations and visual effects, enabling responsive, interactive, and visually appealing web experiences without relying on images or JavaScript for many effects.

Core CSS Property Concepts

CSS Property Syntax

selector {
  property: value;
}

CSS Property Value Types

• Keywords: auto, none, inherit • Length units: px, em, rem, vh, vw • Percentages: 50%, 100% • Colors: #FF0000, rgb(255,0,0), rgba(255,0,0,0.5), hsl(0,100%,50%) • URLs: url('image.jpg') • Functions: calc(), var(), linear-gradient()

CSS Property Inheritance

• Some properties inherit from parent elements (e.g., color, font-family) • Others don’t inherit by default (e.g., margin, padding) • Force inheritance with inherit keyword

Layout Properties

Box Model Properties

Display and Positioning

Flexbox Properties

Flex Container:

.container {
  display: flex;
  flex-direction: row | column | row-reverse | 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; /* spacing between items */
  row-gap: 10px;
  column-gap: 20px;
}

Flex Items:

.item {
  order: 0; /* default is 0 */
  flex-grow: 0; /* default is 0 */
  flex-shrink: 1; /* default is 1 */
  flex-basis: auto; /* default is auto */
  flex: 0 1 auto; /* grow shrink basis */
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Grid Properties

Grid Container:

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

Grid Items:

.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column: 1 / 3; /* shorthand for column-start/end */
  grid-row: 1 / 3; /* shorthand for row-start/end */
  grid-area: header | 1 / 1 / 3 / 3; /* shorthand for row-start/column-start/row-end/column-end */
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

Typography Properties

Font Properties

Modern Typography Properties

Color and Background Properties

Color Properties

Background Properties

Gradient Properties

/* Linear Gradient */
background-image: linear-gradient(to right, red, orange, yellow);
background-image: linear-gradient(45deg, blue, green);

/* Radial Gradient */
background-image: radial-gradient(circle, red, yellow, green);
background-image: radial-gradient(ellipse at top, white, blue);

/* Conic Gradient */
background-image: conic-gradient(red, yellow, green, blue, purple);
background-image: conic-gradient(from 45deg, red, blue);

/* Repeating Gradients */
background-image: repeating-linear-gradient(to right, red, blue 50px);
background-image: repeating-radial-gradient(circle, red, blue 20px, red 40px);

Border and Outline Properties

Transition and Animation Properties

Transition Properties

Animation Properties

Transform Properties

transform: none;
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);
transform: translateZ(10px);
transform: translate3d(50px, 100px, 10px);
transform: scale(2);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: scale3d(2, 0.5, 0.3);
transform: rotate(45deg);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(1, 1, 1, 45deg);
transform: skew(10deg, 20deg);
transform: skewX(10deg);
transform: skewY(20deg);
transform: perspective(100px);
transform: matrix(1, 0, 0, 1, 0, 0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

/* Multiple transforms */
transform: translateX(50px) rotate(45deg) scale(1.5);

/* Transform origin */
transform-origin: center;
transform-origin: top left;
transform-origin: 50% 50%;
transform-origin: 100px 200px;

/* 3D properties */
transform-style: flat | preserve-3d;
perspective: none | 800px;
perspective-origin: center | top left | 50% 50%;
backface-visibility: visible | hidden;

Filter Properties

filter: none;
filter: blur(5px);
filter: brightness(0.8);
filter: contrast(150%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(103%);

/* Backdrop filters (applied to background) */
backdrop-filter: blur(10px);
backdrop-filter: brightness(60%) blur(5px);

Variable Properties (Custom Properties)

/* Defining variables */
:root {
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;
  --header-height: 68px;
  --content-padding: 10px 20px;
  --base-line-height: 1.5;
  --transition-duration: 0.35s;
  --external-link: "external link";
  --margin-top: calc(2vh + 20px);
}

/* Using variables */
.element {
  color: var(--main-color);
  background-color: var(--main-bg);
  padding: var(--content-padding);
  height: calc(var(--header-height) * 2);
  transition: all var(--transition-duration) ease;
  /* Fallback value if variable is not defined */
  margin: var(--margin, 10px);
}

Responsive Design Properties

Media Queries

/* Based on viewport width */
@media (max-width: 767px) { /* Mobile */ }
@media (min-width: 768px) and (max-width: 991px) { /* Tablet */ }
@media (min-width: 992px) { /* Desktop */ }

/* Based on orientation */
@media (orientation: portrait) { }
@media (orientation: landscape) { }

/* Based on display quality */
@media (resolution: 300dpi) { }
@media (min-resolution: 2dppx) { }

/* Based on user preferences */
@media (prefers-color-scheme: dark) { }
@media (prefers-reduced-motion: reduce) { }
@media (prefers-contrast: high) { }
@media print { }

Viewport Units

List and Table Properties

List Properties

Table Properties

Common Challenges & Solutions

Cross-Browser Compatibility

/* Vendor prefixes for better compatibility */
.element {
  -webkit-transform: translateX(10px); /* Safari */
  -moz-transform: translateX(10px); /* Firefox */
  -ms-transform: translateX(10px); /* IE */
  -o-transform: translateX(10px); /* Opera */
  transform: translateX(10px); /* Standard */
}

/* Feature queries for progressive enhancement */
@supports (display: grid) {
  .container {
    display: grid;
  }
}

Creating Responsive Images

/* Fluid images */
img {
  max-width: 100%;
  height: auto;
}

/* Background image responsive scaling */
.hero {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
}

/* Art direction with media queries */
@media (max-width: 767px) {
  .hero {
    background-image: url('image-small.jpg');
  }
}

Handling Text Overflow

/* Ellipsis for single line */
.truncate-single {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line ellipsis with line clamp */
.truncate-multi {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Best Practices & Tips

• Use Shorthand Properties – Combine related properties when possible

/* Instead of */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;

/* Use shorthand */
margin: 10px 15px;

• Choose Appropriate Units

• px for borders, shadows, precise control
• em/rem for typography and spacing (responsive to font sizes)
• % for responsive layouts relative to parent
• vh/vw for viewport-relative sizing

• Specificity Management

• Avoid using !important when possible
• Use classes instead of IDs for styling
• Minimize nesting selectors

• Performance Optimization

• Use transform and opacity for animations
• Minimize repaints with will-change
• Avoid expensive properties that trigger layout

• Layout Strategy

• Use Grid for two-dimensional layouts
• Use Flexbox for one-dimensional layouts
• Combine both for complex interfaces

• Mobile-First Approach

• Start with styles for mobile devices
• Add complexity for larger screens with media queries

• Design System Integration

• Use CSS variables for theme colors, spacing, etc.
• Maintain consistent values across components

• Progressive Enhancement

• Use @supports to provide fallbacks for newer features
• Test across browsers and devices

Newer CSS Properties to Watch

Resources for Further Learning

• Official Documentation:

• MDN Web Docs – CSS Reference
• W3C CSS Specifications

• Browser Compatibility:

• Can I Use
• MDN Browser Compatibility Data

• Tools:

• CSS Validator
• Autoprefixer
• Stylelint
• CSS Triggers

• Learning Resources:

• CSS-Tricks
• Smashing Magazine
• web.dev
• “CSS: The Definitive Guide” by Eric Meyer
• “CSS Secrets” by Lea Verou

• Modern CSS Frameworks:

• Tailwind CSS
• Bootstrap 5
• Bulma
• Foundation

This cheatsheet covers most CSS3 properties you’ll need for modern web development. As CSS continues to evolve, check the official documentation for the latest features and browser support information.