CSS3 Pocket Book — Uplatz
50 deep-dive flashcards • Wide layout • Fewer scrolls • 20+ Interview Q&A • Readable examples
1) What is CSS3?
CSS3 is the latest evolution of Cascading Style Sheets, offering new selectors, properties, animations, transitions, flexbox, grid, and media queries for responsive design. It’s backward-compatible and modularized into separate specifications.
/* Example of CSS3 selector */
nav > ul > li:hover {
background-color: #e0f7fa;
}2) Selectors: Advanced
CSS3 introduced attribute selectors, pseudo-classes like :nth-child, :not, and pseudo-elements like ::before. These enhance styling precision and DRY principles.
input[type="text"]:not(:disabled) {
border-color: #38bdf8;
}3) Box Model & Box-Sizing
By default, total element width = content + padding + border. box-sizing: border-box includes padding/border inside width/height, simplifying layouts.
*, *::before, *::after {
box-sizing: border-box;
}4) Flexbox: Layout Made Easy
Use flexbox for 1D layouts. Align items along main/cross axes, reorder with order, and space with gap. It simplifies vertical centering.
.container {
display: flex;
align-items: center;
justify-content: space-between;
}5) CSS Grid: 2D Layout
CSS Grid provides powerful 2D layout control with named lines, areas, and flexible tracks. Combine with media queries for full responsiveness.
.grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 16px;
}6) Transitions & Animations
Transitions animate property changes smoothly. Use @keyframes for custom animations. Control duration, timing, delay, and direction.
.fade {
transition: opacity 0.3s ease;
}
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}7) Media Queries
Media queries enable responsive design. Adjust styles based on viewport size, resolution, orientation, etc. Combine with mobile-first strategy.
@media (max-width: 768px) {
.sidebar { display: none; }
}8) Variables (Custom Properties)
CSS variables improve maintainability. Declare with --name, access via var(), and cascade naturally.
:root {
--brand-color: #2563eb;
}
.button {
background: var(--brand-color);
}9) Filters & Blend Modes
CSS3 adds visual effects via filter (blur, grayscale) and mix-blend-mode (multiply, overlay). Use with images, backgrounds, or overlays.
.photo {
filter: grayscale(100%);
mix-blend-mode: multiply;
}10) Q&A — “How does CSS3 help modern web design?”
Answer: CSS3 brings modular specs that evolve separately, enabling better layout (grid, flexbox), effects (animations, filters), responsiveness (media queries), and maintainability (variables). It empowers design systems, theming, and accessible, performant UIs across devices.