Welcome to a tutorial on how to create a simple website layout with HTML and CSS! In this tutorial, we will go through the steps of building a basic website layout using these fundamental web development technologies.
Step 1: Setting up the HTML structure
First, let's start by setting up the basic HTML structure of our website. We will use a few different HTML elements to create the layout, including a <header>, <nav>, <main>, and <footer> element.
<!DOCTYPE html> <html> <head> <title>My Website</title> </head> <body> <header> <h1>My Website</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> <h2>Welcome to My Website</h2> <p>This is the main content of the website.</p> </main> <footer> <p>Copyright 2021</p> </footer> </body> </html>
In this example, we have a <header> element that contains the website's title, a <nav> element that contains the navigation links, a <main> element that contains the main content of the website, and a <footer> element that contains the website's copyright information.
Step 2: Adding basic styles with CSS
Next, let's add some basic styles to our website using CSS. We will use a few different CSS properties to style the layout, including the width, height, display, and float properties.
header { width: 100%; height: 80px; background-color: #0066cc; color: #ffffff; } nav { width: 200px; float: left; background-color: #333333; color: #ffffff; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { margin: 10px 0; } nav a { display: block; padding: 10px 20px; color: #ffffff; text-decoration: none; } main { margin: 0 200px 0 200px; } footer { clear: both; width: 100%; height: 80px; background-color: #333333; color: #ffffff; }
In this example, we have styled the <header> and <footer> elements to be the full width of the page and a fixed height. We have also styled the <nav> element to be a fixed width and float to the left of the page. The <main> element has a margin on the left and right to create space between the navigation and the main content. The <nav> links are styled to be block elements with padding and a hover effect that changes the background color on hover.
Step 3: Adding a responsive layout with the @media rule
Now that we have a basic layout, let's make it responsive so that it works on different screen sizes. We can use the @media rule to apply different styles based on the width of the viewport.
@media (max-width: 768px) { nav { width: 100%; float: none; } main { margin: 0; } }
In this example, we are using the @media rule to apply different styles when the viewport is less than or equal to 768 pixels wide. We are changing the width of the <nav> element to be 100% of the viewport and removing the float, so that the navigation is displayed below the main content. We are also removing the margins from the <main> element, so that it takes up the full width of the viewport.
Step 4: Adding a hover effect with the :hover pseudo-class
Finally, let's add a hover effect to the navigation links. We can use the :hover pseudo-class to apply styles when the mouse is hovering over an element.
nav a:hover { background-color: #0066cc; }
In this example, we are changing the background color of the <a> elements within the <nav> element when they are being hovered over.
That's it! We have created a simple website layout with HTML and CSS. With a basic understanding of these technologies, you can start building your own websites and experimenting with different layouts and styles. There is a lot more to learn about web development, but this tutorial should give you a good foundation to build upon.