CSS (Cascading Style Sheets) is the language that transforms raw HTML into visually compelling, professional websites. While HTML provides the structure, CSS delivers the styling that makes websites memorable, accessible, and performant. This tutorial covers everything from fundamental concepts to cutting-edge 2025 techniques that power modern web development with Next.js and React applications.
1/* CSS Selectors and Properties */2h1 {3 color: #2d3748;4 font-size: 2.5rem;5 font-weight: 700;6 margin-bottom: 1rem;7}8 9.button-primary {10 background-color: #3182ce;11 color: white;12 padding: 0.75rem 1.5rem;13 border-radius: 0.375rem;14 border: none;15 cursor: pointer;16}The CSS Box Model
Every HTML element is represented as a rectangular box with four layers: content, padding, border, and margin. Understanding this model is fundamental to controlling element sizing and spacing. For deeper coverage of foundational concepts, see our CSS fundamentals guide.
Layer Breakdown
| Layer | Description | Affects Element Size |
|---|---|---|
| Content | The actual content (text, images) | Yes |
| Padding | Space between content and border | Yes |
| Border | Border around padding | Yes |
| Margin | Space outside the border | No (external spacing) |
The box model determines how browser calculates the total width and height of elements. By default, width and height apply only to the content area, but you can change this with box-sizing: border-box for more predictable sizing.
CSS Selectors: Targeting Elements
Selectors are the foundation of CSS--they determine which elements receive your styles. Modern CSS offers a powerful arsenal of selectors for precise element targeting.
Type Selectors
Type selectors target elements by their HTML tag name:
p {
line-height: 1.6;
color: #4a5568;
}
div {
margin-bottom: 1.5rem;
}
Class Selectors
Class selectors target elements with a specific class attribute. Classes are reusable and can be applied to multiple elements:
.card {
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
padding: 1.5rem;
}
.card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
ID Selectors
ID selectors target unique elements. IDs should be unique within a page:
#main-navigation {
position: fixed;
width: 100%;
}
#footer {
background: #1a202c;
color: white;
}
Attribute Selectors
Target elements based on attributes:
a[href^="https://"] {
external-link-icon: url(/icon-external.svg);
}
input[type="email"] {
border-color: #3182ce;
}
[data-state="active"] {
display: block;
}
Pseudo-Classes and Pseudo-Elements
Pseudo-classes target elements in specific states, while pseudo-elements create virtual elements:
.button:hover {
background-color: #2c5282;
}
button:focus-visible {
outline: 2px solid #3182ce;
outline-offset: 2px;
}
Essential techniques for professional web development
CSS Custom Properties
Define reusable variables for colors, spacing, and animations. Enable dynamic theming with CSS-only solutions.
Flexbox Layout
One-dimensional layout system for distributing space and aligning items efficiently.
CSS Grid
Two-dimensional layout system for complex page structures and responsive designs.
Container Queries
Component-based responsive design that responds to container size, not viewport.
1/* Navigation bar */2.navbar {3 display: flex;4 justify-content: space-between;5 align-items: center;6 padding: 1rem 2rem;7}8 9/* Card container */10.card-grid {11 display: flex;12 flex-wrap: wrap;13 gap: 1.5rem;14 justify-content: center;15}16 17/* Centering content */18.centered-container {19 display: flex;20 flex-direction: column;21 align-items: center;22 justify-content: center;23 min-height: 100vh;24}1/* Main page layout */2.page-layout {3 display: grid;4 grid-template-columns: 250px 1fr;5 grid-template-rows: auto 1fr auto;6 min-height: 100vh;7 grid-template-areas:8 "header header"9 "sidebar main"10 "footer footer";11}12 13.header { grid-area: header; }14.sidebar { grid-area: sidebar; }15.main { grid-area: main; }16.footer { grid-area: footer; }17 18/* Responsive grid */19.responsive-grid {20 display: grid;21 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));22 gap: 1.5rem;23}Modern CSS Features in 2025
CSS continues to evolve with powerful new features transforming how we build web interfaces.
CSS Custom Properties (Variables)
Enable dynamic theming and reduce repetition:
:root {
--color-primary: #3182ce;
--color-secondary: #2d3748;
--spacing-unit: 1rem;
--border-radius: 0.375rem;
--transition-fast: 150ms ease;
}
.button {
background-color: var(--color-primary);
border-radius: var(--border-radius);
transition: background-color var(--transition-fast);
}
Container Queries
Component-based responsive design that responds to parent container size:
.card-container {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card {
display: grid;
grid-template-columns: 150px 1fr;
}
}
text-wrap: balance and pretty
Better typography automatically:
h1, h2 {
text-wrap: balance;
}
p {
text-wrap: pretty;
}
animate-to-auto
Smooth animations to auto height:
html {
interpolate-size: allow-keywords;
}
.accordion {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
CSS Performance Optimization
Optimized CSS directly impacts Core Web Vitals and user experience. Our web development services team specializes in building high-performance websites that score well across all metrics.
Critical CSS Strategy
Load essential styles immediately, defer non-critical CSS:
<!-- Critical CSS inlined in <head> -->
<style>
.above-fold { display: block; }
</style>
<!-- Non-critical CSS loaded asynchronously -->
<link rel="preload" href="styles.css" as="style">
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">
Reduce CSS Bloat
Use modern tooling to eliminate unused styles:
<!-- Tailwind utility classes purge unused styles -->
<div class="mt-5 p-4 bg-white"></div>
will-change for Animations
Optimize browser rendering for animations:
.slide-in {
will-change: transform, opacity;
transform: translateX(-100%);
}
Best Practices for Modern CSS
Mobile-First Responsive Design
Build for mobile first, then enhance for larger screens:
/* Base mobile styles */
.card {
padding: 1rem;
font-size: 0.875rem;
}
/* Tablet and up */
@media (min-width: 640px) {
.card { padding: 1.5rem; font-size: 1rem; }
}
/* Desktop */
@media (min-width: 1024px) {
.card { padding: 2rem; }
}
Accessibility in CSS
Ensure styles support all users:
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* Focus indicators */
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
Common Patterns
Centering Elements:
/* Flexbox method (recommended) */
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
/* Grid method */
.grid-center {
display: grid;
place-items: center;
}
Organization Approaches
Choose a methodology that scales with your project complexity:
/* BEM Methodology */
.block {
display: block;
}
.block__element {
margin: 0;
}
.block__element--modifier {
color: blue;
}
Frequently Asked Questions
What is the difference between Flexbox and Grid?
Flexbox is designed for one-dimensional layouts (either a row OR a column), while Grid excels at two-dimensional layouts (rows AND columns together). Use Flexbox for navigation bars, card layouts, and component alignment. Use Grid for page layouts and complex grid structures.
Should I use CSS variables or preprocessor variables?
CSS custom properties (variables) are native to the browser, enabling runtime updates and dynamic theming without JavaScript. Preprocessor variables compile away. CSS variables are now recommended for most use cases.
How do I optimize CSS for performance?
Key strategies include: minifying production CSS, using critical CSS for above-fold content, purging unused styles with tools like PostCSS or Tailwind, deferring non-critical styles, and using content-visibility for long pages.
What are container queries and when should I use them?
Container queries allow components to respond to their parent container's size rather than the viewport. They're ideal for reusable components that appear in different contexts, like sidebars, modals, or grid cells.
How do I make CSS animations performant?
Animate only transform and opacity properties, which are handled by the GPU. Use will-change to hint browser optimization. Avoid animating layout properties like width, height, or margin. Respect prefers-reduced-motion for accessibility.