CSS, or Cascading Style Sheets, is the design language that controls how HTML elements appear in browsers.
It separates presentation from structure, letting developers apply colors, spacing, typography, and layout without touching the underlying content.
Core Syntax and Selectors
Basic Rule Structure
A CSS rule contains a selector and a declaration block.
The selector targets HTML elements, while the block holds property-value pairs wrapped in braces.
Element, Class, and ID Selectors
Element selectors style all tags of a given type, such as p { color: red; }.
Classes, prefixed with a dot, style multiple elements: .highlight { background: yellow; }.
IDs, prefixed with a hash, style one unique element: #logo { width: 120px; }.
Combinators and Pseudo-Classes
Combinators like article > p target direct child paragraphs inside article tags.
Pseudo-classes such as a:hover activate styles when users interact with links.
These patterns keep HTML clean while providing precise control.
Box Model Essentials
Margin, Border, Padding, and Content
Every element is a rectangular box made of four nested layers.
From outside to inside: margin creates space between boxes, border outlines the edge, padding adds inner space, and content holds actual text or media.
Controlling Dimensions
Width and height set the content area’s size.
Adding box-sizing: border-box; includes padding and border within those dimensions, simplifying responsive layouts.
Practical Example
A card component can be styled with .card { width: 300px; padding: 1rem; border: 1px solid #ccc; margin: 1rem auto; }.
The single rule centers the card and gives it breathing room without extra wrappers.
Layout Techniques
Flexbox
Flexbox arranges items along a single axis.
A parent container with display: flex aligns children using justify-content and align-items.
This approach solves common challenges like centering and equal-height columns with minimal code.
CSS Grid
Grid creates two-dimensional layouts using rows and columns.
Define tracks with grid-template-columns: repeat(3, 1fr); and place items with line numbers or named areas.
Grid excels at page-level structure, while flexbox handles component-level distribution.
Positioning Contexts
Static flow places elements in document order.
Relative, absolute, fixed, and sticky values shift boxes outside that flow, enabling overlays, sidebars, and pinned navigation.
Responsive Design Principles
Media Queries
Media queries apply styles based on viewport width, orientation, or resolution.
A typical breakpoint looks like @media (min-width: 768px) { .sidebar { display: block; } }.
Fluid Units
Use percentages, em, rem, vw, and vh instead of fixed pixels.
These units scale smoothly, reducing the need for numerous breakpoints.
Mobile-First Workflow
Start with narrow screen styles, then layer enhancements for larger viewports.
This strategy keeps code lean and prioritizes performance on slower networks.
Typography and Color
Font Properties
font-family, font-size, font-weight, and line-height control readability.
Pair serif headings with sans-serif body text for clear hierarchy.
Web Fonts
Load custom typefaces with @font-face or services like Google Fonts.
Always specify fallback fonts to avoid invisible text during loading.
Color Schemes
Define palettes with CSS variables: :root { --primary: #0066cc; }.
Variables centralize theming and simplify dark-mode toggles.
Transitions and Animations
Simple Transitions
Smooth property changes with transition: color 0.3s ease;.
Hover states become polished without JavaScript.
Keyframe Animations
Keyframes craft multi-step sequences: @keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(0); } }.
Attach them via animation: slide 0.5s forwards;.
Performance Tips
Animate transform and opacity for GPU acceleration.
Avoid animating layout-triggering properties like width or height.
Preprocessors and Methodologies
Sass and Less
Preprocessors add variables, nesting, and mixins to vanilla CSS.
Compile down to standard CSS before deployment, keeping browser support intact.
BEM Naming
Block Element Modifier syntax clarifies component relationships.
A button variant becomes .btn--primary, reducing cascade conflicts.
Utility Frameworks
Frameworks like Tailwind provide atomic classes such as text-center or mt-4.
They speed prototyping and enforce consistency across teams.
Accessibility and Maintenance
Semantic Considerations
Use sufficient color contrast and never remove focus outlines without replacement.
Prefer em units for scalable focus indicators.
Organizing Stylesheets
Split files by component or page section.
Comment liberally and adopt a naming convention early to ease onboarding.
Future-Proofing
Layer styles logically: reset, base, components, utilities.
This cascade prevents overrides from becoming tangled as projects grow.