CSS Website Layout

Websites are commonly split into sections: a header, a navigation menu, a main content area, and a footer.

That arrangement of header, navigation, content, and footer ranks among the most common, although plenty of other layout designs exist.

CSS Header

Placed at the top of a site in most cases, a header tends to hold a logo or the website name.

Example

Create a page with a header element styled with a light gray background (#f1f1f1), centered text, and 10px padding. The header should contain an h1 with the text "My Header".

> Output: complete HTML page

Prompt

Create a page with a header element styled with a light gray background (#f1f1f1), centered text, and 10px padding. The header should contain an h1 with the text "My Header".

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Header Styling</title>
<style>
header {
  background-color: #f1f1f1;
  text-align: center;
  padding: 10px;
}
</style>
</head>
<body>

<header>
  <h1>My Header</h1>
</header>

</body>
</html>

CSS Navigation Bar

Visitors find their way around your website using a navigation bar, which holds a list of links.

Example

Create a page with a horizontal navigation bar using an unordered list with class "topnav". Use flexbox to display the items horizontally. The nav bar should have a dark background (#333333) with light-colored links (#f1f1f1), 14px 16px padding, no underlines, and a hover effect that changes the background to light gray (#dddddd) and text to black. Include four links: Link1, Link2, Link3, Link4.

> Output: complete HTML page

Prompt

Create a page with a horizontal navigation bar using an unordered list with class "topnav". Use flexbox to display the items horizontally. The nav bar should have a dark background (#333333) with light-colored links (#f1f1f1), 14px 16px padding, no underlines, and a hover effect that changes the background to light gray (#dddddd) and text to black. Include four links: Link1, Link2, Link3, Link4.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Navigation Bar</title>
<style>
ul.topnav {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
}

ul.topnav li a {
  display: block;
  color: #f1f1f1;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover {
  background-color: #dddddd;
  color: black;
}
</style>
</head>
<body>

<ul class="topnav">
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
</ul>

</body>
</html>

CSS Layout Content

The device in use often determines how a website's content is displayed. These layouts are the most common:

1-column layout - often seen on mobile browsers
2-column layout - often seen on tablets and laptops
3-column layout - for desktops only

In the example below, three columns collapse into one when the screen is narrower than 600px.

Tip: The CSS Media Queries chapter explains the CSS @media rule in more detail.

Tip: The CSS Flexbox chapter explains CSS Flexbox in more detail.

Example

Create a page with a 3-column layout using flexbox. Each column should have a heading "Column" and a paragraph of lorem ipsum text. Use a media query so that when the screen width is less than 600px, the columns stack vertically. Each column should have 10px margin.

> Output: complete HTML page

Prompt

Create a page with a 3-column layout using flexbox. Each column should have a heading "Column" and a paragraph of lorem ipsum text. Use a media query so that when the screen width is less than 600px, the columns stack vertically. Each column should have 10px margin.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Three Column Layout</title>
<style>
div.flex-container {
  display: flex;
  flex-direction: row;
}

div.flex-container > div {
  margin: 10px;
}

@media screen and (max-width: 600px) {
  div.flex-container {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<div class="flex-container">
  <div>
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.</p>
  </div>
  <div>
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.</p>
  </div>
  <div>
    <h2>Column</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.</p>
  </div>
</div>

</body>
</html>

CSS Basic and Fixed Footer

At the bottom of a webpage sits the footer, commonly carrying details such as copyright and contact information.

Basic footer

A simple footer style looks like this.

Create a page with some content and a footer element at the bottom. The footer should have a light gray background (#f1f1f1), centered text, 8px padding, and display the text "Footer".

> Output: complete HTML page

Prompt

Create a page with some content and a footer element at the bottom. The footer should have a light gray background (#f1f1f1), centered text, 8px padding, and display the text "Footer".

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Basic Footer</title>
<style>
footer {
  background-color: #f1f1f1;
  text-align: center;
  padding: 8px;
}
</style>
</head>
<body>

<h2>Page Content</h2>
<p>Some content above the footer.</p>

<footer>
  Footer
</footer>

</body>
</html>

Fixed footer

However far you scroll, a fixed footer remains visible at the bottom of the page.

Create a page with enough content to scroll and a fixed footer that stays visible at the bottom of the viewport. The footer should use position fixed, bottom 0, left 0, width 100%, a light gray background (#f1f1f1), 8px padding, centered text, and z-index 1000. The footer text should say "Fixed Footer".

> Output: complete HTML page

Prompt

Create a page with enough content to scroll and a fixed footer that stays visible at the bottom of the viewport. The footer should use position fixed, bottom 0, left 0, width 100%, a light gray background (#f1f1f1), 8px padding, centered text, and z-index 1000. The footer text should say "Fixed Footer".

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Fixed Footer</title>
<style>
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f1f1f1;
  padding: 8px;
  text-align: center;
  z-index: 1000;
}

body {
  margin-bottom: 50px;
}
</style>
</head>
<body>

<h2>Scroll Down</h2>
<p>This page has a fixed footer that stays at the bottom of the viewport.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<footer>
  Fixed Footer
</footer>

</body>
</html>

CSS Responsive Website

Combining media queries with flexbox, this example builds a responsive website whose navigation bar and content are both flexible.

Example

Create a responsive website layout with a header, a horizontal navigation bar that becomes vertical on small screens, a flex-based content area with a side navigation and main article section, and a footer. Use media queries so the layout adapts for screens under 600px by stacking elements vertically.

> Output: complete HTML page

Prompt

Create a responsive website layout with a header, a horizontal navigation bar that becomes vertical on small screens, a flex-based content area with a side navigation and main article section, and a footer. Use media queries so the layout adapts for screens under 600px by stacking elements vertically.

Output: complete HTML page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Responsive Website</title>
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  color: white;
  font-size: 30px;
}

ul.topnav {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
}

ul.topnav li a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover {
  background-color: #ddd;
  color: black;
}

.content-container {
  display: flex;
  flex-direction: row;
}

nav {
  flex: 1;
  background-color: #f1f1f1;
  padding: 20px;
}

nav a {
  display: block;
  padding: 8px;
  text-decoration: none;
  color: black;
}

nav a:hover {
  background-color: #ddd;
}

article {
  flex: 3;
  background-color: white;
  padding: 20px;
}

footer {
  background-color: #f1f1f1;
  text-align: center;
  padding: 10px;
}

@media screen and (max-width: 600px) {
  ul.topnav {
    flex-direction: column;
  }

  .content-container {
    flex-direction: column;
  }
}
</style>
</head>
<body>

<header>
  <h1>My Website</h1>
</header>

<ul class="topnav">
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

<div class="content-container">
  <nav>
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </nav>

  <article>
    <h1>Heading</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque augue quam, ultricies at erat vitae, lobortis ultrices urna.</p>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec accumsan, nibh vel tincidunt sagittis, urna eros hendrerit orci, id elementum sem arcu ac libero.</p>
  </article>
</div>

<footer>
  Footer
</footer>

</body>
</html>