CSS practical exercises

Below is a set of CSS practical exercises designed to cover the full course content outlined in your syllabus, particularly focusing on Competency 10: Develops websites incorporating multimedia technologies (using HTML5) and Competency 10.5: Uses Style Sheets to change the appearance of web pages . Each exercise includes a description, syllabus coverage, aim, and CSS code.

Table of Contents

Exercise 10.1: Basic CSS Styling

Description : Write a CSS file to style an HTML page by changing the background color, font size, and text alignment.
Syllabus Coverage : Introduction to style sheets, syntax, and basic formatting.
Aim : Introduce students to CSS basics and how to link it with HTML.

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>CSS Basics</title>
    <style>
        body {
            background-color: lightblue;
            font-family: Arial, sans-serif;
        }
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 18px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <p>This is a styled paragraph of text.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Basics</title>

<style>

body {

background-color: lightblue;

font-family: Arial, sans-serif;

}

h1 {

color: blue;

text-align: center;

}

p {

font-size: 18px;

color: green;

}

</style>

</head>

<body>

<h1>Welcome to My Web Page</h1>

<p>This is a styled paragraph of text.</p>

</body>

</html>

Exercise 10.2: Using CSS Selectors

Description : Write a CSS file that uses element, class, and ID selectors to style different parts of an HTML page.
Syllabus Coverage : CSS selectors (element, class, ID).
Aim : Teach students how to use different types of CSS selectors effectively.

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>CSS Selectors</title>
    <style>
        /* Element selector */
        h1 {
            color: red;
        }

        /* Class selector */
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }

        /* ID selector */
        #special {
            color: purple;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>This is a Heading</h1>
    <p class="highlight">This paragraph is highlighted.</p>
    <p id="special">This paragraph has a special style.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Selectors</title>

<style>

/* Element selector */

h1 {

color: red;

}

/* Class selector */

.highlight {

background-color: yellow;

font-weight: bold;

}

/* ID selector */

#special {

color: purple;

font-size: 24px;

}

</style>

</head>

<body>

<h1>This is a Heading</h1>

<p class="highlight">This paragraph is highlighted.</p>

<p id="special">This paragraph has a special style.</p>

</body>

</html>

Exercise 10.3: Internal vs. External CSS

Description : Create two versions of the same webpage—one using internal CSS and the other using external CSS.
Syllabus Coverage : Ways of inserting CSS (internal, external).
Aim : Teach students the difference between internal and external CSS.

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            background-color: lightgray;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>Internal CSS Example</h1>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Internal CSS</title>

<style>

body {

background-color: lightgray;

}

h1 {

color: green;

}

</style>

</head>

<body>

<h1>Internal CSS Example</h1>

</body>

</html>

External CSS Example :

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>External CSS Example</h1>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>External CSS</title>

</head>

<body>

<h1>External CSS Example</h1>

</body>

</html>

styles.css

/* CSS Code */
body {
    background-color: lightgray;
}
h1 {
    color: green;
}

/* CSS Code */

body {

background-color: lightgray;

}

h1 {

color: green;

}

Exercise 10.4: Formatting Links and Lists

Description : Write a CSS file to style hyperlinks and lists (ordered and unordered).
Syllabus Coverage : Appearance formatting (links, lists).
Aim : Teach students how to style links and lists for better user experience.

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Links and Lists</title>
    <style>
        /* Link styles */
        a:link {
            color: blue;
            text-decoration: none;
        }
        a:visited {
            color: purple;
        }
        a:hover {
            color: red;
            text-decoration: underline;
        }

        /* List styles */
        ul {
            list-style-type: square;
        }
        ol {
            list-style-type: upper-roman;
        }
    </style>
</head>
<body>
    <h1>Links and Lists</h1>
    <a href="#">Visit My Website</a>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
    <ol>
        <li>First Item</li>
        <li>Second Item</li>
    </ol>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Links and Lists</title>

<style>

/* Link styles */

a:link {

color: blue;

text-decoration: none;

}

a:visited {

color: purple;

}

a:hover {

color: red;

text-decoration: underline;

}

/* List styles */

ul {

list-style-type: square;

}

ol {

list-style-type: upper-roman;

}

</style>

</head>

<body>

<h1>Links and Lists</h1>

<a href="#">Visit My Website</a>

<ul>

</ul>

<ol>

<li>First Item</li>

<li>Second Item</li>

</ol>

</body>

</html>

Exercise 10.5: Styling Tables

Description : Write a CSS file to style a table with borders, alternating row colors, and hover effects.
Syllabus Coverage : Appearance formatting (tables).
Aim : Teach students how to make tables visually appealing and functional.

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Styling Tables</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <h1>Styled Table</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Alice</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>30</td>
        </tr>
    </table>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Styling Tables</title>

<style>

table {

width: 100%;

border-collapse: collapse;

}

th, td {

border: 1px solid black;

padding: 8px;

text-align: center;

}

tr:nth-child(even) {

background-color: #f2f2f2;

}

tr:hover {

background-color: #ddd;

}

</style>

</head>

<body>

<h1>Styled Table</h1>

<table>

<tr>

</tr>

<tr>

<td>Alice</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Exercise 10.6: Responsive Design

Description : Write a CSS file to create a responsive layout that adjusts based on screen size.
Syllabus Coverage : Advanced CSS concepts (responsive design).
Aim : Introduce students to responsive web design principles.

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Responsive Design</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .box {
            flex: 1;
            padding: 20px;
            margin: 10px;
            background-color: lightcoral;
            text-align: center;
        }
        @media (max-width: 600px) {
            .box {
                flex: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Responsive Design</title>

<style>

body {

margin: 0;

font-family: Arial, sans-serif;

}

.container {

display: flex;

flex-wrap: wrap;

}

.box {

flex: 1;

padding: 20px;

margin: 10px;

background-color: lightcoral;

text-align: center;

}

@media (max-width: 600px) {

.box {

flex: 100%;

}

</style>

</head>

<body>

</div>

</body>

</html>

Exercise 10.7: Animations

Description : Write a CSS file to create animations like fading or sliding effects.
Syllabus Coverage : Advanced CSS concepts (animations).
Aim : Teach students how to add dynamic effects to web pages.

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>CSS Animations</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: relative;
            animation: slide 3s infinite;
        }
        @keyframes slide {
            0% { left: 0; }
            50% { left: 200px; }
            100% { left: 0; }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Animations</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: lightblue;

position: relative;

animation: slide 3s infinite;

}

@keyframes slide {

0% { left: 0; }

50% { left: 200px; }

100% { left: 0; }

}

</style>

</head>

<body>

</body>

</html>

Exercise 10.8: Flexbox Layout

Description : Write a CSS file to create a flexible layout using Flexbox.
Syllabus Coverage : Advanced CSS concepts (Flexbox).
Aim : Introduce students to modern layout techniques.

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Layout</title>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
        }
        .item {
            background-color: lightgreen;
            padding: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Flexbox Layout</title>

<style>

.container {

display: flex;

justify-content: space-around;

align-items: center;

height: 100vh;

}

.item {

background-color: lightgreen;

padding: 20px;

border: 1px solid black;

}

</style>

</head>

<body>

</div>

</body>

</html>

Exercise 10.9: Grid Layout

Description : Write a CSS file to create a grid-based layout.
Syllabus Coverage : Advanced CSS concepts (Grid).
Aim : Teach students how to use CSS Grid for complex layouts.

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid Layout</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 10px;
            padding: 10px;
        }
        .grid-item {
            background-color: lightpink;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Grid Layout</title>

<style>

.grid-container {

display: grid;

grid-template-columns: auto auto auto;

gap: 10px;

padding: 10px;

}

.grid-item {

background-color: lightpink;

padding: 20px;

text-align: center;

}

</style>

</head>

<body>

</div>

</body>

</html>

Exercise 10.10: Transitions

Description : Write a CSS file to create smooth transitions for hover effects.
Syllabus Coverage : Advanced CSS concepts (transitions).
Aim : Teach students how to enhance interactivity with smooth transitions.

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>CSS Transitions</title>
    <style>
        .button {
            background-color: lightblue;
            padding: 10px 20px;
            transition: background-color 0.5s ease;
        }
        .button:hover {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <button class="button">Hover Me</button>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Transitions</title>

<style>

.button {

background-color: lightblue;

padding: 10px 20px;

transition: background-color 0.5s ease;

}

.button:hover {

background-color: lightgreen;

}

</style>

</head>

<body>

<button class="button">Hover Me</button>

</body>

</html>

Above exercises comprehensively cover the CSS-related topics in your syllabus, including selectors , formatting , tables , lists , responsive design , animations , Flexbox , and Grid . They are designed to progressively build students’ skills while aligning with the learning outcomes.

Below are advanced CSS exercises that go beyond the syllabus, exploring modern and creative techniques in web design. These exercises will help you deepen your understanding of CSS and its capabilities in creating visually stunning and interactive websites.

Exercise 1: CSS Grid for Complex Layouts

Description : Create a responsive magazine-style layout using CSS Grid.
What You Learn : Advanced CSS Grid techniques for complex layouts.
Code Example :

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Magazine Layout</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 10px;
            padding: 10px;
        }
        .header, .footer {
            grid-column: span 12;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 20px;
        }
        .sidebar {
            grid-column: span 3;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .main-content {
            grid-column: span 9;
            background-color: #eaeaea;
            padding: 20px;
        }
        .ad {
            grid-column: span 6;
            background-color: #ffcc00;
            text-align: center;
            padding: 20px;
        }
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
            .sidebar, .main-content, .ad {
                grid-column: span 12;
            }
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="header">Header</div>
        <div class="sidebar">Sidebar</div>
        <div class="main-content">Main Content</div>
        <div class="ad">Advertisement</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Magazine Layout</title>

<style>

body {

margin: 0;

font-family: Arial, sans-serif;

}

.grid-container {

display: grid;

grid-template-columns: repeat(12, 1fr);

gap: 10px;

padding: 10px;

}

.header, .footer {

grid-column: span 12;

background-color: #333;

color: white;

text-align: center;

padding: 20px;

}

.sidebar {

grid-column: span 3;

background-color: #f4f4f4;

padding: 20px;

}

.main-content {

grid-column: span 9;

background-color: #eaeaea;

padding: 20px;

}

.ad {

grid-column: span 6;

background-color: #ffcc00;

text-align: center;

padding: 20px;

}

@media (max-width: 768px) {

.grid-container {

grid-template-columns: 1fr;

}

.sidebar, .main-content, .ad {

grid-column: span 12;

}

</style>

</head>

<body>

<div class="header">Header</div>

<div class="sidebar">Sidebar</div>

<div class="main-content">Main Content</div>

<div class="ad">Advertisement</div>

<div class="footer">Footer</div>

</div>

</body>

</html>

Exercise 2: CSS Animations for Loading Spinners

Description : Create a custom loading spinner using CSS animations.
What You Learn : Advanced CSS animations and keyframes.
Code Example :

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Loading Spinner</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #282c34;
        }
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="spinner"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Loading Spinner</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #282c34;

}

.spinner {

width: 50px;

height: 50px;

border: 5px solid #f3f3f3;

border-top: 5px solid #3498db;

border-radius: 50%;

animation: spin 1s linear infinite;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

</style>

</head>

<body>

</body>

</html>

Exercise 3: Dark Mode Toggle

Description : Create a toggle button to switch between light and dark modes using CSS variables.
What You Learn : CSS variables, pseudo-classes, and interactivity.
Code Example :

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Dark Mode Toggle</title>
    <style>
        :root {
            --bg-color: #ffffff;
            --text-color: #000000;
        }
        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            transition: all 0.3s ease;
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
        }
        .toggle-btn {
            padding: 10px 20px;
            background-color: #333;
            color: white;
            border: none;
            cursor: pointer;
        }
        .dark-mode {
            --bg-color: #222;
            --text-color: #ffffff;
        }
    </style>
</head>
<body>
    <h1>Dark Mode Toggle</h1>
    <button class="toggle-btn" onclick="toggleDarkMode()">Toggle Dark Mode</button>

    <script>
        function toggleDarkMode() {
            document.body.classList.toggle('dark-mode');
        }
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Dark Mode Toggle</title>

<style>

:root {

--bg-color: #ffffff;

--text-color: #000000;

}

body {

background-color: var(--bg-color);

color: var(--text-color);

transition: all 0.3s ease;

font-family: Arial, sans-serif;

text-align: center;

padding: 50px;

}

.toggle-btn {

padding: 10px 20px;

background-color: #333;

color: white;

border: none;

cursor: pointer;

}

.dark-mode {

--bg-color: #222;

--text-color: #ffffff;

}

</style>

</head>

<body>

<h1>Dark Mode Toggle</h1>

<button class="toggle-btn" onclick="toggleDarkMode()">Toggle Dark Mode</button>

function toggleDarkMode() {

document.body.classList.toggle('dark-mode');

}

</script>

</body>

</html>

Exercise 4: Parallax Scrolling Effect

Description : Create a parallax scrolling effect using CSS and HTML.
What You Learn : Background attachment and scroll effects.
Code Example :

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Parallax Scrolling</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
        }
        .parallax {
            height: 100vh;
            background-image: url('background.jpg');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .content {
            padding: 50px;
            background-color: #f4f4f4;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="parallax"></div>
    <div class="content">
        <h1>Welcome to My Website</h1>
        <p>Scroll down to see the parallax effect.</p>
    </div>
    <div class="parallax"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Parallax Scrolling</title>

<style>

body, html {

margin: 0;

padding: 0;

height: 100%;

font-family: Arial, sans-serif;

}

.parallax {

height: 100vh;

background-image: url('background.jpg');

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.content {

padding: 50px;

background-color: #f4f4f4;

text-align: center;

}

</style>

</head>

<body>

<h1>Welcome to My Website</h1>

<p>Scroll down to see the parallax effect.</p>

</div>

</body>

</html>

Exercise 5: Custom Scrollbars

Description : Customize the appearance of scrollbars using CSS.
What You Learn : Pseudo-elements and scrollbar styling.
Code Example :

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Custom Scrollbars</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            height: 200vh;
        }
        ::-webkit-scrollbar {
            width: 10px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
<body>
    <h1>Scroll Down to See Custom Scrollbar</h1>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Custom Scrollbars</title>

<style>

body {

margin: 0;

font-family: Arial, sans-serif;

height: 200vh;

}

::-webkit-scrollbar {

width: 10px;

}

::-webkit-scrollbar-track {

background: #f1f1f1;

}

::-webkit-scrollbar-thumb {

background: #888;

}

::-webkit-scrollbar-thumb:hover {

background: #555;

}

</style>

</head>

<body>

<h1>Scroll Down to See Custom Scrollbar</h1>

</body>

</html>

Exercise 6: Glassmorphism Design

Description : Create a glassmorphism-inspired card using CSS.
What You Learn : Transparency, blur effects, and modern design trends.
Code Example :

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Glassmorphism Card</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            background: linear-gradient(135deg, #6e8efb, #a777e3);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Glassmorphism</h1>
        <p>This is a glassmorphism card.</p>
    </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Glassmorphism Card</title>

<style>

body {

margin: 0;

height: 100vh;

background: linear-gradient(135deg, #6e8efb, #a777e3);

display: flex;

justify-content: center;

align-items: center;

}

.card {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

border-radius: 10px;

padding: 20px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

width: 300px;

text-align: center;

color: white;

}

</style>

</head>

<body>

<h1>Glassmorphism</h1>

<p>This is a glassmorphism card.</p>

</div>

</body>

</html>

Exercise 7: Hover Effects with CSS Transitions

Description : Create interactive hover effects on buttons or images using CSS transitions.
What You Learn : Transition properties and hover states.
Code Example :

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Hover Effects</title>
    <style>
        .button {
            background-color: #3498db;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .button:hover {
            background-color: #2980b9;
            transform: scale(1.1);
        }
        .image {
            width: 200px;
            transition: transform 0.3s ease;
        }
        .image:hover {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <button class="button">Hover Me</button>
    <br><br>
    <img src="example.jpg" alt="Example" class="image">
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Hover Effects</title>

<style>

.button {

background-color: #3498db;

color: white;

padding: 15px 30px;

border: none;

border-radius: 5px;

cursor: pointer;

transition: all 0.3s ease;

}

.button:hover {

background-color: #2980b9;

transform: scale(1.1);

}

.image {

width: 200px;

transition: transform 0.3s ease;

}

.image:hover {

transform: scale(1.2);

}

</style>

</head>

<body>

<button class="button">Hover Me</button>

</body>

</html>

Exercise 8: Neon Glow Effect

Description : Create a neon glow effect for text or buttons using CSS.
What You Learn : Box shadows and glowing effects.
Code Example :

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Neon Glow</title>
    <style>
        body {
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }
        .neon-text {
            color: #fff;
            text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 40px #ff0080, 0 0 80px #ff0080;
            font-size: 40px;
            animation: glow 1.5s infinite alternate;
        }
        @keyframes glow {
            from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 40px #ff0080, 0 0 80px #ff0080; }
            to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #ff0080, 0 0 80px #ff0080, 0 0 160px #ff0080; }
        }
    </style>
</head>
<body>
    <h1 class="neon-text">Neon Glow</h1>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #000;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

font-family: Arial, sans-serif;

}

.neon-text {

color: #fff;

text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 40px #ff0080, 0 0 80px #ff0080;

font-size: 40px;

animation: glow 1.5s infinite alternate;

}

@keyframes glow {

from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0080, 0 0 40px #ff0080, 0 0 80px #ff0080; }

to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #ff0080, 0 0 80px #ff0080, 0 0 160px #ff0080; }

}

</style>

</head>

<body>

</body>

</html>

Exercise 9: CSS Clip-Path for Creative Shapes

Description : Use clip-path to create unique shapes like circles, polygons, or custom designs.
What You Learn : Advanced CSS clipping and masking.
Code Example :

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>CSS Clip-Path</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }
        .shape {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }
    </style>
</head>
<body>
    <div class="shape"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #f4f4f4;

}

.shape {

width: 200px;

height: 200px;

background-color: #3498db;

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

}

</style>

</head>

<body>

</body>

</html>

Exercise 10: Interactive Navigation Menu

Description : Create an interactive navigation menu with dropdowns and hover effects.
What You Learn : Dropdown menus, hover effects, and positioning.
Code Example :

<!-- HTML Code -->
<!DOCTYPE html>
<html>
<head>
    <title>Interactive Menu</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        nav {
            background-color: #333;
            overflow: hidden;
        }
        nav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        nav a:hover {
            background-color: #ddd;
            color: black;
        }
        .dropdown {
            float: left;
            overflow: hidden;
        }
        .dropdown .dropbtn {
            font-size: 16px;
            border: none;
            outline: none;
            color: white;
            padding: 14px 16px;
            background-color: inherit;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }
        .dropdown-content a {
            float: none;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }
        .dropdown-content a:hover {
            background-color: #ddd;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <div class="dropdown">
            <button class="dropbtn">Services</button>
            <div class="dropdown-content">
                <a href="#web">Web Development</a>
                <a href="#app">App Development</a>
                <a href="#seo">SEO</a>
            </div>
        </div>
    </nav>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Interactive Menu</title>

<style>

body {

margin: 0;

font-family: Arial, sans-serif;

}

nav {

background-color: #333;

overflow: hidden;

}

nav a {

float: left;

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

nav a:hover {

background-color: #ddd;

color: black;

}

.dropdown {

float: left;

overflow: hidden;

}

.dropdown .dropbtn {

font-size: 16px;

border: none;

outline: none;

color: white;

padding: 14px 16px;

background-color: inherit;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);

z-index: 1;

}

.dropdown-content a {

float: none;

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

text-align: left;

}

.dropdown-content a:hover {

background-color: #ddd;

}

.dropdown:hover .dropdown-content {

display: block;

}

</style>

</head>

<body>

<nav>

<a href="#about">About</a>

<button class="dropbtn">Services</button>

<a href="#web">Web Development</a>

<a href="#app">App Development</a>

</div>

</nav>

</body>

</html>

These exercises explore advanced CSS concepts such as Grid , animations , transitions , custom scrollbars , glassmorphism , clip-path , and interactive elements . They provide practical, real-world applications of CSS and will help you explore areas beyond the syllabus.

Spread the love

School ICT Self Study

ICT Learning & Teaching Resource ( AL/OL )

Exercise 10.1: Basic CSS Styling

Exercise 10.2: Using CSS Selectors

Exercise 10.3: Internal vs. External CSS

Exercise 10.4: Formatting Links and Lists

Exercise 10.5: Styling Tables

Exercise 10.6: Responsive Design

Exercise 10.7: Animations

Exercise 10.8: Flexbox Layout

Exercise 10.9: Grid Layout

Exercise 10.10: Transitions

Exercise 1: CSS Grid for Complex Layouts

Exercise 2: CSS Animations for Loading Spinners

Exercise 3: Dark Mode Toggle

Exercise 4: Parallax Scrolling Effect

Exercise 5: Custom Scrollbars

Exercise 6: Glassmorphism Design

Exercise 7: Hover Effects with CSS Transitions

Exercise 8: Neon Glow Effect

Exercise 9: CSS Clip-Path for Creative Shapes

Exercise 10: Interactive Navigation Menu

Install the School ICT App

	Install the School ICT App
Scan the QR code using your smartphone's camera or a QR code scanner app. Open the link in your browser (e.g., Chrome or Edge). Tap the Add to Home Screen option in your browser menu to install the app.