When building modern websites, it's essential to ensure that they look good on all screen sizes, from mobile phones to desktops. Using the CSS concepts we've learned, such as media queries, flexible layouts, and responsive design principles, we can create a multi-page website that is both functional and aesthetically pleasing on all devices. In this article, we will walk through the steps involved in creating a responsive, multi-page website using CSS techniques.
Before diving into the CSS, let's first plan the structure of the website. A simple multi-page website can consist of the following pages:
Each page will have the same general layout but with unique content. The layout will include a header, navigation bar, main content area, and footer. We'll use CSS to make this layout responsive, adjusting for different screen sizes.
Let's define the basic HTML structure for all pages:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Title</title>
</head>
<body>
<header>
<h1>Website Name</h1>
</header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Page Content</h2>
<p>Content for this page goes here.</p>
</section>
</main>
<footer>
<p>Copyright 2024 </p>
</footer>
</body>
</html>
Now, let's start writing the CSS to style the website layout. We'll begin with a simple, non-responsive version of the layout, and then enhance it with responsive features later.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
nav {
background-color: #444;
padding: 10px;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
With the CSS above, we have defined a basic layout with a header, navigation bar, main content area, and footer. The navigation bar uses flexbox to display links horizontally, and the footer is fixed at the bottom of the page.
Next, we'll use media queries to make the website responsive. We'll adjust the layout based on different screen widths, ensuring that the website is easy to navigate on mobile devices, tablets, and desktops.
We will add media queries to adjust the layout for smaller screens. For mobile devices, we'll stack the navigation links vertically and ensure the content is displayed more comfortably.
@media (max-width: 768px) {
nav ul {
flex-direction: column;
align-items: center;
}
nav ul li {
margin: 10px 0;
}
footer {
position: static;
}
}
In the media query above, we target screens with a width of 768px or smaller (such as tablets and mobile phones). The navigation links are stacked vertically, and the footer is no longer fixed at the bottom.
For even smaller screens (like mobile phones), we can refine the layout further, adjusting text sizes and padding to ensure readability.
@media (max-width: 480px) {
header h1 {
font-size: 18px;
}
main {
padding: 10px;
}
}
This media query targets devices with a screen width of 480px or smaller (like smartphones). We decrease the font size in the header and reduce the padding in the main content area to maximize space on small screens.
Since this is a multi-page website, it's essential that all pages are linked together. Each page will have a navigation bar with links to the other pages.
For example, the about.html page will have the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
</head>
<body>
<header>
<h1>About Us</h1>
</header>
<nav>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>Our Company</h2>
<p>We are a web development company that specializes in creating responsive websites.</p>
</section>
</main>
<footer>
<p>Copyright 2024</p>
</footer>
</body>
</html>
Every page will have the same structure, but with unique content for each page (Home, About, Services, and Contact). The navigation links allow users to navigate through the pages of the website.
By using CSS concepts such as media queries, flexible layouts, and responsive design principles, we can create a multi-page website that looks great on all screen sizes. This responsive design ensures that users can easily navigate the website, whether they're on a mobile device, tablet, or desktop. With the addition of simple HTML and CSS techniques, we've built a responsive, multi-page website that adapts to different devices and screen sizes, offering an optimal user experience across the board.