CSS Exercises

Styling a Simple Web Page

Style a basic HTML page with a header, navigation menu, main content section, and footer. You'll use CSS to add colors, typography, spacing, and layout adjustments.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Styling Exercise</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My Website</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
    </header>
        <main>
    <section>
        <h2>Welcome</h2>
        <p>This is a simple webpage with basic CSS styling.</p>
    </section>
        </main>
        <footer>
            <p>&copy; 2024 My Website</p>
        </footer>
</body>
</html>
                        

1. Save and open index.html in your browser to view your website.

CSS (style.css)

    /* Reset some default styles */
    body, h1, h2, p, ul {
        margin: 0;
        padding: 0;
    }
            
    /* Basic styles for the body */
    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #f4f4f4;
    }
            
    /* Header styling */
    header {
        background-color: #333;
        color: #fff;
        padding: 10px 20px;
        text-align: center;
    }
            
    header h1 {
        margin: 0;
    }
            
    nav ul {
        list-style: none;
        padding: 0;
    }
            
    nav ul li {
        display: inline;
        margin: 0 10px;
    }
            
    nav ul li a {
        color: #fff;
        text-decoration: none;
    }
            
    /* Main section styling */
    main {
        padding: 20px;
        text-align: center;
    }
            
    main h2 {
        color: #333;
    }
            
    main p {
        color: #666;
    }
            
    /* Footer styling */
    footer {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 10px 20px;
        position: fixed;
        width: 100%;
        bottom: 0;
    }
            

2. Save and open style.css.
Online HTML Editor

Feel free to customize the content and structure as you like.