Scribd
Upload
21 views8 pages

One & Two Marks

Uploaded by

njawaharlal419
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
21 views8 pages

One & Two Marks

Uploaded by

njawaharlal419
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

One Marks

1. _______________ sets the stacking order of positioned elements.


Answer: z-index
2. If an element has margin:10px; and padding:20px;, what is the space
between the element and its neighboring element?
a. 10px
3. Assertion (A): The float property in CSS is used to position elements
side by side.
Reason (R): The float property removes the element from the normal
document flow.
Answer: a) Both A and R are true, and R is the correct explanation of
A.
4. __________is the correct syntax to select the p siblings of a div element.
Answer: d. div ~ p
5. _________ adds more importance to a property/value than normal in
CSS.
Answer: !important
6. Say True/False: Can negative values be allowed in the padding
property.
Answer: False
7. _________ display hyperlinks without an underline.
Answer: a. a {text-decoration: none;}
8. ___________ is used to specify whether the table cells share the common
or separate border.
Answer: a. border-collapse
9. Say True/False: The <iframe> tag is used to display images on a
webpage.
Answer: False
10.The_________ attribute in HTML can be used multiple times in a
document.
Answer: class
11.__________ CSS property is used for controlling the layout.
Answer: a. Display
12. In the below code snippet, in what order will the margins be
added?
p {margin: 25px 50px 75px 100px;}
Answer: a. Top, Right, Bottom, Left
13.Choose the correct selector to target the first <li> element in an
unordered list.
A) ul:first-child B) ul li:first-child C) ul > li:first D) li:first-child

Ans B) ul li:first-child

14.Say True/False: The white-space property in CSS can be used to


prevent text from wrapping onto a new line. Ans True
15.Say True/False: The background-image property in CSS can only
accept URL-based values. Ans False
16.__________selector targets all <a> elements that have a href attribute.
A) a[href] B) a[href*] C) a[href^] D) a[href$] Ans A) a[href]
17.Identify the result of setting text-align: justify; in a CSS rule.

A. Text is aligned to the left only.

B. Text is evenly spaced on both left and right sides.

C. Text is aligned to the center.

D. Text is aligned to the right only.

Ans B. Text is evenly spaced on both left and right sides.

18.A clip-path can use shapes like circle, ellipse and __________ to define
the visible area of an element. Ans polygon
19.The CSS property letter-spacing can be increased by setting its value to
__________. Ans 2px
20.Identify the error in the following code and suggest a correction:

<div style="z-index: auto;">

<p>This paragraph has no specific stacking order.</p>

</div>

Error z-index: auto; Ans z-index: 1;


Match the Following
21.Media Queries - A. One-Dimensional
22.CSS Grid - B. Adaptability
23.Flexbox - C. Animations
24.Keyframes - D. Rows & Columns
Ans B,D,A,C
Two Marks
1.Create a button in CSS with the following styles: Rounded corners (border-
radius of 15px). A blue background that turns light blue when hovered. A
shadow effect.
Answer:
<html>
<head>
<title>CSS Button</title>
<style>
.rounded-button {
border: none;
border-radius: 15px;
background-color: blue;
color: white;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s ease;
}
.rounded-button:hover {
background-color: lightblue;
}
</style>
</head>
<body>
<button class="rounded-button">Click Me</button>
</body>
</html>
2. Find and correct the mistake in the following CSS
.box {
Width: 100px;
Height: 100px;
Background-color: red;
Border-radius: 50px;
Display: center;
}
Answer:

Problem: The display property cannot take the value center.

Solution: Replace display: center; with display: flex; and add justify-content
and align-items for centering

.box {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
}
3. Develop a CSS rule to display a <div>’s content in three columns with a
20px gap between columns.
Answer:
<html>
<head>
<title>Three Column Layout</title>
<style>
.three-column-layout {
column-count: 3;
column-gap: 20px;
}
</style>
</head>
<body>
<div class="three-column-layout">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Vivamus lacinia odio vitae vestibulum vestibulum.</p>
<p>Cras venenatis euismod malesuada.</p>
</div>
</body>
</html>
4. Create a program to illustrate the concept of CSS inheritance by styling a
parent <div> element with a font color of green, ensuring all child elements
automatically inherit this style.
Answer:
< html>
<head>
<title>CSS Inheritance Example</title>
</head>
<body>
<div style="color: green;">
<h1>This is a heading</h1>
<p>This is a paragraph within the parent <div>.</p>
<span>This is a span inside the parent <div>.</span>
</div>
</body>
</html>
5. Apply inline CSS to style a paragraph with a font size of 16px, font color of
blue, bold text and a background color of light gray. Provide the code snippet
to showcase this.
Answer:
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<p style="font-size: 16px; color: blue; font-weight: bold; background-color:
lightgray;">
This is a styled paragraph with inline CSS.
</p>
</body>
</html>
6. Illustrate how CSS transitions work and provide an example where the
background color of a button changes smoothly when hovered over.
Answer:
<html>
<head>
<style>
button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: green;
}
</style>
</head>
<body>
<button>Hover Me!</button>
</body>
</html>

You might also like