CSS Full Course & Animation Cheatsheet

Cheatsheet Content

CSS Roadmap to Learning Fundamentals: Selectors, Properties, Values, Box Model, Display, Positioning. Layouts: Flexbox, CSS Grid. Styling Basics: Typography, Colors, Backgrounds, Borders, Shadows. Responsive Design: Media Queries, Viewport Units, Fluid Images. Advanced Styling: Pseudo-classes/elements, Z-index, Blend Modes, Filters. Interactivity & Motion: Transitions, Animations, Transforms. Organization & Preprocessing: CSS Variables, BEM, SASS/LESS (optional). Performance: Critical CSS, Optimization techniques. CSS Fundamentals Selectors Type: p { ... } (selects all paragraphs) Class: .my-class { ... } (selects elements with class="my-class" ) ID: #my-id { ... } (selects element with id="my-id" ) Attribute: [type="text"] { ... } Universal: * { ... } (selects all elements) Combinators: Descendant: div p { ... } (any p inside a div ) Child: div > p { ... } (direct child p of a div ) Adjacent Sibling: h1 + p { ... } ( p immediately after h1 ) General Sibling: h1 ~ p { ... } (any p after h1 ) Pseudo-classes: :hover , :focus , :active , :nth-child() , :first-child , :last-child Pseudo-elements: ::before , ::after , ::first-letter , ::first-line , ::selection Box Model Every HTML element is a rectangular box. Content: The actual content (text, image). Padding: Space between content and border. Border: Line around padding and content. Margin: Space outside the border, between elements. Properties: width , height , padding , border , margin . box-sizing: border-box; (includes padding and border in element's total width/height) Display Property block : Takes full width, starts on new line (e.g., div , p ) inline : Takes only necessary width, no new line (e.g., span , a ) inline-block : Inline but accepts width/height/vertical margin/padding. none : Hides element completely (removes from document flow). flex : Enables Flexbox layout for children. grid : Enables CSS Grid layout for children. Positioning static (default): Renders in normal document flow. relative : Positioned relative to its normal position. Use top , right , bottom , left . absolute : Positioned relative to its nearest positioned ancestor. Removed from document flow. fixed : Positioned relative to the viewport. Stays in place during scroll. sticky : Behaves like relative until a threshold, then like fixed . z-index : Controls stacking order of positioned elements (higher value is on top). CSS Layouts Flexbox (One-dimensional layout) .container { display: flex; flex-direction: row | column; justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; align-items: flex-start | flex-end | center | baseline | stretch; flex-wrap: nowrap | wrap | wrap-reverse; } .item { flex-grow: <number>; flex-shrink: <number>; flex-basis: <length> | auto; align-self: auto | flex-start | flex-end | center | baseline | stretch; order: <integer>; } CSS Grid (Two-dimensional layout) .container { display: grid; grid-template-columns: 1fr 1fr auto; /* or 200px 1fr */ grid-template-rows: auto 100px; grid-gap: 10px 20px; /* row-gap column-gap */ justify-items: start | end | center | stretch; align-items: start | end | center | stretch; justify-content: start | end | center | space-between | space-around | space-evenly; align-content: start | end | center | space-between | space-around | space-evenly; } .item { grid-column: 1 / 3; /* start / end */ grid-row: 1 / span 2; /* Shorthand: grid-area: row-start / column-start / row-end / column-end; */ } Styling & Responsive Design Typography font-family , font-size , font-weight , font-style line-height , text-align , text-decoration , letter-spacing , word-spacing color (for text) Colors, Backgrounds & Borders Colors: color: #RRGGBB; , rgb(r,g,b); , rgba(r,g,b,a); , hsl(h,s,l); , hsla(h,s,l,a); , named colors. Background: background-color , background-image , background-position , background-repeat , background-size , background-attachment . Shorthand: background: #fff url(...) no-repeat center/cover; Border: border-width , border-style , border-color . Shorthand: border: 1px solid #ccc; border-radius : Rounds corners. box-shadow , text-shadow : Adds shadows. Responsive Design Media Queries: @media (min-width: 768px) and (max-width: 1024px) { /* CSS rules for tablets */ } @media (max-width: 600px) { /* CSS rules for mobile */ } @media print { /* ... */ } Viewport Units: vw (viewport width), vh (viewport height), vmin , vmax . Fluid Images: img { max-width: 100%; height: auto; display: block; } CSS Animations & Transitions Transitions (Simple state changes) Smoothly animate changes in CSS properties. Properties: transition-property : Which properties to animate (e.g., all , opacity , transform ). transition-duration : How long the animation takes (e.g., 0.5s , 500ms ). transition-timing-function : Speed curve (e.g., ease , linear , ease-in-out , cubic-bezier() ). transition-delay : When the animation starts. Shorthand: transition: property duration timing-function delay; .button { background-color: blue; transition: background-color 0.3s ease-in-out; } .button:hover { background-color: red; } Transforms (2D/3D manipulation) transform: translate(x, y); (move) transform: translateX(x); , translateY(y); transform: scale(x, y); (resize) transform: rotate(angle); (rotate, e.g., 45deg ) transform: skew(x-angle, y-angle); (slant) transform-origin: center center; (point of transformation) 3D: translate3d() , scale3d() , rotateX() , rotateY() , rotateZ() , perspective() . backface-visibility: hidden; (hides back face of transformed elements) Keyframe Animations (Complex, multi-step animations) Define animation steps using @keyframes . Properties: animation-name : Name of the @keyframes rule. animation-duration : Length of one cycle. animation-timing-function : Speed curve. animation-delay : Start delay. animation-iteration-count : Number of times to play (e.g., infinite , 3 ). animation-direction : normal , reverse , alternate , alternate-reverse . animation-fill-mode : What styles apply before/after ( none , forwards , backwards , both ). animation-play-state : running or paused . Shorthand: animation: name duration timing-function delay iteration-count direction fill-mode play-state; @keyframes fade-in { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .element { animation: fade-in 1s ease-out forwards; } CSS Animation Style Elements for Web Design Hover Effects: Buttons, cards, images. Use transition on transform , opacity , background-color , box-shadow . .card { transition: transform 0.3s ease; } .card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } Loading Spinners: Use @keyframes with rotate on a pseudo-element or SVG. @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinner::after { animation: spin 1s linear infinite; } Page Transitions: Animate elements in/out when navigating, often with JavaScript triggers. Scroll-triggered Animations: Elements animate into view as user scrolls. Parallax Scrolling: Background content moves slower than foreground content. Hero Section Animations: Text, images, or elements fading/sliding into view on page load. Interactive Form Elements: Input field focus effects, validation feedback. Menu/Navigation Effects: Smooth dropdowns, hamburger menu transitions. Image Galleries/Carousels: Smooth transitions between images. Micro-interactions: Subtle feedback for user actions (e.g., button clicks, toggles). CSS Tips & Tricks Use CSS Variables: Define global values for colors, fonts, spacing. :root { --primary-color: #007bff; --font-stack: 'Helvetica Neue', sans-serif; } body { font-family: var(--font-stack); color: var(--primary-color); } Reset/Normalize CSS: Ensure consistent styling across browsers (e.g., Normalize.css or a simple reset). * { margin: 0; padding: 0; box-sizing: border-box; } BEM Naming Convention: Keep CSS organized and modular (Block__Element--Modifier). Mobile-First Approach: Design for smallest screens first, then use media queries to enhance for larger screens. Use `rem` for Font Sizes: For better accessibility and scaling. 1rem = root font-size . Use `em` for Component-Relative Sizing: For padding/margin relative to parent font size. Shorthand Properties: Use them for brevity (e.g., margin: 10px 20px; ). `object-fit` for Images: Control how images fill their containers ( cover , contain ). `clip-path` for Complex Shapes: Create non-rectangular shapes. `filter` Property: Apply graphic effects like blur, sepia, grayscale. Performance: Avoid expensive properties in animations (e.g., width , height , margin , padding ). Prefer transform and opacity . Minimize repaint and reflow. Use hardware acceleration for animations ( transform: translateZ(0); or will-change: transform, opacity; ). Vendor Prefixes: For experimental or older browser support (e.g., -webkit- , -moz- ). Use autoprefixer tools. Animation Tips & Tricks Keep it Subtle: Over-animation can be distracting. Less is often more. Performance First: Prioritize smooth animations over complex ones. Aim for 60fps. Use `transform` & `opacity`: These properties are optimized by browsers for animation. `will-change` Property: Hint to the browser about properties that will change, allowing optimization. .element:hover { will-change: transform, background-color; } Easing Functions are Key: `ease-in-out` is often a good default, but experiment with `cubic-bezier()` for unique feels. Stagger Animations: Apply delays to elements in a sequence to create more dynamic effects. Infinite Animations for Loaders: Use animation-iteration-count: infinite; . `animation-fill-mode: forwards;` : Ensures the element retains the styles of its final keyframe. Accessibility: Provide options to reduce motion for users who prefer it (e.g., via @media (prefers-reduced-motion) ). @media (prefers-reduced-motion) { .animated-element { animation: none !important; transition: none !important; } } Use SVG for Complex Animations: SVG can be animated directly with CSS or JavaScript for vector graphics. States for Animations: Define initial, active, hover, and end states clearly.