CSS Application-Based 10-Mark Questions with Solutions
Question 1: Class Selector and ID Selector
Create a webpage for an online shopping website using: • A class selector to style all product names in blue color • An
ID selector to style the main heading in red color and center alignment Write the HTML and CSS code.
<!DOCTYPE html>
<html>
<head>
<style>
#mainHeading {
color: red;
text-align: center;
}
.product {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h1 id="mainHeading">Online Shopping Store</h1>
<p class="product">Laptop</p>
<p class="product">Mobile Phone</p>
<p class="product">Smart Watch</p>
</body>
</html>
Explanation: • #mainHeading styles the heading using an ID selector. • .product styles multiple product names using a
class selector.
Question 2: div and span Elements
Design a webpage using: • A div element to create a bordered content section • A span element to highlight important
words in red color
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 2px solid black;
padding: 20px;
background-color: lightgray;
}
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
Learning <span class="highlight">CSS</span> is important.
</div>
</body>
</html>
Explanation: • div creates a block-level container. • span highlights inline text.
Question 3: Cascading in CSS
Create a webpage showing: • Inline CSS • Internal CSS • External CSS Explain which style has highest priority.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
</style>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<p style="color:red;">This text uses inline CSS.</p>
</body>
</html>
Explanation: Priority Order: 1. Inline CSS 2. Internal CSS 3. External CSS
Question 4: CSS Font and Text Properties
Create a news webpage using: • Font properties • Text properties • line-height property
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-family: Arial;
text-align: center;
text-transform: uppercase;
}
p {
font-size: 18px;
line-height: 2;
text-align: justify;
}
</style>
</head>
<body>
<h1>Daily News</h1>
<p>
CSS improves webpage design and readability.
</p>
</body>
</html>
Explanation: • font-family changes text style. • line-height improves readability. • text-transform changes text
appearance.
Question 5: Border, Padding, and Margin
Create a webpage with a content box using: • Border property • Padding property • Margin property
<!DOCTYPE html>
<html>
<head>
<style>
.box {
border: 3px solid black;
padding: 20px;
margin: 30px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">
This is a content box.
</div>
</body>
</html>
Explanation: • Border creates outline. • Padding creates inner spacing. • Margin creates outer spacing.
Question 6: CSS Box Model
Explain the CSS Box Model with suitable HTML and CSS code.
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid blue;
margin: 25px;
}
</style>
</head>
<body>
<div class="box">
CSS Box Model Example
</div>
</body>
</html>
Explanation: The CSS Box Model consists of: 1. Content 2. Padding 3. Border 4. Margin
Question 7: External CSS File
Develop a webpage using an external CSS file.
HTML:
<link rel="stylesheet" href="[Link]">
[Link]:
body {
background-color: lightyellow;
}
h1 {
color: blue;
}
p {
font-size: 18px;
}
Explanation: External CSS separates webpage design from HTML structure.
Question 8: line-height Property
Create a webpage demonstrating the use of line-height property.
<!DOCTYPE html>
<html>
<head>
<style>
p {
line-height: 2;
font-size: 18px;
}
</style>
</head>
<body>
<p>
Line height improves readability.
</p>
</body>
</html>
Explanation: line-height controls spacing between text lines.
Question 9: Complete Webpage Design
Create a student profile webpage using: • Class selectors • ID selectors • Borders • Padding • Font properties
<!DOCTYPE html>
<html>
<head>
<style>
#title {
color: red;
text-align: center;
}
.profile {
border: 2px solid black;
padding: 20px;
margin: 20px;
font-family: Arial;
}
</style>
</head>
<body>
<h1 id="title">Student Profile</h1>
<div class="profile">
<p>Name: John</p>
<p>Course: BCA</p>
</div>
</body>
</html>
Explanation: This webpage combines multiple CSS concepts.
Question 10: Product Advertisement Webpage
Create a product advertisement webpage using: • Background colors • Borders • Text styling • Margins and padding
<!DOCTYPE html>
<html>
<head>
<style>
.ad {
background-color: lightgreen;
border: 3px solid black;
padding: 25px;
margin: 30px;
text-align: center;
}
h1 {
color: darkblue;
}
</style>
</head>
<body>
<div class="ad">
<h1>New Smartphone Launch</h1>
<p>Best features at affordable price.</p>
</div>
</body>
</html>
Explanation: CSS improves webpage appearance and user experience.