CSS formatting
Discover the power of CSS stylesheets to transform your web pages! This lesson will guide you through the world of cascading styles, modern variables, and animations that will bring your user interfaces to life.
Educational objectives
- Explain how cascading style sheets work and their priority.
- Create inline styles and use different types of CSS selectors
- Mastering CSS variables (design tokens) for visual consistency
- Implementing modern layouts with Flexbox and Grid
- Designing UI animations with transitions and keyframes
The principle of the waterfall
CSS stands for Cascading Style Sheets. The term "cascading" refers to the priority mechanism that determines which styles are applied when multiple rules target the same element. This cascade follows a specific order: inline styles have the highest priority, followed by IDs, classes, and then elements. Understanding this system is essential for mastering CSS and avoiding unexpected style conflicts.
Essential Selector Types
Selectors are key to precisely targeting HTML elements. The element selector (p, h1, div) targets all elements of that type. The class selector (.my-class) allows you to style multiple elements sharing the same class. The ID selector (#my-id) targets a single element. Combined selectors allow for more precise targeting: .container p targets all paragraphs within a container, while h1 + p targets the first paragraph following an h1 heading.
Key point CSS specificity is calculated using this formula: inline (1000), IDs (100), classes (10), elements (1). The higher the value, the higher the style's priority.
Key points to remember
CSS selectors allow you to precisely target elements, and the cascade determines which style applies in case of conflict according to a priority system based on specificity.
🎯 Mini-exercise: Mastering the selectors
Apply different styles using element, class, and ID selectors to understand their priority and how they work.
Reference code:
<div class="container">
<h1 id="titre-principal">Main title</h1>
<p class="texte-intro">Introductory paragraph</p>
<p>Normal paragraph</p>
<div class="card">
<h2>Subtitle</h2>
<p class="texte-intro">Another paragraph</p>
</div>
</div>
/* Element selector - low specificity */ p { color: gray; font-size: 16px; } /* Class selector - medium specificity */ .texte-intro { color: blue; font-weight: bold; } /* ID selector - high specificity */ #titre-principal { color: red; font-size: 32px; } /* Combined selector */ .container h2 { color: green; border-bottom: 2px solid green; }
Monaco Editor v0.45
Understanding CSS variables
CSS variables, officially called custom properties, are revolutionizing how we manage recurring values in our stylesheets. They are defined using the syntax `--variable-name` and accessed with the `var()` function. These variables allow us to centralize important values such as colors, spacing, and font sizes, thus facilitating maintenance and global modifications. Unlike preprocessor variables, CSS variables are dynamic and can be modified in real time via JavaScript.
Design tokens in practice
Design tokens are a systematic approach to storing design decisions as reusable variables. They create a common language between designers and developers by precisely defining primary and secondary colors, spacing, typography, and shadows. This approach ensures visual consistency across a project and facilitates changes to the design system. In CSS, design tokens integrate seamlessly with CSS variables, creating a scalable and maintainable architecture.
Key point CSS variables inherit from their parent element and can be redefined in specific contexts, offering unique flexibility for creating responsive themes.
Key points to remember
CSS variables transform style maintenance by centralizing values and enabling instant global changes, forming the basis of modern design systems.
🎯 Mini-exercise: Create a color system
Define CSS variables to create a consistent color palette and apply it to different interface components.
Reference code:
<div class="theme-demo">
<header class="header">
<h1>My Website</h1>
</header>
<main>
<div class="card primary">
<h2>Main map</h2>
<p>Important content</p>
</div>
<div class="card secondary">
<h2>Secondary map</h2>
<p>Additional content</p>
</div>
</main>
</div>
:root { /* Design tokens - Colors */ --color-primary: #667eea; --color-secondary: #f093fb; --color-background: #f8fafc; --color-text: #2d3748; --color-text-light: #718096; /* Design tokens - Spacing */ --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; /* Design tokens - Borders */ --border-radius: 8px; } .theme-demo { background: var(--color-background); color: var(--color-text); padding: var(--spacing-lg); min-height: 100vh; } .header { background: var(--color-primary); color:white; padding: var(--spacing-md); border-radius: var(--border-radius); margin-bottom: var(--spacing-lg); } .card { padding: var(--spacing-md); margin-bottom: var(--spacing-md); border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .card.primary { background: var(--color-primary); color:white; } .card.secondary { background: var(--color-secondary); color:white; }
Monaco Editor v0.45
Fundamental concepts of Flexbox
Flexbox (Flexible Box Layout) is a one-dimensional layout system that excels at distributing space and aligning elements within a container. It operates along two axes: the main axis, defined by `flex-direction`, and the perpendicular cross axis. The parent container becomes a `flex container` with `display: flex`, and its direct children automatically become `flex items`. This approach elegantly solves classic problems such as vertical centering, even space distribution, and automatic element resizing.
Essential properties for mastering Flexbox
Key container properties include `justify-content` for alignment with the main axis, `align-items` for the cross axis, and `flex-direction` to define the orientation. On child elements, `flex-grow` controls the expansion capacity, `flex-shrink` the contraction, and `flex-basis` the base size. The shorthand property `flex` combines these three values. These properties provide precise control over the adaptive behavior of elements, allowing the creation of interfaces that naturally adjust to different screen sizes.
Key point Flexbox is ideal for interface components such as navigation bars, maps, or forms, where you need to align and distribute elements flexibly.
Key points to remember
Flexbox simplifies the alignment and distribution of elements in a dimension, offering powerful control to create adaptive and well-structured interfaces.
🎯 Mini-exercise: Flexible navigation
Create a responsive navigation bar with Flexbox that centers elements and automatically adapts to the available width.
Reference code:
<nav class="navbar">
<div class="nav-brand">My Website</div>
<ul class="nav-menu">
<li><a href="#">Welcome</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="nav-actions">
<button>Login</button>
</div>
</nav>
<div class="content">
<div class="card-container">
<div class="card">Map 1</div>
<div class="card">Map 2</div>
<div class="card">Map 3</div>
</div>
</div>
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #667eea; color:white; } .nav-brand { font-size: 1.5rem; font-weight: bold; } .nav-menu { display: flex; list-style: none; gap: 2rem; margin: 0; padding: 0; } .nav-menu a { color: white; text-decoration: none; transition: opacity 0.2s; } .nav-menu a:hover { opacity: 0.8; } .nav-actions button { background: white; color: #667eea; border:none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; } .content { padding: 2rem; } .card-container { display: flex; gap: 1rem; flex-wrap:wrap; } .card { flex: 1; min-width: 200px; padding: 2rem; background: #f8fafc; border-radius: 8px; text-align: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
Monaco Editor v0.45
The power of CSS Grid
CSS Grid is a two-dimensional layout system that excels at creating complex layouts. Unlike Flexbox, which manages only one dimension, Grid allows you to control both rows and columns simultaneously, creating a structured grid. It defines explicit areas for placing elements, offering precise control over spacing and alignment. Grid is particularly well-suited for core website layouts, such as column layouts, image galleries, or complex dashboard interfaces.
Syntax and fundamental properties
The Grid container is defined with `display: grid`, followed by `grid-template-columns` and `grid-template-rows` to structure the grid. The `grid-gap` (now `gap`) property controls the spacing between elements. Children can be explicitly positioned with `grid-column` and `grid-row`, or `grid-area` can be used to occupy named areas. The `repeat()` function and `fr` (fraction) units simplify the creation of repeating and flexible grids. These tools allow for the creation of sophisticated layouts with remarkably concise CSS code.
Key point Use Grid for the overall structure of your page (header, main, sidebar, footer) and Flexbox for aligning components within these areas.
Key points to remember
CSS Grid revolutionizes web layouts by enabling precise two-dimensional control, ideal for creating complex structures with simple and maintainable code.
🎯 Mini-exercise: Modern page layout
Create a complete layout with header, sidebar, main content and footer using CSS Grid for a clear and responsive structure.
Reference code:
<div class="page-layout">
<header class="header">
<h1>Site header</h1>
</header>
<aside class="sidebar">
<h3>Navigation</h3>
<ul>
<li>Welcome</li>
<li>Items</li>
<li>Contact</li>
</ul>
</aside>
<main class="main-content">
<h2>Main content</h2>
<p>This is the main content area of the page.</p>
<div class="content-grid">
<div class="card">Article 1</div>
<div class="card">Article 2</div>
<div class="card">Article 3</div>
<div class="card">Article 4</div>
</div>
</main>
<footer class="footer">
<p>Footer © 2024</p>
</footer>
</div>
.page-layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; min-height: 100vh; gap: 1rem; } .header { grid-area: header; background: #667eea; color:white; padding: 1rem; text-align: center; } .sidebar { grid-area: sidebar; background: #f8fafc; padding: 1rem; border-right: 1px solid #e2e8f0; } .sidebar ul { list-style: none; padding: 0; } .sidebar li { padding: 0.5rem; margin: 0.25rem 0; background:white; border-radius: 4px; cursor: pointer; transition: background 0.2s; } .sidebar li:hover { background: #e2e8f0; } .main-content { grid-area: main; padding: 1rem; } .content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .card { background: #f093fb; color:white; padding: 2rem; border-radius: 8px; text-align: center; font-weight: bold; } .footer { grid-area: footer; background: #2d3748; color:white; text-align: center; padding: 1rem; }
Monaco Editor v0.45
Transitions: smooth and natural animations
CSS transitions allow you to automatically animate changes to CSS properties, creating smoother and more pleasing interfaces. The `transition` property defines which properties to animate, the duration, the timing function, and the delay. Acceleration functions like `ease-in-out` create natural movements that mimic real-world physics. Transitions are ideal for user interactions such as button hovers, state changes, and content reveal. They significantly improve the user experience by providing consistent visual feedback.
Keyframes and advanced micro-interactions
Keyframes (@keyframes) offer complete control over animations by defining precise steps. They allow you to create complex, cyclical, or sequential animations that don't depend on user interaction. Micro-interactions, these small, subtle animations, guide attention, confirm actions, and make the interface feel alive. They include loading effects, visual confirmations, and appearance animations. When used judiciously, these animations reinforce the visual hierarchy and create a memorable experience without cluttering the interface.
Key point Respect the principle of parsimony: animations should serve the user experience, not distract from it. Favor short durations (200-300ms) for interactions.
Key points to remember
CSS animations, used in moderation, transform a static interface into a fluid and engaging experience, naturally guiding the user in their interactions.
🎯 Mini-exercise: Animated buttons
Create interactive buttons with hover transitions and pulse animation to draw attention to the main action.
Reference code:
<div class="button-demo">
<button class="btn btn-primary">Main Button</button>
<button class="btn btn-secondary">Secondary Button</button>
<button class="btn btn-pulse">Important Action</button>
<div class="card-animated">
<h3>Interactive Map</h3>
<p>Hover over this map to see the animation</p>
</div>
</div>
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .button-demo { padding: 2rem; display:flex; flex-direction: column; gap: 1rem; align-items: center; } .btn { padding: 0.75rem 1.5rem; border:none; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; position: relative; overflow:hidden; } .btn-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:white; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4); } .btn-secondary { background: #f8fafc; color: #667eea; border: 2px solid #667eea; } .btn-secondary:hover { background: #667eea; color:white; transform: scale(1.05); } .btn-pulse { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color:white; animation: pulse 2s ease-in-out infinite; } .btn-pulse:hover { animation-play-state: paused; transform: scale(1.1); } .card-animated { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; margin-top: 1rem; } .card-animated:hover { transform: translateY(-5px) rotate(1deg); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
Monaco Editor v0.45
Summary
Key points to remember
- Cascade and specificity The priority of CSS styles follows a precise hierarchical system based on the selectors used.
- CSS variables Design tokens centralize values and facilitate the maintenance of consistent visual themes.
- Flexbox : A perfect one-dimensional system for the alignment and flexible distribution of elements within components
- CSS Grid An ideal two-dimensional solution for creating complex and structured layouts.
- Animations Transitions and keyframes improve the user experience by creating fluid and interactive interfaces.
Sources
📚 To deepen your knowledge:
Validate your knowledge
Test your understanding with this 10-question quiz:
