Learn CSS
Design beautiful layouts with CSS - selectors, flexbox, grid, and animations.
0 of 10 concepts completed (0%)
What You'll Learn
Tutorial Contents
1.Selectors & Specificity
Understanding selector specificity prevents the most common CSS frustration styles not applying as expected.
Specificity calculated as (inline, ID, class, element):
p { color: black; } /* 0,0,0,1 element */
.intro { color: blue; } /* 0,0,1,0 class */
p.intro { color: green; } /* 0,0,1,1 class + element *//* Pseudo-classes and attribute selectors */ a:hover { text-decoration: underline; } input[type="text"] { border: 1px solid #ccc; }
/* Combinators */ .nav > a { /* direct children only */ } h2 + p { /* immediately following sibling */ } h2 ~ p { /* any following sibling */ } ```
2.Flexbox Deep Dive
Flexbox is for one-dimensional layouts (row OR column). Perfect for nav bars, card groups, and centered content.
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between; /* main axis */
align-items: center; /* cross axis */
gap: 1rem;.flex-item { flex: 1 1 200px; /* grow shrink basis */ align-self: flex-end; order: 2; }
/* Common patterns */ .navbar { display: flex; align-items: center; justify-content: space-between; } .navbar .links { margin-left: auto; } /* push to right */
.centered { display: flex; justify-content: center; align-items: center; min-height: 100vh; } ```
3.CSS Grid Layouts
Grid is for two-dimensional layouts (rows AND columns). Use it for page layouts, card grids, and alignment across both axes.
/* Responsive card grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;/* Named template areas */ .page-layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-rows: 80px 1fr 60px; grid-template-columns: 250px 1fr; min-height: 100vh; } .header { grid-area: header; } .sidebar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-area: footer; }
/* Spanning */ .full-width { grid-column: 1 / -1; } .tall-card { grid-row: span 2; } ```
4.Custom Properties & Theming
CSS custom properties are the foundation of maintainable theming. Changing your entire site's color scheme becomes trivial.
:root {
--color-primary: #6200ee;
--color-surface: #ffffff;
--color-on-surface: #1a1a2e;
--color-error: #b00020;
--spacing-md: 1rem;
--radius-lg: 1rem;
--shadow-md: 0 4px 12px rgba(0,0,0,0.15);
--transition: 200ms ease-in-out;[data-theme="dark"] { --color-surface: #121212; --color-on-surface: #e0e0e0; --color-primary: #bb86fc; }
.card { background: var(--color-surface); color: var(--color-on-surface); border-radius: var(--radius-lg); padding: var(--spacing-md); box-shadow: var(--shadow-md); transition: box-shadow var(--transition); }
/* Fallback values */ .element { color: var(--color-text, #333); } ```
5.Animations & Transitions
CSS animations and transitions improve perceived performance and guide user attention.
.button {
transition: background 200ms ease, transform 150ms ease;
}
.button:hover {
background: #7722aa;
transform: translateY(-2px);
}
.button:active {
transform: translateY(0);
transition-duration: 80ms;@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
.card-enter { animation: fadeInUp 0.4s ease forwards; } .loader { animation: spin 0.8s linear infinite; }
/* Respect user accessibility preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ```
Code Example
/* Flexbox layout */
.container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
/* Grid layout */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
/* Animation */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element { animation: fadeIn 0.3s ease-in; }Pro Tips
- 1Always write CSS mobile-first (min-width queries). It's easier to add complexity at larger sizes than to subtract it.
- 2Use CSS custom properties (variables) for all color values and spacing. Changing a theme becomes a 5-second job instead of a 5-hour find-and-replace.
- 3Avoid setting fixed heights on elements let content determine height and use min-height when needed.
- 4The BEM naming convention (Block__Element--Modifier) prevents specificity wars in large stylesheets.
Topics Covered
Continue Learning
Explore the official documentation and deepen your knowledge with real-world practice.
Explore the Full Portfolio
This is the complete portfolio of Sufi Khan Sulaiman, a technology leader specialising in B2B commerce and digital automation. Start from the Home page for the overview, then move through two decades of career experience across FLIR Systems, Lorex Technology, and 1c Platform, and the full catalogue of project case studies spanning headless commerce migrations, AI recommendation engines, and multi-channel fulfilment systems.
The skills and certifications page maps the technical and leadership capabilities behind the work, while the articles and the knowledge base break down the thinking into actionable frameworks. For hands-on learning, the tutorials and applications sections cover practical builds from front-end fundamentals to full-stack web apps.
For consulting engagement, the expertise page outlines service offerings, the ecommerce hub covers platform architecture and automation strategy, and the ecommerce guide (PDF) is a downloadable 55-page field manual. When you are ready to talk, the contact page is the direct line.