40 Intermediate CSS Tutorials
1. Flexbox Layout
Flexbox is a CSS layout module for one-dimensional layouts, enabling flexible alignment and distribution of items within a container.
Example: Centering items with Flexbox.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
background: #e2e8f0;
}
.item {
background: #3182ce;
color: white;
padding: 10px;
}Note: Use flex-wrap for responsive layouts. Flexbox is ideal for dynamic alignments.
2. CSS Grid Basics
CSS Grid creates two-dimensional layouts with rows and columns, offering precise control over complex designs.
Example: A simple 2x2 grid.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.item {
background: #3182ce;
color: white;
padding: 10px;
}Note: Use grid-template-areas for named regions. Grid excels in complex layouts.
3. CSS Variables
CSS custom properties (variables) store reusable values, making styles easier to maintain and update.
Example: Defining and using variables.
:root {
--primary-color: #3182ce;
}
.box {
background: var(--primary-color);
color: white;
padding: 10px;
}Note: Scope variables in :root for global use. Update dynamically with JavaScript.
4. Media Queries
Media queries apply styles based on device characteristics, enabling responsive designs for different screen sizes.
Example: Responsive font size.
.text {
font-size: 16px;
}
@media (max-width: 768px) {
.text {
font-size: 14px;
}
}Responsive text (resize window to see change)
Note: Use mobile-first design with min-width for efficiency. Test on multiple devices.
5. CSS Transitions
Transitions smoothly animate property changes, enhancing user experience with effects like fades or slides.
Example: Hover transition for background color.
.box {
background: #3182ce;
transition: background 0.3s ease;
}
.box:hover {
background: #2b6cb0;
}Note: Specify transition properties for performance. Avoid animating layout properties like width.
6. CSS Animations
Animations define keyframes for complex, multi-step effects, running independently of user actions.
Example: Fade animation.
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fade 2s infinite;
}Note: Use animation-fill-mode to control end states. Optimize for performance.
7. CSS Pseudo-Classes
Pseudo-classes like :hover or :nth-child style elements based on state or position.
Example: Styling odd list items.
li:nth-child(odd) {
background: #e2e8f0;
}- Item 1
- Item 2
- Item 3
Note: Combine pseudo-classes for complex selections. Check browser compatibility for newer ones.
8. CSS Pseudo-Elements
Pseudo-elements like ::before or ::after style specific parts of an element, like adding decorative content.
Example: Adding a prefix with ::before.
.text::before {
content: '★ ';
color: #dd6b20;
}Text with star
Note: Use content for text or icons. Avoid overuse for accessibility.
9. Box Shadow
The box-shadow property adds shadow effects to elements, enhancing depth and visual hierarchy.
Example: Soft shadow on a card.
.card {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 15px;
background: white;
}Note: Use multiple shadows for complex effects. Optimize for performance on large pages.
10. Text Shadow
The text-shadow property adds shadows to text, improving readability or adding decorative effects.
Example: Neon text effect.
.text {
text-shadow: 0 0 10px #3182ce, 0 0 20px #3182ce;
color: white;
}Neon text
Note: Use subtle shadows for readability. Avoid overuse on small text.
11. CSS Filters
Filters apply visual effects like blur, brightness, or grayscale to elements, often used for images or UI enhancements.
Example: Applying a blur filter.
.image {
filter: blur(5px);
}Note: Combine filters for complex effects. Test performance on animations.
12. Transform Property
The transform property applies 2D/3D transformations like rotate, scale, or translate to elements.
Example: Rotating an element on hover.
.box {
transform: rotate(0deg);
transition: transform 0.3s ease;
}
.box:hover {
transform: rotate(45deg);
}Note: Use transform for animations to leverage GPU acceleration.
13. CSS Clip-Path
The clip-path property creates custom shapes by clipping elements, used for creative designs.
Example: Circular clip-path.
.circle {
clip-path: circle(50%);
background: #3182ce;
}Note: Use SVG paths for complex shapes. Browser support is strong but verify.
14. CSS Gradients
Gradients create smooth color transitions, used for backgrounds or overlays, with linear or radial options.
Example: Linear gradient background.
.gradient {
background: linear-gradient(to right, #3182ce, #2b6cb0);
}Note: Use repeating-linear-gradient for patterns. Test cross-browser rendering.
15. CSS Positioning
The position property controls element placement, with values like relative, absolute, or fixed for advanced layouts.
Example: Fixed header.
.header {
position: fixed;
top: 0;
width: 100%;
background: #1a202c;
color: white;
}Note: Use z-index to control stacking. Avoid overuse of absolute positioning.
16. CSS Z-Index
The z-index property controls stacking order of positioned elements, determining which appears on top.
Example: Overlapping elements.
.box1 {
position: absolute;
z-index: 10;
background: #3182ce;
}
.box2 {
position: absolute;
z-index: 5;
background: #2b6cb0;
}Note: Only works with positioned elements. Use clear values to avoid conflicts.
17. CSS Overflow
The overflow property controls content that exceeds an element’s bounds, with options like scroll or hidden.
Example: Scrollable container.
.container {
overflow: auto;
height: 100px;
background: #e2e8f0;
}Long content that requires scrolling. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Note: Use overflow-x or overflow-y for directional control. Test on touch devices.
18. CSS Units
CSS units like rem, vw, or % define sizes relative to various references, enabling responsive designs.
Example: Using rem for font size.
html {
font-size: 16px;
}
.text {
font-size: 1.5rem;
}Text with rem units
Note: Prefer rem and em for accessibility. Use vw/vh for viewport-based sizing.
19. CSS Calc
The calc() function performs calculations to determine CSS property values, useful for dynamic layouts.
Example: Dynamic width calculation.
.box {
width: calc(100% - 50px);
background: #3182ce;
}Note: Ensure consistent units in calculations. Useful for responsive spacing.
20. CSS Variables in Media Queries
CSS variables can be redefined in media queries for responsive theming or dynamic styling.
Example: Responsive color variable.
:root {
--bg-color: #3182ce;
}
@media (max-width: 768px) {
--bg-color: #2b6cb0;
}
.box {
background: var(--bg-color);
}Note: Redefine variables in specific contexts for flexibility. Test across breakpoints.
21. CSS Specificity
Specificity determines which CSS rule applies based on selector weight, resolving style conflicts.
Example: Specific selector overriding.
.box {
color: blue;
}
#specific .box {
color: red;
}Note: Use tools like specificity calculators. Avoid !important for maintainability.
22. CSS Inheritance
Inheritance passes certain CSS properties (e.g., color, font) from parent to child elements, simplifying styling.
Example: Inherited font style.
.parent {
font-family: Arial, sans-serif;
}
.child {
/* Inherits font-family */
}Note: Not all properties inherit (e.g., margin). Use inherit to force inheritance.
23. CSS Combinators
Combinators like >, +, or ~ select elements based on their relationships, enabling precise targeting.
Example: Adjacent sibling combinator.
h2 + p {
color: #3182ce;
}Heading
Adjacent paragraph
Normal paragraph
Note: Use combinators for contextual styling. Avoid overly complex selectors.
24. CSS Blend Modes
The mix-blend-mode property blends element content with its background, creating visual effects.
Example: Overlay blend mode.
.blend {
mix-blend-mode: overlay;
background: #3182ce;
}Note: Test blend modes with different backgrounds. Browser support is good but verify.
25. CSS Background Properties
Background properties like background-size or background-position control image or color rendering.
Example: Cover background image.
.bg {
background: url('image.jpg') no-repeat center/cover;
height: 100px;
}Note: Use background-attachment for parallax effects. Optimize images for performance.
26. CSS Border Radius
The border-radius property rounds element corners, used for buttons, cards, or images.
Example: Rounded button.
.button {
border-radius: 25px;
background: #3182ce;
padding: 10px 20px;
color: white;
}Note: Use percentages for responsive rounding. Combine with shadows for depth.
27. CSS Opacity
The opacity property controls element transparency, affecting all child elements.
Example: Semi-transparent overlay.
.overlay {
opacity: 0.5;
background: #3182ce;
}Note: Use RGBA for background-only transparency. Consider accessibility for text readability.
28. CSS Object-Fit
The object-fit property controls how images or videos fit within their container, like cover or contain.
Example: Image scaling with object-fit.
img {
object-fit: cover;
width: 100px;
height: 100px;
}Note: Use object-position to adjust focal points. Ideal for responsive media.
29. CSS Aspect Ratio
The aspect-ratio property maintains an element’s width-to-height ratio, useful for responsive media or containers.
Example: Fixed aspect ratio for a div.
.box {
aspect-ratio: 16 / 9;
width: 100%;
background: #3182ce;
}Note: Polyfill for older browsers. Simplifies video or image containers.
30. CSS Custom Cursors
The cursor property changes the mouse pointer appearance, with custom images or predefined values.
Example: Custom cursor image.
.custom {
cursor: url('cursor.png'), auto;
}Note: Use small images (32x32) for custom cursors. Ensure fallback cursors.
31. CSS Grid Template Areas
The grid-template-areas property names grid areas for intuitive layout design.
Example: Named grid areas.
.grid {
display: grid;
grid-template-areas: "header header" "main sidebar";
grid-template-columns: 3fr 1fr;
}
.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }Note: Use quotes for area names. Simplifies complex layouts.
32. CSS Flexbox Wrapping
The flex-wrap property allows flex items to wrap onto multiple lines for responsive layouts.
Example: Wrapping flex items.
.container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.item {
flex: 1 1 150px;
background: #3182ce;
}Note: Use flex-basis for item sizing. Ideal for dynamic grids.
33. CSS Sticky Positioning
The position: sticky property keeps elements in view while scrolling within their parent.
Example: Sticky header.
.sticky {
position: sticky;
top: 0;
background: #1a202c;
color: white;
}Scroll to see sticky effect. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Note: Requires a parent with scrollable overflow. Test in all browsers.
34. CSS Blend Modes for Background
The background-blend-mode property blends background layers, creating effects like overlays.
Example: Background blend with image.
.blend {
background: url('image.jpg'), #3182ce;
background-blend-mode: multiply;
}Note: Test blend modes with varied backgrounds. Optimize image sizes.
35. CSS Counters
CSS counters create automatic numbering for elements like lists or sections using counter-increment.
Example: Auto-numbered sections.
body {
counter-reset: section;
}
h3::before {
counter-increment: section;
content: counter(section) ". ";
}Section
Section
Note: Use counter-reset to initialize. Ideal for outlines or TOCs.
36. CSS Custom Properties in Animations
Custom properties can be animated or transitioned, enabling dynamic theme changes.
Example: Animating a color variable.
.box {
--color: #3182ce;
background: var(--color);
transition: --color 0.3s ease;
}
.box:hover {
--color: #2b6cb0;
}Note: Not all browsers support variable transitions. Use fallbacks for compatibility.
37. CSS Scroll Snap
Scroll snap aligns scrolling content to specific points, enhancing carousel or section navigation.
Example: Horizontal scroll snap.
.container {
scroll-snap-type: x mandatory;
overflow-x: auto;
display: flex;
}
.item {
scroll-snap-align: start;
flex: 0 0 100%;
}Note: Test on touch devices. Use scroll-snap-stop for control.
38. CSS Logical Properties
Logical properties like margin-inline adapt to writing modes, supporting multilingual layouts.
Example: Logical margin.
.box {
margin-inline: 20px;
background: #3182ce;
}Note: Use for RTL or vertical text layouts. Check browser support.
39. CSS Subgrid
The subgrid value allows nested grids to inherit parent grid tracks, aligning content precisely.
Example: Nested subgrid.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.subgrid {
display: grid;
grid-template-columns: subgrid;
}Note: Subgrid support is growing. Use fallbacks for older browsers.
40. CSS Container Queries
Container queries apply styles based on the size of a parent container, enabling modular responsive design.
Example: Container query for card styling.
.container {
container-type: inline-size;
}
.card {
background: #e2e8f0;
}
@container (min-width: 300px) {
.card {
background: #3182ce;
color: white;
}
}Note: Container queries are new; use feature detection. Ideal for component-based designs.