CST463 Web Programming: CSS Tutorial
- Solved
Question 1: CSS Selectors and Styling
Write CSS code to create two different styles for paragraph elements: Style 1 (class: "highlight")
and Style 2 (class: "emphasis"). Also write the corresponding HTML code that uses both these
styles in different paragraphs.
Answer:
This question tests your ability to create and apply CSS classes to HTML elements.
CSS Code:
/* Style 1 for the 'highlight' class */
.highlight {
color: red;
font-family: "Times New Roman", serif;
font-style: italic;
text-align: center;
text-indent: 2em; /* Indents the first line */
}
/* Style 2 for the 'emphasis' class */
.emphasis {
background-color: yellow;
border: 2px solid blue;
padding: 10px;
text-decoration: underline;
font-weight: bold;
}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Question 1</title>
<link rel="stylesheet" href="styles.css"> <!-- Assuming CSS is in
a separate file -->
</head>
<body>
<h1>CSS Selectors and Styling</h1>
<p class="highlight">
This paragraph uses the "highlight" style. It should be red,
centered, italic, in Times New Roman, and the first line should be
indented.
</p>
<p class="emphasis">
This paragraph uses the "emphasis" style. It should have a
yellow background, a solid blue border, 10px of padding, be
underlined, and bold.
</p>
</body>
</html>
Question 2: Link States and List Styling
Create a complete HTML page with embedded CSS that implements styling for link states,
ordered lists, unordered lists, and a page background image.
Answer:
This question requires you to use pseudo-classes for links (:hover, :active, :visited) and
properties for styling lists and the page body.
HTML and Embedded CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Question 2</title>
<style>
/* 5. Set background image */
body {
/* NOTE: Replace 'nature.jpg' with a valid image path or
URL */
background-image:
url('https://placehold.co/1920x1080/a9d8c8/333333?text=Nature+Backgrou
nd');
background-repeat: no-repeat;
background-size: cover; /* Ensures the image covers the
whole page */
}
/* 1. Style for hover and active link states */
a:hover, a:active {
background-color: orange;
}
/* 2. Style for visited links */
a:visited {
color: purple;
text-decoration: none; /* Removes the underline */
}
/* 3. Style for ordered lists */
ol {
list-style-type: upper-roman; /* I, II, III, ... */
}
/* 4. Style for unordered lists */
ul {
list-style-type: square;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<!-- 1. Navigation menu with links -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services (visited)</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- 2. Ordered list of favorite subjects -->
<h2>My Favorite Subjects</h2>
<ol>
<li>Web Programming</li>
<li>Data Structures</li>
<li>Database Management Systems</li>
<li>Operating Systems</li>
<li>Computer Networks</li>
</ol>
<!-- 3. Unordered list of programming languages -->
<h2>Programming Languages I Know</h2>
<ul>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>C++</li>
</ul>
</body>
</html>
Question 3: CSS Box Model and Positioning
Write CSS and HTML code for a layout with a header, a sidebar (absolutely positioned), and a
content div.
Answer:
This question assesses your understanding of the CSS box model (width, height, padding,
border, margin) and positioning properties.
CSS Code:
/* General body styling to remove default margin */
body {
margin: 0;
font-family: sans-serif;
}
/* 1. Header div styling */
.header {
width: 100%;
height: 80px;
background-color: navy;
color: white;
text-align: center;
padding: 20px;
/* Use box-sizing to include padding in the total width/height */
box-sizing: border-box;
}
/* 2. Sidebar div styling */
.sidebar {
width: 200px;
height: 400px;
background-color: lightgray;
position: absolute;
/* Positioned relative to the viewport */
top: 80px; /* Sits just below the header */
left: 0px;
border: 1px solid black;
padding: 10px; /* Added padding for content */
}
/* 3. Content div styling */
.content {
/* Margin to prevent overlap with the sidebar */
margin-left: 220px; /* 200px sidebar width + 20px buffer */
padding: 15px;
border: 2px dashed green;
/* Position relative is often used as a container for absolutely
positioned children */
position: relative;
}
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Question 3</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Page Header</h1>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>This is the sidebar content. It is absolutely
positioned.</p>
</div>
<div class="content">
<h2>Main Content Area</h2>
<p>This is the main content of the page. It has a left margin
to avoid being covered by the sidebar.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed non risus. Suspendisse lectus tortor, dignissim sit amet,
adipiscing nec, ultricies sed, dolor.</p>
</div>
</body>
</html>
Question 4: Advanced CSS Concepts
Create a responsive webpage layout that includes a styled table, a styled form, and a media
query for mobile devices.
Answer:
This question combines several advanced topics: styling tables and forms, using the nth-child
selector, and implementing responsive design with media queries.
HTML and Embedded CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Question 4</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 15px;
}
/* 1. Table Styling */
.marks-table {
width: 100%;
border-collapse: collapse; /* Removes space between
borders */
margin-bottom: 30px;
}
.marks-table th, .marks-table td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
.marks-table thead {
background-color: darkblue;
color: white;
}
/* Alternating row colors using nth-child */
.marks-table tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
/* 2. Form Styling */
.contact-form {
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
}
.contact-form label {
font-weight: bold;
display: block; /* Makes label take its own line */
margin-bottom: 5px;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px; /* Rounded borders */
box-sizing: border-box;
}
.contact-form .submit-btn {
background-color: #007BFF;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease; /* Smooth
transition for hover */
}
/* Submit button hover effect */
.contact-form .submit-btn:hover {
background-color: #0056b3;
}
/* 3. Media Query for mobile devices */
@media (max-width: 768px) {
body {
font-size: 14px; /* Reduce font size */
}
/* Stack form elements vertically (already done with
display:block on labels) */
/* You could add more stacking rules here if needed */
}
</style>
</head>
<body>
<h1>Advanced CSS</h1>
<h2>Student Marks</h2>
<table class="marks-table">
<thead>
<tr>
<th>Student Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Maths</td>
<td>85</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Science</td>
<td>92</td>
</tr>
<tr>
<td>Peter Jones</td>
<td>History</td>
<td>78</td>
</tr>
<tr>
<td>Mary Williams</td>
<td>English</td>
<td>88</td>
</tr>
</tbody>
</table>
<h2>Contact Us</h2>
<form class="contact-form">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</div>
<button type="submit" class="submit-btn">Submit</button>
</form>
</body>
</html>
