40-css-exercises

20 Mini CSS Exercises for Beginners

Basic Selectors and Properties
Exercise 1: Text Styling
Create a paragraph with the class "intro" and style it with:

Font size: 18px

Color: navy blue

Font family: Arial

<p class="intro">Welcome to my website!</p>

.intro {
font-size: 18px;
color: #000080;
font-family: Arial, sans-serif;
}

Exercise 2: Box Model

Create a div with padding and margin:

<div class="box">This is a box</div>

.box {
background-color: lightgray;
padding: 20px;
margin: 10px;

40-css-exercises 1
 border: 2px solid black;
}

Exercise 3: Centering Content

Center a div horizontally on the page:

<div class="center-me">Center this box</div>

.center-me {
width: 200px;
margin: 0 auto;
background-color: lightblue;
padding: 10px;
}

Exercise 4: List Styling

Style an unordered list with custom bullets:

<ul class="custom-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

.custom-list {
list-style-type: square;
color: green;
padding-left: 30px;
}

Exercise 5: Links
Style links with different states:

40-css-exercises 2
 <a href="#" class="fancy-link">Hover over me!</a>

.fancy-link {
color: purple;
text-decoration: none;
}

.fancy-link:hover {
color: orange;
text-decoration: underline;
}

Intermediate Concepts
Exercise 6: Flexbox Container
Create a simple flex container with three items:

<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>

.flex-container {
display: flex;
justify-content: space-between;
padding: 10px;
}

.flex-item {
background-color: pink;

40-css-exercises 3
 padding: 20px;
}

Exercise 7: Grid Layout

Create a simple 2x2 grid:

<div class="grid-container">
<div class="grid-item">A</div>
<div class="grid-item">B</div>
<div class="grid-item">C</div>
<div class="grid-item">D</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.grid-item {
background-color: lightgreen;
padding: 20px;
text-align: center;
}

Exercise 8: Border Radius

Create a circular element:

<div class="circle">Circle</div>

.circle {
width: 100px;
height: 100px;

40-css-exercises 4
 background-color: coral;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

Exercise 9: Box Shadow

Add a shadow to a card:

<div class="card">Hover over me!</div>

.card {
padding: 20px;
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: box-shadow 0.3s ease;
}

.card:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

Exercise 10: Transform

Create a rotating element on hover:

<div class="rotate-box">↻</div>

.rotate-box {
width: 50px;
height: 50px;
background-color: yellow;
transition: transform 0.3s ease;

40-css-exercises 5
 }

.rotate-box:hover {
transform: rotate(90deg);
}

Responsive Design
Exercise 11: Media Query
Create a responsive layout:

<div class="responsive-box">This box changes color on different screen size

s</div>

.responsive-box {
padding: 20px;
background-color: blue;
color: white;
}

@media (max-width: 600px) {

.responsive-box {
background-color: red;
}
}

Exercise 12: Responsive Text

Create text that changes size based on screen width:

<h1 class="responsive-text">Responsive Heading</h1>

40-css-exercises 6
 .responsive-text {
font-size: 3vw;
color: purple;
}

Exercise 13: Responsive Images

Make an image responsive:

<img src="image.jpg" class="responsive-image" alt="responsive image">

.responsive-image {
max-width: 100%;
height: auto;
}

Styling Elements
Exercise 14: Button Styles
Create a custom button:

<button class="custom-button">Click Me</button>

.custom-button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.custom-button:hover {

40-css-exercises 7
 background-color: #45a049;
}

Exercise 15: Input Styling

Style a text input:

<input type="text" class="custom-input" placeholder="Type here...">

.custom-input {
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
width: 200px;
}

.custom-input:focus {
border-color: #4CAF50;
outline: none;
}

Exercise 16: Navigation Menu

Create a simple horizontal navigation menu:

<nav class="nav-menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>

.nav-menu {
background-color: #333;
padding: 10px;
}

40-css-exercises 8
 .nav-menu a {
color: white;
text-decoration: none;
padding: 10px;
margin: 0 5px;
}

.nav-menu a:hover {
background-color: #555;
}

Exercise 17: Table Styling

Style a simple table:

<table class="custom-table">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

.custom-table {
border-collapse: collapse;
width: 100%;
}

.custom-table td {
border: 1px solid #ddd;
padding: 8px;

40-css-exercises 9
 text-align: left;
}

.custom-table tr:nth-child(even) {
background-color: #f2f2f2;
}

Exercise 18: Opacity

Create a fade effect on hover:

<div class="fade-box">Hover to fade</div>

.fade-box {
background-color: black;
color: white;
padding: 20px;
opacity: 1;
transition: opacity 0.3s ease;
}

.fade-box:hover {
opacity: 0.7;
}

Exercise 19: Background Gradient

Create a gradient background:

<div class="gradient-box">Gradient Background</div>

.gradient-box {
height: 100px;
background: linear-gradient(to right, #ff0000, #00ff00);
color: white;

40-css-exercises 10
 display: flex;
align-items: center;
justify-content: center;
}

Exercise 20: Z-index and Positioning

Create overlapping elements:

<div class="container">
<div class="box-back">Back</div>
<div class="box-front">Front</div>
</div>

.container {
position: relative;
height: 100px;
}

.box-back {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
z-index: 1;
}

.box-front {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
left: 50px;
top: 50px;

40-css-exercises 11
 z-index: 2;
}

Each exercise builds upon basic CSS concepts and gradually introduces more
complex properties and layouts. Try each exercise individually and then try
combining different concepts to create more complex designs.

20 More CSS Exercises for Beginners

Advanced Selectors
Exercise 1: Attribute Selectors
Style inputs based on their type:

<input type="email" placeholder="Enter email">

<input type="password" placeholder="Enter password">

input[type="email"] {
border: 2px solid #3498db;
padding: 8px;
}

input[type="password"] {
border: 2px solid #e74c3c;
padding: 8px;
}

Exercise 2: Child Selectors

Style specific children in a list:

<ul class="special-list">
<li>First item</li>

40-css-exercises 12
 <li>Second item</li>
<li>Third item</li>
</ul>

.special-list > li:first-child {

color: red;
}

.special-list > li:last-child {

color: blue;
}

.special-list > li:nth-child(2) {

color: green;
}

Animations and Transitions

Exercise 3: Custom Animation
Create a bouncing ball animation:

<div class="bouncing-ball"></div>

.bouncing-ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
animation: bounce 1s infinite;
}

@keyframes bounce {
0%, 100% { transform: translateY(0); }

40-css-exercises 13
 50% { transform: translateY(-100px); }
}

Exercise 4: Loading Spinner

Create a simple loading animation:

<div class="spinner"></div>

.spinner {
width: 40px;
height: 40px;
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

Exercise 5: Multi-step Animation

Create a box that changes color and shape:

<div class="morphing-box"></div>

.morphing-box {
width: 100px;
height: 100px;
background-color: purple;
animation: morph 3s infinite;
}

40-css-exercises 14
 @keyframes morph {
0% {
background-color: purple;
border-radius: 0;
}
50% {
background-color: orange;
border-radius: 50%;
}
100% {
background-color: purple;
border-radius: 0;
}
}

Advanced Layout
Exercise 6: CSS Grid Areas
Create a simple webpage layout using grid areas:

<div class="grid-page">
<header class="header">Header</header>
<nav class="nav">Navigation</nav>
<main class="main">Main Content</main>
<aside class="sidebar">Sidebar</aside>
<footer class="footer">Footer</footer>
</div>

.grid-page {
display: grid;
grid-template-areas:
"header header header"
"nav main sidebar"

40-css-exercises 15
 "footer footer footer";
gap: 10px;
}

.header { grid-area: header; background: #3498db; }

.nav { grid-area: nav; background: #2ecc71; }
.main { grid-area: main; background: #e74c3c; }
.sidebar { grid-area: sidebar; background: #f1c40f; }
.footer { grid-area: footer; background: #34495e; }

Exercise 7: Masonry Layout

Create a simple masonry-style layout:

<div class="masonry">
<div class="item" style="height: 100px">1</div>
<div class="item" style="height: 150px">2</div>
<div class="item" style="height: 80px">3</div>
<div class="item" style="height: 120px">4</div>
</div>

.masonry {
columns: 3;
gap: 20px;
}

.item {
break-inside: avoid;
background-color: #3498db;
margin-bottom: 20px;
padding: 10px;
color: white;
}

Exercise 8: Sticky Header

40-css-exercises 16
 Create a header that sticks to the top while scrolling:

<header class="sticky-header">Sticky Header</header>

<div class="content">
<!-- Add lots of content here -->
</div>

.sticky-header {
position: sticky;
top: 0;
background-color: white;
padding: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 100;
}

Advanced Effects
Exercise 9: Glass Morphism
Create a frosted glass effect:

<div class="glass-card">
<h2>Glass Card</h2>
<p>Some content here</p>
</div>

.glass-card {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 20px;

40-css-exercises 17
 border: 1px solid rgba(255, 255, 255, 0.3);
}

Exercise 10: 3D Transform

Create a 3D flip card:

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">Front</div>
<div class="flip-card-back">Back</div>
</div>
</div>

.flip-card {
width: 200px;
height: 200px;
perspective: 1000px;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s;
}

.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;

40-css-exercises 18
 height: 100%;
backface-visibility: hidden;
}

.flip-card-front {
background-color: #bdc3c7;
}

.flip-card-back {
background-color: #2ecc71;
transform: rotateY(180deg);
}

Forms and Inputs

Exercise 11: Custom Checkbox
Create a styled checkbox:

<label class="custom-checkbox">
<input type="checkbox">
<span class="checkmark"></span>
Check me
</label>

.custom-checkbox {
position: relative;
padding-left: 35px;
cursor: pointer;
}

.custom-checkbox input {
position: absolute;
opacity: 0;
}

40-css-exercises 19
 .checkmark {
position: absolute;
left: 0;
top: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 4px;
}

.custom-checkbox input:checked ~ .checkmark {

background-color: #2ecc71;
}

Exercise 12: Custom Radio Buttons

Style radio buttons:

<div class="radio-group">
<label class="radio">
<input type="radio" name="option" checked>
<span class="radio-mark"></span>
Option 1
</label>
<label class="radio">
<input type="radio" name="option">
<span class="radio-mark"></span>
Option 2
</label>
</div>

.radio {
display: block;
position: relative;

40-css-exercises 20
 padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
}

.radio-mark {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 50%;
}

.radio input:checked ~ .radio-mark {

background-color: #3498db;
}

Exercise 13: Progress Bar

Create a custom progress bar:

<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>

.progress {
width: 100%;
height: 20px;
background-color: #f3f3f3;
border-radius: 10px;
overflow: hidden;
}

40-css-exercises 21
 .progress-bar {
height: 100%;
background-color: #2ecc71;
transition: width 0.3s ease;
}

Advanced Responsive Design

Exercise 14: Responsive Card Grid
Create a responsive grid of cards:

<div class="card-grid">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
</div>

.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
}

.card {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Exercise 15: Responsive Navigation

40-css-exercises 22
 Create a navigation that becomes a hamburger menu on mobile:

<nav class="responsive-nav">
<button class="menu-toggle">☰</button>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

.responsive-nav {
background-color: #333;
padding: 1rem;
}

.menu-toggle {
display: none;
}

.nav-links {
display: flex;
gap: 1rem;
}

@media (max-width: 768px) {

.menu-toggle {
display: block;
}

.nav-links {
display: none;
}

.nav-links.active {

40-css-exercises 23
 display: flex;
flex-direction: column;
}
}

Special Effects
Exercise 16: Text Gradient
Create gradient text:

<h1 class="gradient-text">Gradient Text</h1>

.gradient-text {
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 3rem;
}

Exercise 17: Parallax Effect

Create a simple parallax scrolling effect:

<div class="parallax">
<div class="parallax-content">
<h1>Parallax Effect</h1>
</div>
</div>

.parallax {
height: 500px;
background-image: url('background.jpg');

40-css-exercises 24
 background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.parallax-content {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}

Exercise 18: Typing Effect

Create a typing animation:

<div class="typing">Welcome to my website</div>

.typing {
width: 22ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}

@keyframes typing {
from { width: 0 }
}

@keyframes blink {

40-css-exercises 25
 50% { border-color: transparent }
}

Exercise 19: Image Hover Effects

Create an image hover effect:

<div class="image-hover">
<img src="image.jpg" alt="hover effect">
<div class="overlay">
<h3>Hello World</h3>
</div>
</div>

.image-hover {
position: relative;
overflow: hidden;
}

.image-hover img {
transition: transform 0.3s ease;
}

.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;

40-css-exercises 26
 }

.image-hover:hover img {
transform: scale(1.1);
}

.image-hover:hover .overlay {
opacity: 1;
}

Exercise 20: Custom Scrollbar

Style the scrollbar:

<div class="custom-scroll">
<!-- Add lots of content here -->
</div>

.custom-scroll {
height: 300px;
overflow-y: auto;
}

.custom-scroll::-webkit-scrollbar {
width: 10px;
}

.custom-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}

.custom-scroll::-webkit-scrollbar-thumb {
background: #888;
border-radius: 5px;
}

40-css-exercises 27
 .custom-scroll::-webkit-scrollbar-thumb:hover {
background: #555;
}

40-css-exercises 28