Q2B. Website using CSS3
Question 2B:
Design a website using CSS3.
In this example, we will create a modern styled webpage using CSS3 features such as gradients, shadows, rounded corners, and transitions.
Example: Homepage with CSS3
File Name: index-css3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>CSS3 Website</title>
<link rel="stylesheet" href="style-css3.css" />
</head>
<body>
<!-- Header -->
<header class="site-header">
<h1>Welcome to CSS3 Website</h1>
<p class="tagline">Modern design with CSS3 @ansariintesab</p>
</header>
<!-- Navigation -->
<nav class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Projects</a>
<a href="#">Contact</a>
</nav>
<!-- Main Content -->
<main class="content">
<section class="card">
<h2>CSS3 Features</h2>
<p>
This example uses gradients, box-shadows, text-shadows,
rounded corners, and smooth transitions.
</p>
</section>
<section class="card">
<h2>Responsive Design</h2>
<p>
The layout adapts to different screen sizes using modern CSS
properties.
</p>
</section>
</main>
<!-- Footer -->
<footer class="site-footer">
<p>© 2025 Ansari Intesab</p>
</footer>
</body>
</html>File Name: style-css3.css
/*
* Author: Ansari In
*/
/* Modern CSS3 Styling */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
.site-header {
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: white;
padding: 40px;
text-align: center;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.navbar {
background: #333;
display: flex;
justify-content: center;
gap: 20px;
padding: 15px;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
.navbar a:hover {
color: #ff9a9e;
}
.content {
display: flex;
justify-content: center;
gap: 20px;
padding: 30px;
flex-wrap: wrap;
}
.card {
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
width: 300px;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-8px);
}
.site-footer {
background: #222;
color: #ccc;
text-align: center;
padding: 20px;
font-size: 14px;
}Output Preview : CSS3 Website
Difference Between CSS 2.1 and CSS3
The table below highlights some of the major differences between CSS 2.1 and CSS3:
| Feature / Property | CSS 2.1 | CSS3 |
|---|---|---|
| Module System | Monolithic specification (all in one) | Divided into independent modules (Selectors, Backgrounds, Transitions, etc.) |
| Selectors | Basic selectors (element, class, id) | Advanced selectors (:nth-child, :not, :last-child, etc.) |
| Backgrounds | Single background per element | Multiple backgrounds, gradients (linear & radial) supported |
| Borders | Simple solid, dotted, dashed | Rounded corners (border-radius), border images |
| Colors | Limited color formats (hex, rgb) | RGBA, HSLA, opacity support |
| Layout | Floats, positioning, tables | Flexbox, Grid, advanced positioning |
| Animations | Not supported | Transitions & Keyframe animations supported |
| Shadows | Not supported | Text shadows & box shadows |
| Media Queries | Not supported | Introduced in CSS3 for responsive design |
| Browser Support (Legacy) | Wide support in older browsers | Better in modern browsers, some old browsers need fallback |
Summary
- CSS 2.1 → Basic styling, limited layout features, no animations.
- CSS3 → Modular, modern, responsive, supports transitions, flexbox, grid, shadows, and gradients.
Last updated on