Q2A. Website using CSS 2.1

Question 2A:
Design a website using CSS 2.1.

In this example, we will create a simple website using only CSS 2.1 features such as typography, background colors, borders, and layout.

Example: Homepage with CSS 2.1

File Name: index-css21.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>CSS 2.1 Website</title>
    <link rel="stylesheet" href="style-css21.css" />
  </head>
  <body>
    <!-- Header -->
    <div class="header">
      <h1>Welcome to CSS 2.1 Website</h1>
      <p class="tagline">Basic styling with CSS 2.1 @ansariintesab</p>
    </div>
 
    <!-- Navigation -->
    <div class="navbar">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact</a>
    </div>
 
    <!-- Main Content -->
    <div class="content">
      <h2>About This Website</h2>
      <p>
        This page is styled only with CSS 2.1 features like background
        colors, borders, and font styling.
      </p>
    </div>
 
    <!-- Footer -->
    <div class="footer">
      <p>© 2025 CSS 2.1 Ansari Intesab</p>
    </div>
  </body>
</html>

File Name: style-css21.css


/*
* Author: Ansari In
*/
 
/* CSS 2.1 Styling */
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
}
 
.header {
  background: #333;
  color: white;
  padding: 20px;
  text-align: center;
}
 
.tagline {
  font-style: italic;
}
 
.navbar {
  background: #444;
  padding: 10px;
  text-align: center;
}
 
.navbar a {
  color: white;
  text-decoration: none;
  margin: 0 15px;
}
 
.navbar a:hover {
  text-decoration: underline;
}
 
.content {
  padding: 20px;
  background: white;
  border: 1px solid #ccc;
  margin: 20px;
}
 
.footer {
  background: #222;
  color: #ccc;
  text-align: center;
  padding: 15px;
  font-size: 14px;
}

Output Preview : `CSS 2.1 Website`

CSS 2.1 Example Link

Q2A. Website using CSS 2.1

Example: Homepage with CSS 2.1

Output Preview : CSS 2.1 Website

Output Preview : `CSS 2.1 Website`