Layout
In CSS, layout refers to how elements are structured and positioned on a webpage. It involves using techniques like floats, flexbox, or CSS Grid to arrange content in columns, rows, or other configurations. Layouts ensure content is visually organized and responsive across different screen sizes. Effective layout design enhances user experience by improving readability, accessibility, and overall aesthetic appeal of websites.
Layout
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Layout</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Basic layout styling */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensures footer stays at bottom of page */
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
nav {
background-color: #666;
color: #fff;
text-align: center;
padding: 16px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
flex: 1; /* Takes up remaining vertical space */
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
margin-top: auto; /* Pushes footer to bottom of viewport */
}
</style>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2 align="center">Main Content</h2>
<p align="center">This is the main content of the page.</p>
</section>
</main>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>
]]>
OUTPUT:
Example 2
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Column Layout</title>
<style>
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #CCD1D1; /* Light gray background */
margin: 0;
padding: 0;
}
nav {
background-color: #597EBA;/* Dark background color for the navbar */
text-align: center;/* Center align text within the navbar */
padding: 20px 0;/* Padding on the top and bottom of the navbar */
}
nav ul {
list-style-type: none; /* Remove default list styles (bullets) */
margin: 0;/* Remove default margin */
padding: 0;/* Remove default padding */
}
nav ul li {
display: inline;/* Display list items horizontally */
margin-right: 20px;/* Right margin between list items */
}
nav ul li a {
text-decoration: none;/* Remove underline from links */
color: #fff;/* Text color (white) */
font-size: 18px; /* Font size of the links */
padding: 20px 15px;/* Padding inside each link */
}
nav ul li a:hover {
background-color: tomato;/* Background color on hover */
}
footer {
background-color: #597EBA;
color: #fff;
text-align: center;
padding: 20px;
width: 100%;
position: fixed;
bottom: 0px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div style="padding: 120px;">
<h1 align="center">Welcome to PBA INSTITUTE</h1>
<h3 align="center">Example of a Layout.</h3>
</div>
<footer>
<h1 class="footer1">Footer</h1>
</footer>
</body>
</html>
]]>
OUTPUT:
Conclusion :
In conclusion, CSS layout offers flexible and precise control over webpage structure, enhancing usability and aesthetics. It enables responsive design, ensuring content adapts seamlessly across devices. CSS Grid and Flexbox simplify complex layouts, improving code maintainability and developer efficiency. Floats provide legacy support for basic layout needs. Overall, CSS layout empowers designers to create visually appealing, accessible, and user-friendly websites, optimizing user experience by organizing content logically and efficiently on both desktop and mobile platforms.
SHARE
