Form Styling and Website Layout
Learn to style beautiful forms and create responsive website layouts
Learning Outcomes
- Style all form elements including inputs, buttons, and labels
- Create accessible and user-friendly form designs
- Build responsive website layouts with modern CSS
- Implement best practices for web design and user experience
- Use CSS Grid and Flexbox for complex layouts
Form Styling
Well-designed forms improve user experience and conversion rates. Modern CSS allows us to create beautiful, accessible forms.
Contact Us
<form>
<div class="form-group">
<label for="name" class="form-label">Full Name</label>
<input type="text" id="name" class="form-control" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email" class="form-label">Email Address</label>
<input type="email" id="email" class="form-control" placeholder="Enter your email">
</div>
<button type="submit" class="btn btn-block">Send Message</button>
</form>
<style>
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 5px;
transition: border-color 0.3s;
}
.form-control:focus {
border-color: var(--burgundy-main);
outline: none;
}
.btn {
padding: 12px 24px;
background-color: var(--burgundy-main);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>Form Styling Best Practices
- Use proper labels for all form inputs
- Ensure sufficient contrast between text and background
- Provide clear focus states for keyboard navigation
- Group related form elements together
- Use appropriate input types (email, tel, etc.) for better mobile experience
Website Layout
Creating a well-structured layout is fundamental to good web design. Modern CSS provides powerful tools for building responsive layouts.
Basic Website Layout
Website Header
Main Content
Primary content area with articles, products, etc.
<div class="website-layout">
<header class="layout-header">
<h2>Website Header</h2>
</header>
<nav class="layout-nav">
<ul>
<li><a href="#">Home</a></li>
<!-- More nav items -->
</ul>
</nav>
<div class="layout-body">
<aside class="layout-sidebar">
<h3>Sidebar</h3>
</aside>
<main class="layout-main">
<h3>Main Content</h3>
</main>
</div>
<footer class="layout-footer">
<p>Copyright information</p>
</footer>
</div>
<style>
.layout-body {
display: grid;
grid-template-columns: 1fr 3fr;
}
.layout-header {
background-color: var(--burgundy-main);
color: white;
padding: 20px;
}
.layout-nav {
background-color: var(--burgundy-dark);
padding: 15px;
}
.layout-nav ul {
display: flex;
list-style: none;
}
.layout-footer {
background-color: var(--burgundy-dark);
color: white;
padding: 20px;
}
</style>Responsive Grid Layout
CSS Grid allows us to create complex, responsive layouts with minimal code.
Feature One
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Feature Two
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Feature Three
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Feature Four
Duis aute irure dolor in reprehenderit in voluptate velit esse.
<div class="grid-example">
<div class="grid-item">
<h4>Feature One</h4>
<p>Content goes here</p>
</div>
<!-- More grid items -->
</div>
<style>
.grid-example {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.grid-item {
background-color: white;
border: 1px solid #eee;
border-radius: 8px;
padding: 20px;
transition: transform 0.3s;
}
.grid-item:hover {
transform: translateY(-5px);
}
</style>