CSS Website Layout (original) (raw)

Last Updated : 04 Jan, 2025

CSS website layout divides a webpage into multiple sections like header, navigation bar, content area, and footer, making it easier to organize content and build the site.

**1. Header Section

The header is the top section of a webpage, typically containing the website's name or logo.

html `

<style>
    .header {
        background-color: green;
        padding: 15px;
        text-align: center;
    }
    .header h2 {
        color: white;
        margin: 0;
    }
</style>

`

**In this example:

• The
  element defines the **header section of the webpage.
• The ****.header CSS** class styles the header with a green background, 15 pixels of padding, and centers the text.

**2. Navigation Menu

The navigation menu is used to create a set of links for easy website navigation.

html `

<style>
    .nav_menu {
        overflow: hidden;
        background-color: #333;
    }
    .nav_menu a {
        float: left;
        display: block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    .nav_menu a:hover {
        background-color: white;
        color: green;
    }
</style>

`

**In this example:

• The .nav_menu class defines the style of the navigation menu with a dark background and ensures the links are aligned horizontally.
• The a tag inside .nav_menu defines each link's style, including white text and padding for spacing

**3. Content Section

The content section is used to add content to the page, and you can adjust it according to the screen size.

html `

<style>
    .columnA,
    .columnB,
    .columnC {
        text-align: center;
        color: green;
    }
</style>

<div class="columnA">Content for Column A</div>
<div class="columnB">Content for Column B</div>
<div class="columnC">Content for Column C</div>

`

**In this example:

• The HTML structure defines three content sections, each inside a
  , which can be further styled or adjusted as needed for responsive layouts.
• The .columnA, .columnB, and .columnC classes style the content areas, aligning the text to the center and coloring it green.

**4. Footer Section

The footer section is placed at the bottom of the webpage and typically contains information like contact details, copyright, or about us.

html `

<style>
    .footer {
        background-color: green;
        padding: 15px;
        text-align: center;
    }
</style>

`

**In this example:

• The .footer class defines the footer section, giving it a green background, padding, and centering the text.
• Inside the footer, there are links for "About," "Career," and "Contact Us," which provide quick access to those sections.

Important Points to Remember

• **The header section contains a website logo, a search bar, and user profile information.
• **The navigation menu includes links to various categories of articles available.
• **The content section is divided into three parts (columns), with left and right sidebars containing links to other articles and advertisements. The main content section holds the current article.
• **The footer at the bottom contains the address, links, contacts, etc.