Scribd
Upload
9 views4 pages

QP Scenario Based HTML-CSS

The document presents various scenarios related to web development, focusing on the use of JavaScript and CSS properties. It includes true/false questions regarding the functionality of <noscript> tags and multiple-choice questions about CSS rules for text decoration, borders, alignment, and transitions. Each scenario is followed by the correct answers, providing a comprehensive overview of best practices in web design.

Uploaded by

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

QP Scenario Based HTML-CSS

The document presents various scenarios related to web development, focusing on the use of JavaScript and CSS properties. It includes true/false questions regarding the functionality of <noscript> tags and multiple-choice questions about CSS rules for text decoration, borders, alignment, and transitions. Each scenario is followed by the correct answers, providing a comprehensive overview of best practices in web design.

Uploaded by

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

Scenario 1:

A developer includes a JavaScript file in their webpage using the <script> tag. They also add a
<noscript> section that displays a message: "JavaScript is required to view this content" for users who
have disabled JavaScript in their browsers.

Question 1 (True/False):

The <noscript> content will only be displayed if the user's browser does not support JavaScript or
JavaScript is disabled.
Answer: True

Scenario 2:

A webpage uses the <script> tag to execute a JavaScript function that dynamically displays today's
date. However, if the browser does not support JavaScript, the <noscript> tag provides a fallback
message saying, "Your browser does not support JavaScript. Please update your browser."

Question 2 (True/False):

The <noscript> tag is ignored by all browsers that have JavaScript enabled, even if the JavaScript
function in the <script> tag fails to execute.
Answer: True

Scenario 1: Text Decoration

A webpage has a heading styled with text-decoration: underline; to emphasize it. However, the
designer wants to remove the underline when the user hovers over the heading.

Question 1:

Which of the following CSS rules removes the underline on hover?


A) text-decoration: none;
B) text-decoration: unset;
C) text-decoration: hover;
D) text-decoration: inherit;

Answer: A) text-decoration: none;

Scenario 2: Text Border

A developer wants to highlight a quote on the webpage by giving it a border around the text only,
without affecting the padding or margin around the text block.
Question 2:

Which CSS property is suitable for creating a border around the text content?
A) border
B) text-border
C) outline
D) text-stroke

Answer: D) text-stroke (requires browser support, commonly seen with -webkit-text-stroke).

Scenario 3: Text Background

A website's paragraph has a yellow background applied behind its text to make it more readable on a
dark background.

Question 3:

Which CSS property is used to apply a background color to the text itself?
A) background-color
B) text-background
C) text-highlight
D) color

Answer: A) background-color

Scenario 4: Text Alignment

A news website has a section where article titles are centered within their container for a clean and
uniform look.

Question 4:

Which CSS property aligns the text to the center?


A) justify-content
B) align-items
C) text-align
D) vertical-align

Answer: C) text-align

Scenario 1: Opacity Transition

A developer creates a button that fades in when a user hovers over it. The button starts with opacity:
0.5 and transitions to opacity: 1.

Question 1:
Which of the following CSS rules will achieve the fading effect on hover?

A) transition: opacity 0.5s ease;


B) transition: all 0.5s ease;
C) Both A and B
D) animation: opacity 0.5s ease;

Answer: C) Both A and B

Scenario 2: Scale Transition

An image gallery enlarges each thumbnail slightly when hovered over, creating a zoom-in effect.

Question 2:

Which of the following CSS rules creates the zoom-in effect?

A) transform: scale(1.2);
B) transition: transform 0.5s ease;
C) transform: scale(1.2); transition: transform 0.5s ease;
D) animation: zoom-in 0.5s ease;

Answer: C) transform: scale(1.2); transition: transform 0.5s ease;

Scenario 3: Rotate Transition

A social media sharing icon rotates by 360 degrees when hovered over for a smooth spinning effect.

Question 3:

Which of the following CSS properties achieves this effect?

A) transform: rotate(360deg);
B) transition: transform 1s linear;
C) transform: rotate(360deg); transition: transform 1s linear;
D) animation: rotate 1s linear;

Answer: C) transform: rotate(360deg); transition: transform 1s linear;

Scenario 4: Filter Blur Transition

A website banner applies a blur effect to an image when the user hovers over it.

Question 4:

Which of the following CSS rules applies the blur effect smoothly?
A) filter: blur(5px);
B) transition: filter 0.3s ease;
C) filter: blur(5px); transition: filter 0.3s ease;
D) animation: blur 0.3s ease;

Answer: C) filter: blur(5px); transition: filter 0.3s ease;

Scenario 5: Brightness Transition

An e-commerce site highlights products by increasing the brightness of images on hover.

Question 5:

Which CSS rule adjusts the brightness smoothly when hovered?

A) filter: brightness(150%);
B) transition: filter 0.5s ease;
C) filter: brightness(150%); transition: filter 0.5s ease;
D) transform: brightness(150%); transition: brightness 0.5s ease;

Answer: C) filter: brightness(150%); transition: filter 0.5s ease;

You might also like