Description and Basic Syntax
CSS (Cascading Style Sheets) is a stylesheet language that controls the presentation layer of web documents. It transforms raw HTML structure into visually appealing, responsive, and interactive user interfaces.
Core Principles:
Separation of Concerns: Structure (HTML) vs. Presentation (CSS)
Cascade: Multiple style rules can apply to the same element
Inheritance: Child elements inherit certain properties from parents
Specificity: Determines which styles win when conflicts occur
CSS terminology
Anatomy of a CSS rule
/* Selector { Property: Value; } */
h1 { color: blue; }
/* Complete rule with multiple declarations */
.card {
background-color: white; /* Declaration 1 */
border-radius: 8px; /* Declaration 2 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Declaration 3 */
}Selectors: Patterns that target HTML elements
Properties: Aspects of elements you want to style (color, size, position)
Values: Settings applied to properties
Declaration: A property-value pair
Rule/Ruleset: Selector(s) + declaration block
How CSS is applied
Three ways to add CSS
The Cascade and Inheritance
CSS applies styles based on three factors:
Source Order: Later rules override earlier ones
Specificity: More specific selectors win
Importance:
!importantoverrides everything (use sparingly)
When two rules target the same element with the same property, the last one in your code wins—this is why it's called "cascading." Understanding this helps you debug why certain styles aren't appearing as expected.
CSS Selectors
Basic Selectors
Selectors are patterns that tell CSS which HTML elements to target—from very broad (the * universal selector hits everything) to very specific (IDs target a single unique element). Attribute selectors let you style elements based on their HTML attributes, like styling all links that go to PDFs differently.
Pseudo-Classes and Pseudo-Elements
Pseudo-classes target elements in specific states or positions, like :hover for when someone moves their mouse over something, or :nth-child(2n) for every even item in a list. These let you create interactive effects and pattern-based styling without adding extra classes to your HTML.
Pseudo-elements let you style specific parts of elements (like ::first-line) or even inject content (::before and ::after) without adding extra HTML. They're powerful for decorative elements and typography effects that would otherwise require cluttering your markup.
Advanced Selectors
Combinators describe relationships between elements—a space means "anywhere inside," > means "direct child only," + means "immediately after," and ~ means "any sibling after."
Specificity calculation
Specificity determines which styles apply when multiple rules target the same element.
Specificity Hierarchy (0-0-0-0)
CSS uses a point system to determine which rule wins when multiple rules target the same element—inline styles beat everything, IDs are stronger than classes, classes are stronger than element selectors. This hierarchy prevents chaos when you have conflicting styles, though it can be frustrating until you understand it.
The Box Model
Every element is a rectangular box with content, padding, border, and margin:
Box Model properties
Every element has an onion-like structure: content in the center, padding around that, a border around the padding, and margin pushing other elements away on the outside. The shorthand syntax lets you set values for all four sides at once, using patterns like padding: 10px 20px (vertical, then horizontal).
Understanding box-sizing
By default, when you set width to 300px and add 20px padding, your element actually becomes 340px wide—confusing! Setting box-sizing: border-box makes width include padding and border, so 300px stays 300px, making layouts much more predictable.
Display property
Controls how elements behave in the document flow:
The display property fundamentally changes how an element behaves: block elements take up the full width and start new lines (like paragraphs), inline elements flow with text (like links), and flex/grid unlock powerful layout systems. Choosing the right display value is the foundation of any layout.
Modern layout systems
Flexbox (one-dimensional layout)
Flex container: Flexbox is perfect for one-dimensional layouts (either a row or column) and gives you superpowers for alignment: justify-content controls spacing along your main direction, align-items controls the perpendicular direction, and gap adds consistent spacing between items without margin math.
Flex items: Items inside a flex container can grow (flex-grow: 1) to fill available space, shrink when needed, or stay a specific size. The shorthand flex: 1 tells an item "take up equal space with your siblings," which is incredibly useful for responsive layouts.
Common flexbox patterns: These are real-world solutions you'll use constantly: centering anything with just two properties, creating navigation bars with space between items, and making responsive card grids that automatically wrap. Memorizing these patterns will speed up your development significantly.
CSS Grid (two-dimensional layout)
Grid container: Grid is the most powerful CSS layout system, letting you define both rows and columns at once. The fr unit means "fraction of available space," so 1fr 2fr 1fr creates three columns where the middle one is twice as wide as the others, and repeat(auto-fit, minmax(200px, 1fr)) creates a responsive grid that automatically adjusts column count.
Grid items: Grid items can span multiple cells using row/column numbers, or you can name areas in your grid template and assign items to them by name (much more readable). This level of control makes complex layouts straightforward instead of hack-y.
Responsive grid example: The auto-fill pattern with minmax is magic: it automatically creates as many columns as will fit (minimum 250px each), and those columns grow to fill space. This gives you responsive layouts without writing media queries.
Positioning
Position values: Positioning removes elements from normal document flow: relative lets you nudge an element from where it would normally be, absolute positions relative to the nearest positioned ancestor, fixed sticks to the viewport (like sticky headers), and sticky is a hybrid that acts relative until you scroll past it, then becomes fixed.
Common patterns: These solve frequent design challenges: centering with absolute positioning uses a trick where you move the element's top-left corner to the center, then shift it back by half its size with transform. The inset: 0 shorthand is cleaner than writing all four directions separately for overlays.
CSS custom properties (variables)
Define variables: CSS variables (custom properties) let you store values like colors and spacing in one place, then reuse them throughout your stylesheet. They're defined with --name syntax and used with var(--name), making it easy to maintain consistent design systems and create theme switching.
Use variables and dynamic changes: Variables can reference other variables with calc(), creating mathematical relationships in your design. The real power is that variables can be scoped to elements or changed dynamically, so you can create dark themes just by redefining color variables at the root level.
Responsive Design
Media Queries
Mobile-first approach: Modern responsive design starts with mobile styles as the base, then uses min-width media queries to progressively enhance for larger screens. This approach ensures your site works on small screens first (where most traffic comes from), then adds complexity for devices that can handle it.
Other media query features: Media queries can respond to more than just screen width: orientation detects if the device is rotated, prefers-color-scheme respects system dark mode settings, and prefers-reduced-motion helps users who find animations uncomfortable. Container queries are newer and let elements respond to their container's size instead of the viewport.
Responsive Units
Viewport units (vh, vw) size things relative to the browser window, rem sizes relative to the root font size (making everything scalable), and clamp() sets a responsive value with minimum and maximum bounds. The clamp() function is particularly powerful for fluid typography that grows with screen size but never gets too small or too large.
Transforms and Transitions
Transforms: Transforms move, rotate, scale, or skew elements without affecting document flow, making them perfect for animations. You can chain multiple transforms together in one property, and transform-origin lets you control the pivot point (useful for rotating things around corners instead of centers).
Common transition pattern: Transitions animate changes between states smoothly—instead of a button instantly changing color when hovered, it fades over 0.3s. This pattern of setting transition on the base state and different values on :hover is the foundation of interactive UI feedback that feels polished.
Animations
Define keyframes and apply: While transitions animate between two states, animations give you full control over multiple steps in the sequence using keyframes. You define what happens at different points (from/to or percentages), then apply the animation to elements with control over duration, timing, delays, and whether it repeats or plays in reverse.
Modern CSS features
CSS Logical Properties
Logical properties use "start/end" instead of "left/right," making your CSS automatically work for languages that read right-to-left (like Arabic or Hebrew). This internationalization-friendly approach means you write code once that works globally, rather than maintaining separate stylesheets for different text directions.
Aspect ratio
The aspect-ratio property maintains proportional width-to-height relationships as elements resize, which used to require padding hacks. Now you can simply say "keep this video container at 16:9 no matter the screen size" with one line of code.
CSS functions
CSS functions perform calculations and comparisons: calc() does math with mixed units, min()/max() pick the smaller/larger value, and clamp() sets a value with boundaries. These make your CSS truly responsive and adaptive without JavaScript.
CSS Architecture Patterns
BEM (Block Element Modifier)
BEM (Block Element Modifier) is a naming convention that makes relationships clear: .card is the component, .card__header is a part of that component, and .card--featured is a variation. This prevents naming conflicts and makes it obvious which styles affect which elements in large projects.
Utility-First (similar to Tailwind)
Examples of CSS patterns for modern web apps
Loading Spinner
Card Component
Modal Overlay
Last updated
Was this helpful?