Vinh Jacker's blog

What is a simple layout of HTML and CSS?

Vinh Jacker's photo
Vinh Jacker
·

1 min read

A simple layout in HTML and CSS typically consists of a basic HTML structure with a few elements styled using CSS. Here's a simple example of an HTML and CSS layout:

HTML (index.html):

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Simple Layout</title>
</head>
<body>

    <header>
        <h1>Simple Layout Example</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <main>
        <section>
            <h2>Welcome to Our Website</h2>
            <p>This is a simple layout example using HTML and CSS.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Simple Layout Example</p>
    </footer>

</body>
</html>

CSS (styles.css):

cssCopy codebody {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em;
}

nav {
    background-color: #444;
    color: #fff;
    padding: 0.5em;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    display: inline;
    margin-right: 15px;
}

nav a {
    text-decoration: none;
    color: #fff;
}

main {
    padding: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em;
}

This example includes a simple webpage layout with a header, navigation menu, main content section, and a footer. The styles.css file contains basic styling for the elements, including background colors, text colors, and spacing. Feel free to customize the HTML content and CSS styles according to your needs.

HTMLCSS