In this section, we will focus on applying CSS to style the various components of our responsive website project. This involves using the knowledge and techniques we've learned throughout the course to create a visually appealing and functional design.
Key Concepts
- Component-Based Design: Breaking down the website into smaller, reusable components.
- Consistent Styling: Ensuring a cohesive look and feel across all components.
- Responsive Design: Making sure components adapt to different screen sizes.
Steps to Style the Components
- Header
The header typically contains the logo and navigation menu. We will style it to be visually appealing and responsive.
<header class="site-header">
<div class="logo">MyWebsite</div>
<nav class="main-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>
</header>/* Header Styling */
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #333;
color: #fff;
}
.site-header .logo {
font-size: 24px;
font-weight: bold;
}
.main-nav ul {
list-style: none;
display: flex;
gap: 15px;
}
.main-nav a {
color: #fff;
text-decoration: none;
}
.main-nav a:hover {
text-decoration: underline;
}
- Hero Section
The hero section is the prominent section at the top of the page, often containing a background image and a call-to-action.
<section class="hero">
<div class="hero-content">
<h1>Welcome to MyWebsite</h1>
<p>Your one-stop solution for web development.</p>
<a href="#" class="btn">Get Started</a>
</div>
</section>/* Hero Section Styling */
.hero {
background-image: url('hero-bg.jpg');
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
padding: 100px 20px;
}
.hero-content h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero-content p {
font-size: 18px;
margin-bottom: 30px;
}
.hero-content .btn {
background-color: #ff5733;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
.hero-content .btn:hover {
background-color: #c70039;
}
- Features Section
This section highlights the key features or services offered.
<section class="features">
<div class="feature">
<h2>Feature 1</h2>
<p>Description of feature 1.</p>
</div>
<div class="feature">
<h2>Feature 2</h2>
<p>Description of feature 2.</p>
</div>
<div class="feature">
<h2>Feature 3</h2>
<p>Description of feature 3.</p>
</div>
</section>/* Features Section Styling */
.features {
display: flex;
justify-content: space-around;
padding: 50px 20px;
background-color: #f4f4f4;
}
.feature {
text-align: center;
max-width: 300px;
}
.feature h2 {
font-size: 24px;
margin-bottom: 10px;
}
.feature p {
font-size: 16px;
}
- Footer
The footer contains additional navigation links and contact information.
<footer class="site-footer">
<div class="footer-content">
<p>© 2023 MyWebsite. All rights reserved.</p>
<nav class="footer-nav">
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</footer>/* Footer Styling */
.site-footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.footer-nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 15px;
padding: 0;
}
.footer-nav a {
color: #fff;
text-decoration: none;
}
.footer-nav a:hover {
text-decoration: underline;
}Practical Exercise
Task
- Create a new HTML file and include the header, hero section, features section, and footer as shown above.
- Apply the provided CSS styles to each section.
- Make sure the website is responsive by testing it on different screen sizes.
Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyWebsite</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<div class="logo">MyWebsite</div>
<nav class="main-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>
</header>
<section class="hero">
<div class="hero-content">
<h1>Welcome to MyWebsite</h1>
<p>Your one-stop solution for web development.</p>
<a href="#" class="btn">Get Started</a>
</div>
</section>
<section class="features">
<div class="feature">
<h2>Feature 1</h2>
<p>Description of feature 1.</p>
</div>
<div class="feature">
<h2>Feature 2</h2>
<p>Description of feature 2.</p>
</div>
<div class="feature">
<h2>Feature 3</h2>
<p>Description of feature 3.</p>
</div>
</section>
<footer class="site-footer">
<div class="footer-content">
<p>© 2023 MyWebsite. All rights reserved.</p>
<nav class="footer-nav">
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>/* styles.css */
/* Header Styling */
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #333;
color: #fff;
}
.site-header .logo {
font-size: 24px;
font-weight: bold;
}
.main-nav ul {
list-style: none;
display: flex;
gap: 15px;
}
.main-nav a {
color: #fff;
text-decoration: none;
}
.main-nav a:hover {
text-decoration: underline;
}
/* Hero Section Styling */
.hero {
background-image: url('hero-bg.jpg');
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
padding: 100px 20px;
}
.hero-content h1 {
font-size: 48px;
margin-bottom: 20px;
}
.hero-content p {
font-size: 18px;
margin-bottom: 30px;
}
.hero-content .btn {
background-color: #ff5733;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
}
.hero-content .btn:hover {
background-color: #c70039;
}
/* Features Section Styling */
.features {
display: flex;
justify-content: space-around;
padding: 50px 20px;
background-color: #f4f4f4;
}
.feature {
text-align: center;
max-width: 300px;
}
.feature h2 {
font-size: 24px;
margin-bottom: 10px;
}
.feature p {
font-size: 16px;
}
/* Footer Styling */
.site-footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.footer-nav ul {
list-style: none;
display: flex;
justify-content: center;
gap: 15px;
padding: 0;
}
.footer-nav a {
color: #fff;
text-decoration: none;
}
.footer-nav a:hover {
text-decoration: underline;
}Conclusion
In this section, we learned how to style various components of a website, including the header, hero section, features section, and footer. We applied CSS properties to ensure that each component is visually appealing and responsive. By breaking down the website into smaller, manageable parts, we can create a cohesive and professional-looking design. In the next section, we will focus on making the entire site responsive to different screen sizes.
CSS Mastery: From Beginner to Advanced
Module 1: Introduction to CSS
- What is CSS?
- CSS Syntax and Selectors
- How to Add CSS to HTML
- Basic CSS Properties
- CSS Colors
- CSS Units and Measurements
Module 2: Text and Font Styling
- Text Properties
- Font Properties
- Google Fonts Integration
- Text Alignment and Spacing
- Text Decoration and Transformation
Module 3: Box Model and Layout
- Understanding the Box Model
- Margin and Padding
- Border and Outline
- Width and Height
- Box Sizing
- CSS Display Property
Module 4: Positioning and Floating
- CSS Position Property
- Static, Relative, Absolute, and Fixed Positioning
- CSS Float and Clear
- Creating Layouts with Float
- CSS Z-Index
Module 5: Flexbox
- Introduction to Flexbox
- Flex Container Properties
- Flex Item Properties
- Creating Layouts with Flexbox
- Responsive Design with Flexbox
Module 6: CSS Grid
- Introduction to CSS Grid
- Grid Container Properties
- Grid Item Properties
- Creating Layouts with CSS Grid
- Responsive Design with CSS Grid
Module 7: Advanced CSS Techniques
Module 8: Responsive Design
- Introduction to Responsive Design
- Media Queries
- Responsive Typography
- Responsive Images
- Mobile-First Design
Module 9: Preprocessors and Frameworks
- Introduction to CSS Preprocessors
- Sass Basics
- Less Basics
- Introduction to CSS Frameworks
- Using Bootstrap