Scribd
Upload
16 views63 pages

CSS SA Solution

The document contains a series of questions and answers related to CSS and HTML concepts, including attribute selectors, positioning, Sass variables, and text alignment. Each question is followed by a detailed explanation of the correct answer, highlighting key points and best practices. The document serves as a study guide for web development principles, focusing on accessibility and proper styling techniques.

Uploaded by

153-CSE- SUPRATIM MAITY
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
16 views63 pages

CSS SA Solution

The document contains a series of questions and answers related to CSS and HTML concepts, including attribute selectors, positioning, Sass variables, and text alignment. Each question is followed by a detailed explanation of the correct answer, highlighting key points and best practices. The document serves as a study guide for web development principles, focusing on accessibility and proper styling techniques.

Uploaded by

153-CSE- SUPRATIM MAITY
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/ 63

Question 1:

<html>
<head>
<style>
div > input[type^="t"] {
border: none;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<div>
<input type="number" placeholder="number">
<input type="text" placeholder="text">
<input type="password" placeholder="password">
<input type="tel" placeholder="tel">
</div>
</body>
</html>

What will be the result of the above code?

a) Styling will apply to all the input fields


b) Styling will not be applied to any input fields as 't' is not a valid attribute value of type
c) Styling will apply to only type "text" and "tel"
d) Styling will apply to only type "text"

Correct Answer:
Option (c) Styling will apply to only type "text" and "tel"

Concept Recap: CSS Attribute Selector (^=)


The CSS attribute selector [attribute^="value"] selects all elements whose specified attribute value
begins with a particular string.

Syntax:

element[attribute^="value"] {
/* styles here */
}
This selector specifically targets elements with attributes that start exactly with the provided string.

Step-by-Step Analysis:

• The provided selector is:

div > input[type^="t"]

• It targets all direct child input elements within a <div>, whose type attribute value begins
with "t".
• Let's examine each input element in the given HTML:

Input Element Does type start with "t"? Result


<input type="number"> No (number) No style applied
<input type="text"> Yes (text) Style applied
<input type="password"> No (password) No style applied
<input type="tel"> Yes (tel) Style applied

• Thus, the style applies only to inputs of type "text" and "tel".

Key Points to Remember:

• [attribute^="value"] is a CSS attribute selector that applies styles to elements whose


specified attribute starts with the provided value.
• It’s case-sensitive; "T" and "t" are treated as different characters.
• Useful for targeting groups of related elements with common attribute prefixes.

Final Answer: Option (c)


Styling will apply to only type "text" and "tel".

Question 2:

In absolute positioning, the element goes out of the flow of the document.

a) True
b) False

Correct Answer:
Option (a) True
Concept Recap: CSS Positioning (Absolute)
The CSS position: absolute; property completely removes an element from the normal document
flow, placing it relative to its nearest positioned ancestor (relative, absolute, fixed, or sticky). If no
ancestor is positioned, it’s positioned relative to the initial containing block (usually the viewport).

Detailed Explanation:

• When an element is set to position: absolute;, it no longer occupies its original space in the
document.
• Other elements in the document behave as though the absolutely positioned element does not
exist—they will move to fill the space the element originally occupied.
• Absolutely positioned elements can be precisely placed using top, bottom, left, and right.

Example:

.container {
position: relative; /* parent positioned container */
}

.box {
position: absolute; /* removes element from document flow */
top: 50px;
left: 100px;
}

Key Points to Remember:

• position: absolute; takes elements out of the normal flow.


• The absolutely positioned element is positioned relative to the closest positioned ancestor or
the viewport.
• Normal document flow elements will ignore the absolutely positioned element entirely.

Final Answer: Option (a) True


Absolute positioning removes the element from the normal document flow.

Question 3:

Select the correct way of defining a variable in Sass.


a) #base-color: #c6538c;
b) %base-color: #c6538c;
c) &base-color: #c6538c;
d) $base-color: #c6538c;

Correct Answer:
Option (d) $base-color: #c6538c;

Concept Recap: Sass Variables


In Sass, variables are defined using the $ symbol. They allow you to store reusable values such as
colors, fonts, sizes, etc., to maintain consistency and ease of maintenance across your stylesheets.

Syntax:

$variable-name: value;

Detailed Explanation:

Let’s analyze each provided option:

Option Syntax Explanation


Validity
a) #base-color: Invalid # denotes IDs in CSS, not variables.
#c6538c;
b) %base-color: Invalid % denotes placeholders/selectors in Sass.
#c6538c;
c) &base-color: Invalid & is used for referencing parent selectors.
#c6538c;
d) $base-color: Valid Correct syntax for Sass variable
#c6538c; definition.

Key Points to Remember:

• Sass variables always start with the $ symbol.


• Variables enhance maintainability, readability, and consistency of styles.
• They are case-sensitive ($base-color and $Base-Color would be different variables).

Example Usage:

$base-color: #c6538c;

body {
background-color: $base-color;
}
Final Answer: Option (d) $base-color: #c6538c;
Sass variables must always start with a $.

Question 4:

What should be written in line1 so that the color of the page is blue on execution of the below code?

<!DOCTYPE html>
<html>
<head>
<style>
/* line1 */ {
background-color: blue;
}
</style>
</head>
<body class="my-mainpage">
<p class="my-page">
I am the page
</p>
</body>
</html>

a) html
b) body
c) .my-page
d) .my-mainpage

Correct Answer:
Option (b) body

Concept Recap: CSS Selectors and Styling


To set the background color of an entire webpage, the CSS selector must
target either the <html> or <body> elements, since these elements
represent the full visible area of the page.

Syntax:
body {
background-color: blue;
}

Detailed Explanation:

Let's analyze each provided option clearly:

Option Element Result Correct?


Targeted
a) html <html> element Colors entire viewport (can Possible, but less
work, but standard is body) common
b) body <body> element Colors the visible page content Correct

c) .my-page <p> element Only colors the paragraph, not Incorrect


whole page
d) .my- <body> element Also correct but requires Correct, but
mainpage via class matching class (given here unnecessary
correctly) complexity

Why option (b) is best:

• Directly targets the <body> element, reliably affecting the entire


visible page area.
• Simple, clear, and commonly used practice.

Key Points to Remember:

• Using the selector body is a standard and clear way to set page-wide styles.
• Targeting html also works but is less common in practice.
• Class-based targeting (.my-mainpage) works but adds unnecessary complexity if entire page
styling is needed.

Example Usage:

body {
background-color: blue;
}

Final Answer: Option (b) body


The simplest and most effective way to color the entire webpage background is to use the body
selector.
Question 5:
Which of the following is a bad practice while aligning your text for better accessibility?

a) text-align: right;
b) text-align: left;
c) text-align: justify;
d) All of the mentioned

Correct Answer:
Option (c) text-align: justify;

Concept Recap: Text Alignment and Accessibility


Text alignment plays a vital role in readability and accessibility, especially for users with visual or
cognitive impairments. While left-aligned text is most commonly recommended for natural reading
flow (especially in left-to-right languages), certain alignments can negatively impact legibility.

Detailed Explanation:

Let’s evaluate each option:

Option Readability Impact Accessibility Suitability


a) text-align: Can be difficult to read in LTR Not ideal, but not the worst
right; languages
b) text-align: Natural and easy to read for LTR Best for accessibility
left; readers
c) text-align: Creates uneven word spacing and Poor for people with
justify; "rivers of white" dyslexia or low vision
d) All of the Overgeneralization Left alignment is good
mentioned

Why justify is bad practice:

• It forces text to span the full width, adjusting word spacing awkwardly.
• Irregular spacing can distract and confuse readers.
• It especially affects people with dyslexia or cognitive disabilities who rely on predictable
word and spacing patterns.

Key Points to Remember:

• Use text-align: left for languages that read left to right.


• Avoid text-align: justify in accessible designs—it reduces readability.
• text-align: right may be appropriate for RTL languages but isn't optimal for LTR ones.
• Always design with clarity and reader comfort in mind.

Final Answer: Option (c) text-align: justify;


Using justified text is discouraged in accessibility-conscious design due to uneven spacing and
readability issues.

Question 6:
A web developer wants all the paragraph text in the HTML page to appear in blue in color. Which of
the below CSS code is appropriate to achieve the above requirement?

a) #p { color: blue; }
b) .p { color: blue; }
c) p { color: blue; }
d) cannot use CSS to fulfil the above requirement

Correct Answer:
Option (c) p { color: blue; }

Concept Recap: CSS Selectors – Element, Class, and ID


In CSS, selectors determine which HTML elements a style rule applies to. The element selector is
used to target all instances of a specific HTML tag.

Syntax:

p {
color: blue;
}

This will apply the color: blue style to all <p> tags on the page.

Detailed Explanation of Options:

Option Type of Targets What? Valid for Requirement?


Selector
a) #p ID selector Element with id="p" No – applies only to one
element
b) .p Class selector Elements with No – applies only to
class="p" class="p"
c) p Element All <p> tags Yes – matches all paragraphs
selector
d) cannot use — Incorrect statement CSS can definitely style
CSS paragraphs

Key Points to Remember:

• Use the element selector (like p) to apply styles to all tags of that type.
• # is for ID selectors (e.g., #header) – used once per page.
• . is for class selectors (e.g., .highlight) – used on any number of elements.
• CSS is the standard and recommended way to apply colors to HTML elements.

Example Implementation:

p {
color: blue;
}

Final Answer: Option (c) p { color: blue; }


This will make all paragraph (<p>) text appear in blue on the page.

Question 7:

<html>
<head>
<style>
span[align="right"] {
color: blue;
}
</style>
</head>
<body>
Welcome to <span align="left">Infosys</span>
</body>
</html>

What will be the result of the above code?

a) "Welcome to INFOSYS" with INFOSYS in blue color


b) "Welcome to" and all text will be in black color as align is not a valid attribute of span
c) "Welcome to INFOSYS" and INFOSYS will be in black color
d) "Welcome to INFOSYS" and INFOSYS will start from new line and will be in blue color
Correct Answer:
Option (c) "Welcome to INFOSYS" and INFOSYS will be in black color

Concept Recap: CSS Attribute Selectors and HTML Attributes


CSS can target elements based on their attributes using attribute selectors:

element[attribute="value"] {
/* styles here */
}

However, it's essential that:

1. The element actually has the matching attribute-value pair.


2. The attribute used is valid or supported on the element (to avoid confusion or invalid
markup).

Detailed Explanation:

• The CSS targets:

span[align="right"]

• This means: "Apply color: blue to any <span> element whose align attribute is exactly
"right"."
• In the HTML, the <span> has:

<span align="left">Infosys</span>

• Since the value is "left" and not "right", the CSS rule does not match, and therefore no color
styling is applied.
• Also, while the align attribute was once used in older HTML versions, it is now obsolete for
many elements like <span> and generally should be replaced with CSS for alignment.

Key Points to Remember:

• CSS [attribute="value"] selector matches only when the attribute and value both match
exactly.
• align="right" will not match align="left".
• align is obsolete for <span>, but it may still be parsed by browsers without visual effect.
• Since the CSS selector doesn’t match, the default browser style applies (black text).
Final Answer: Option (c)
"Welcome to INFOSYS" and INFOSYS will be in black color because the span does not match
the CSS selector.

Question 8:
Which of the following lists shown in the code will appear in grey color, on successful execution of
the below given code?

<!DOCTYPE html>
<html>
<head>
<style>
p ~ ul {
background: grey;
}
</style>
</head>
<body>

<div>List 1</div>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<p>List 2</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>

<h2>List 3</h2>
<ul>
<li>Onion</li>
<li>Tomato</li>
<li>Potato</li>
</ul>

</body>
</html>

a) List 1 and List 2


b) List 3
c) List 2
d) List 2 and List 3

Correct Answer:
Option (c) List 2

Concept Recap: CSS General Sibling Selector ~


The general sibling selector (A ~ B) selects every B element that is a sibling of A and comes after A
in the DOM structure.

Syntax:

A ~ B {
/* style rules */
}

• This does not apply to siblings that come before A.


• It also requires both elements to share the same parent.

Step-by-Step Analysis:

Let’s identify which <ul> elements are selected by the rule:

p ~ ul {
background: grey;
}

• Target: All <ul> elements that are siblings of a <p> tag and appear after it.

Now let’s check the structure:

1. List 1:
o <ul> comes before <p>
o Not selected
2. List 2:
o <ul> comes immediately after the <p>
o Matched and styled
3. List 3:
o <ul> comes after <h2>, not after <p>
o Not matched because it’s not a sibling of <p>

Key Points to Remember:

• p ~ ul applies to all <ul> elements that are siblings after the <p>, not before.
• It requires the same parent for both elements.
• Only the <ul> after <p> ("List 2") meets the condition.

Final Answer: Option (c)


List 2 will appear in grey color, as it is the only <ul> sibling after the <p> tag.

Question 9:
What is the result of the below code?

<html>
<head>
<style>
infosys { color: red; }
</style>
</head>
<body>
Welcome to <infosys> INFOSYS </infosys>
</body>
</html>

a) "Welcome to "
b) "Welcome to <infosys> INFOSYS </infosys>"
c) "Welcome to INFOSYS" and INFOSYS will be in red color
d) "Welcome to INFOSYS" and INFOSYS will be in black color

Correct Answer:
Option (c) "Welcome to INFOSYS" and INFOSYS will be in red color
Concept Recap: Custom/Unknown HTML Elements and CSS Styling
HTML5 allows the use of custom (non-standard) elements, even if they’re not defined in the HTML
specification. These elements are treated like generic inline containers (similar to <span>), unless
otherwise specified using JavaScript (like in Web Components).

Importantly, CSS can target any tag, including custom ones.

Detailed Explanation:

• The <infosys> element is not a standard HTML tag, but it is still rendered by the
browser.
• Modern browsers treat unknown tags as inline elements by default.
• Since the style rule:

infosys { color: red; }

matches the custom tag, the content inside <infosys> will be styled.

So, the final rendered output:

• "Welcome to" is default black


• "INFOSYS" is rendered in red

Key Points to Remember:

• HTML5 supports custom elements even if they’re not defined, though they have no
semantics or behavior unless enhanced by JavaScript.
• CSS selectors can target any valid tag name, including custom tags.
• Unknown tags are typically treated as inline containers.

Example (simplified):

<customtag>This is red</customtag>

<style>
customtag {
color: red;
}
</style>

Final Answer: Option (c)


"Welcome to INFOSYS" and INFOSYS will be in red color.
Question 10:
What will be the duration of the animation according to the below code snippet?

div {
width: 100px;
height: 100px;
background-color: red;
animation-delay: 2s;
animation: animationExample 5s;
}

a) 3 seconds
b) 2 seconds
c) 5 seconds
d) none

Correct Answer:
Option (c) 5 seconds

Concept Recap: animation and animation-delay in CSS

• animation: A shorthand property that includes the animation name, duration, and other
settings.
• animation-delay: Specifies how long the browser should wait before starting the animation.
• The duration is how long the animation takes to complete, regardless of any delay.

Syntax:

animation: animationName duration timing-function delay iteration-count direction fill-mode;

Detailed Explanation:

Let's break down the CSS:

animation-delay: 2s;
animation: animationExample 5s;

Here's what’s happening:

1. animation: animationExample 5s; sets the duration of the animation to 5 seconds.


2. animation-delay: 2s; means the animation starts 2 seconds after the page loads or the
element becomes visible.
Important Note:
Setting animation overrides prior animation-delay unless delay is also included in the shorthand. But
in this code, the order causes a logical problem:

• animation-delay is set first


• Then animation shorthand is defined later

However, when the shorthand is applied, it overwrites any prior animation-delay because
animation: animationExample 5s; doesn’t include delay.

Therefore, only the animation named animationExample with 5s duration will apply.
The animation-delay is overwritten and not used.

Key Points to Remember:

• The animation shorthand resets other individual animation properties if not explicitly
included.
• Only the final defined value of each property is used.
• If animation-delay is needed, it should be included like:

animation: animationExample 5s ease 2s;

• In this case, only 5s duration is applied.

Final Answer: Option (c)


The animation will last 5 seconds; animation-delay is ignored due to being overwritten.

Question 11:
Identify the correct order (top to bottom) of declaring link-related pseudo-classes for the classes to be
effective.

a) a:link, a:visited, a:active, and a:hover


b) a:active, a:hover, a:visited, and a:link
c) a:link, a:visited, a:hover, and a:active
d) a:hover, a:active, a:visited, and a:link

Correct Answer:
Option (c) a:link, a:visited, a:hover, and a:active

Concept Recap: CSS Link Pseudo-Classes – The "LVHA" Rule


When styling anchor (<a>) tags with pseudo-classes, CSS rules should follow a specific order for
styles to be applied properly and avoid conflicts. The correct order is:
LVHA

• :link — unvisited links


• :visited — visited links
• :hover — when mouse is over the link
• :active — when the link is being clicked

This order ensures that styles are applied as expected. If the order is violated, some styles may not
work correctly across different browsers.

Why This Order Works:

• :link should come first, because it styles links the user hasn’t clicked yet.
• :visited comes after to override the unvisited style if the link was clicked.
• :hover must follow to take precedence when the mouse is over the link.
• :active is last to ensure it overrides hover and others when the user is clicking.

Browser-safe, conflict-free styling.

Key Points to Remember:

• Always follow the LVHA order: link → visited → hover → active


• This order avoids specificity and precedence issues in browsers.
• These pseudo-classes apply to anchor (<a>) tags only unless otherwise extended with
JavaScript/CSS logic.

Example:

a:link { color: blue; }


a:visited { color: purple; }
a:hover { color: green; }
a:active { color: red; }

Final Answer: Option (c)


a:link, a:visited, a:hover, and a:active — follow LVHA order for proper pseudo-class behavior.

Question 12:
What will be the result of the code given below?

<html>
<head>
<style>
span[xyz="text"] {
color: blue;
}
</style>
</head>
<body>
<p>Welcome to <span xyz="text"> INFOSYS </span></p>
</body>
</html>

a) "Welcome to INFOSYS" and INFOSYS will be in black color as styling will not apply because
'xyz' is not a valid attribute of span
b) "Welcome to INFOSYS" and INFOSYS will be in blue color
c) "Welcome to "
d) No output

Correct Answer:
Option (b) "Welcome to INFOSYS" and INFOSYS will be in blue color

Concept Recap: CSS Attribute Selectors and HTML's Flexibility


CSS allows selecting elements based on any attribute—regardless of whether the attribute is
standard or not.
HTML5 is permissive in accepting custom or non-standard attributes on elements. These attributes
can still be used by CSS selectors or JavaScript.

Syntax Example:

element[attribute="value"] {
/* styles */
}

This works even if attribute is not standard for that element.

Detailed Explanation:

In the given code:

• The CSS selector:

span[xyz="text"] {
color: blue;
}

targets any <span> element with the attribute xyz="text".

• The <span> tag in the HTML:

<span xyz="text"> INFOSYS </span>

matches the selector perfectly.

Therefore, the text inside the <span> — "INFOSYS" — will appear in blue color.

There is no restriction that the xyz attribute must be a valid standard attribute for the style to
apply.

Key Points to Remember:

• CSS attribute selectors can match any attribute, not just valid HTML ones.
• Custom attributes (like xyz) do not break rendering and are valid in HTML5.
• This technique is also used in data attributes (data-*) and component-based frameworks.

Final Answer: Option (b)


"Welcome to INFOSYS" and INFOSYS will be in blue color, because the custom attribute
matches the CSS selector.

Question 13:
What is the standard syntax for animation in CSS3?

a) keyframes example
b) @keyframes example
c) @keyframes
d) None of the mentioned

Correct Answer:
Option (b) @keyframes example

Concept Recap: CSS3 Animations with @keyframes


The @keyframes rule in CSS3 defines the animation behavior over time by specifying keyframes —
or points along the animation timeline — and what styles should apply at those points.

Standard Syntax:

@keyframes animationName {
0% { /* initial state */ }
50% { /* midway state */ }
100% { /* final state */ }
}

You must use @keyframes followed by the animation name — which makes Option (b) the
complete and correct syntax.

Option Analysis:

Option Explanation Valid?


a) keyframes example Missing @ symbol — not a valid CSS rule No
b) @keyframes example Correct — declares a named animation Yes
c) @keyframes Incomplete — needs an animation name and body No
d) None of the mentioned Incorrect — Option (b) is valid No

Key Points to Remember:

• The @keyframes rule must include the name of the animation.


• The name defined with @keyframes must match the one used in the animation-name or
shorthand animation property.
• You can use percentage-based or from / to keywords for defining keyframes.

Example:

@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}

Final Answer: Option (b)


@keyframes example is the correct standard syntax to define an animation in CSS3.

Question 14:
Which of the following selector selects all elements of B that have the attribute text that end with the
given value?

a) B[text^=value]
b) B[text*=value]
c) B[text$=value]
d) none of the mentioned
Correct Answer:
Option (c) B[text$=value]

Concept Recap: CSS Attribute Selectors (^=, *=, $=)


CSS provides attribute selectors that allow you to style elements based on specific patterns in
attribute values.

Selector Syntax Matches When...


[attr^="value"] Attribute starts with value
[attr*="value"] Attribute contains value anywhere
[attr$="value"] Attribute ends with value

Detailed Explanation:

Given the question:


"Select all elements of B where attribute text ends with a certain value"

Let’s analyze each option:

Option Meaning Matches?


a) B[text^=value] Selects <B> elements where text starts with
value
b) B[text*=value] Selects <B> elements where text contains value
anywhere
c) B[text$=value] Selects <B> elements where text ends with
value
d) none of the Incorrect, since (c) is valid
mentioned

Key Points to Remember:

• ^= → starts with
• *= → contains
• $= → ends with
• These attribute selectors are case-sensitive by default.

Example of usage:

a[href$=".pdf"] {
color: red;
}

This would style all <a> tags linking to PDF files.


Final Answer: Option (c)
B[text$=value] selects all B elements where the text attribute ends with the given value.

Question 15:
A developer wants to set the left and right padding as 5px, top padding as 15px, and bottom
padding as 20px. Which of the following will help achieve the above output?

a) padding: 5px 15px 20px;


b) padding: 15px 5px 20px;
c) padding: 15px 5px 5px 20px;
d) padding: 15px 5px 20px 5px;

Correct Answer:
Option (d) padding: 15px 5px 20px 5px;

Concept Recap: CSS padding Shorthand Property


The padding shorthand in CSS lets you set padding for all four sides of an element in one line.

Order of Values (Clockwise starting from top):

padding: top right bottom left;

Variants:

• 1 value: All 4 sides same — padding: 10px;


• 2 values: Top & Bottom | Left & Right — padding: 10px 5px;
• 3 values: Top | Left & Right | Bottom — padding: 10px 5px 15px;
• 4 values: Top | Right | Bottom | Left — padding: 10px 5px 15px 20px;

Requirement:

• Top: 15px
• Right: 5px
• Bottom: 20px
• Left: 5px

Let’s test the options:

Option Interpretation Matches Requirement?


a) 5px 15px Top: 5px, Left+Right: 15px, Incorrect
20px Bottom: 20px
b) 15px 5px Top: 15px, Left+Right: 5px, Almost – but doesn't define
20px Bottom: 20px left separately
c) 15px 5px 5px Top: 15px, Right: 5px, Bottom: Incorrect (bottom wrong)
20px 5px, Left: 20px
d) 15px 5px Top: 15px, Right: 5px, Bottom: Correct
20px 5px 20px, Left: 5px

Key Points to Remember:

• padding: top right bottom left is the full 4-value shorthand.


• For symmetrical left & right, use 2 or 3 values.
• Always interpret values clockwise starting from top.

Visual Mapping of Option (d):

padding: 15px /* top */


5px /* right */
20px /* bottom */
5px; /* left */

Final Answer: Option (d)


padding: 15px 5px 20px 5px; correctly sets top, right, bottom, and left paddings as required.

Question 16:
Which of the paragraph content will appear in yellow color, on successful execution of the below
given code?

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to CSS selectors</h1>
<div>
<h2>I'm a heading</h2>
<p>I'm paragraph 1</p>
</div>
<div>
<span>I'm span
<p>I'm paragraph 2</p>
</span>
</div>
<p>I'm paragraph 3</p>
</body>
</html>

a) I'm paragraph 1
I'm paragraph 2
I'm paragraph 3

b) I'm paragraph 1
I'm paragraph 2
I'm span

c) I'm paragraph 3

d) I'm paragraph 1
I'm paragraph 2
I'm span

Correct Answer:
Option (a) I'm paragraph 1
I'm paragraph 2
I'm paragraph 3

Concept Recap: CSS Child Combinator Selector (>)


The child combinator selector (A > B) targets elements B that are direct children of element A.

Syntax:

div > p {
background-color: yellow;
}

This will apply the background color to all <p> tags that are immediate children of a <div> element.

Step-by-Step Evaluation:

Let’s look at the structure of each paragraph:


1. Paragraph 1

<div>
<p>I'm paragraph 1</p>
</div>

✔ Direct child of <div> → Styled

2. Paragraph 2

<div>
<span>
<p>I'm paragraph 2</p>
</span>
</div>

Important Note:
Although <p> is not a valid child of <span> according to HTML spec (block inside inline), browsers
still render it, and in many modern browsers, the DOM restructures it, treating the <p> as a direct
child of the <div>.

Thus, most browsers will apply the style — Styled

3. Paragraph 3

<p>I'm paragraph 3</p>

This <p> is not inside any <div>, so it should not match the selector.
However, the correct answer choice lists all paragraphs, which needs re-examination.

Wait! ⚠ Let's double-check.

Actually:

Paragraph Parent Element Selector Match (div > p)? Background


Color
Paragraph <div> Yes Yellow
1
Paragraph <span> inside No (not a direct child of No
2 <div> div)
Paragraph <body> No No
3

Correction: Only Paragraph 1 is a direct child of a <div>.


Final Clarified Result:

• Paragraph 1 → Direct child of <div> → Yellow


• Paragraph 2 → Child of <span>, not direct child of <div> → No styling
• Paragraph 3 → Not inside any <div> → No styling

Correct Final Answer:


None of the provided options are fully accurate, but the closest correct answer is:

Option (a) – Incorrect (includes Paragraphs 2 and 3, which are not styled)
Correct Answer Should Be (Not Listed):
Only "I'm paragraph 1" will appear in yellow.

Since none of the listed options match this, the question seems flawed. If forced to choose the
closest match, none of the provided options are strictly correct.

Final Correct Response (Based on Standards):


Only Paragraph 1 will appear in yellow, because it is the only <p> directly inside a <div>.

Question 17:
"not" will negate the __________ media query/queries when it is applied to a comma-separated list of
media queries irrespective of which particular query it has been applied.

a) Entire
b) Only First
c) Only selected
d) Particular

Correct Answer:
Option (b) Only First

Concept Recap: The not Logical Operator in Media Queries


The not operator is used in CSS media queries to negate a single media query. It tells the browser to
apply the styles only when the specified media query does not match.

However, when not is used with a comma-separated list of media queries, it only negates the first
one—not the entire list.

Detailed Explanation with Example:


@media not screen and (max-width: 600px), screen and (min-width: 800px) {
/* styles */
}

• This rule has two media queries:


1. not screen and (max-width: 600px) → Negated
2. screen and (min-width: 800px) → Not affected by not

The not applies only to the first query.


So, if either of these conditions is true, the styles will be applied.

Key Points to Remember:

• not negates only the media query it’s directly attached to.
• In comma-separated queries, each query is evaluated independently.
• If you want to negate multiple queries, you must apply not to each one separately.

Final Answer: Option (b)


"not" will negate only the first media query in a comma-separated list.

Question 18:
A developer wants to have the following output:

I'm a div tag!


I'm a paragraph tag 1!
I'm a paragraph tag 2! (in red color)

He has written the following code:

<html>
<head>
<style>
/* Line1 */ { color: red; }
</style>
</head>
<body>
<div>
I'm a div tag!
<p>I'm a paragraph tag 1!</p>
</div>
<p>I'm a paragraph tag 2!</p>
</body>
</html>

What should he write in Line1 to achieve the above output?

a) div + p
b) div > p
c) div ~ p
d) Either A or C

Correct Answer:
Option (a) div + p

Concept Recap: CSS Combinators (+, >, ~)

Combinator Meaning
A + B Selects the immediate next sibling of A that is B
A > B Selects direct children B of element A
A ~ B Selects all siblings after A that are B

Code Analysis:

<div>
I'm a div tag!
<p>I'm a paragraph tag 1!</p> <!-- This is inside the div -->
</div>
<p>I'm a paragraph tag 2!</p> <!-- This is a sibling of the div -->

• Paragraph tag 2 is:


o Not inside the div → div > p won't match.
o Immediately after the div → div + p matches.
o Also after the div, so div ~ p would also match.

But here's the subtle difference:

• div + p matches only the immediate next paragraph → Perfect for this scenario.
• div ~ p matches all paragraphs after the <div> → May unintentionally match more elements
if present later.
Key Points to Remember:

• Use div + p when you want to style only the very next <p> after a <div>.
• Use div ~ p to style all sibling <p> elements that follow <div>.
• div > p would select a paragraph inside the div (not applicable here).

Final Answer: Option (a)


div + p correctly targets the second paragraph to appear in red.

Question 19:
What will be the color, alignment, and font-size of the second paragraph shown in the below code?

<!DOCTYPE html>
<html>
<head>
<style>
p.class1 {
text-align: center;
color: red;
}
p.class2 {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="class1">I am a heading</h1>
<p class="class1">I am paragraph 1</p>
<p class="class1 class2">I am paragraph 2.</p>
</body>
</html>

a) color: red; alignment: center; font-size: 300%


b) color: black; alignment: left; font-size: 300%
c) color: red; alignment: center; font-size: 100%
d) color: red; alignment: left; font-size: 300%
Correct Answer:
Option (a) color: red; alignment: center; font-size: 300%

Concept Recap: Multiple Class Selectors in HTML & CSS

• HTML elements can have multiple classes, and styles from all matching class selectors will
apply (merged together).
• If two selectors target different properties, their values combine.
• If there's a conflict, the more specific or later declared rule wins (CSS specificity &
cascade).

Detailed Explanation:

For the second paragraph:

<p class="class1 class2">I am paragraph 2.</p>

This element matches both .class1 and .class2.

Let’s examine what each class applies:

• From .class1:
o color: red;
o text-align: center;
• From .class2:
o font-size: 300%;

Since these styles apply to different properties, they do not override each other.

Final Styles for Paragraph 2:

• Color: red (from .class1)


• Text alignment: center (from .class1)
• Font size: 300% (from .class2)

Final Answer: Option (a)


color: red; alignment: center; font-size: 300% — all styles are correctly applied from both class
selectors.

Question 20:
Which of the following is a part of accessibility?
a) White Background
b) Navigation Shortcuts
c) Contrast Ratio
d) Small Font Size

Correct Answer:
Option (c) Contrast Ratio
Option (b) Navigation Shortcuts (also acceptable if multiple answers were allowed)

However, if only one answer is expected,


Best Answer: (c) Contrast Ratio

Concept Recap: What Is Accessibility in Web Design?


Accessibility refers to designing and developing websites so that all users, including people with
disabilities (visual, motor, cognitive, auditory), can easily access and interact with the content.

Option-by-Option Analysis:

Option Accessibility Relevance Valid?


a) White Background Not inherently accessible or inaccessible — neutral No
b) Navigation Helps keyboard users, screen readers — highly
Shortcuts important Yes
c) Contrast Ratio Ensures text is readable, especially for the visually
impaired Yes
d) Small Font Size Makes content less readable, especially for low-vision No
users

Key Points to Remember:

• Contrast Ratio ensures readability for users with color blindness or low vision. WCAG
recommends a minimum of 4.5:1 for normal text.
• Navigation Shortcuts (like skip links or keyboard shortcuts) help users who can’t use a
mouse.
• Small fonts reduce readability — bad for accessibility.
• A white background alone does not guarantee accessibility.

Final Answer: Option (c)


Contrast Ratio is a vital part of accessibility to ensure readable and inclusive content.
(If multiple correct answers were allowed, Option (b) would also be acceptable.)
Question 21:
Analyze the below code and choose the correct statement.

<!DOCTYPE html>
<html>
<head>
<style>
input[type=number]:required {
background: yellow;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<input type="number" required placeholder="number">
<br>
<input type="text" required placeholder="text">
</body>
</html>

a) Styling will be applied to input type “number” only.


b) Styling will not be applied to any of the input fields.
c) Styling will be applied to input type “text” only.
d) Styling will be applied to both input types as both are required fields.

Correct Answer:
Option (a) Styling will be applied to input type “number” only.

Concept Recap: CSS Attribute and Pseudo-class Selectors Combined


In CSS, you can combine attribute selectors and pseudo-classes to target very specific elements.

Selector in use:

input[type=number]:required

This targets only:

• Elements that are <input>


• With type="number"
• And have the required attribute
Detailed Analysis of the HTML:

1. First Input:

<input type="number" required>

• type="number" ✔
• required ✔
➡ Matches the selector → Styled

2. Second Input:

<input type="text" required>

• type="text"
• required ✔
➡ Does not match the selector → Not styled

So, only the number input will get the yellow background and black bottom border.

Key Points to Remember:

• You can combine attribute and pseudo-class selectors to filter elements precisely.
• input[type=number]:required matches only inputs that are both number and required.
• Even though the second field is required, it’s of type "text", so it doesn’t match the selector.

Final Answer: Option (a)


Styling will be applied to input type “number” only, as the selector specifically targets that
combination.

Question 22:
Consider the following code below:

<head>
<style>
.box {
background-color: rgb(166,112,220);
width: 100px;
height: 100px;
}

.box:hover {
animation-name: rotate;
animation-duration: 0.75s;
}

@keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="box">div</div>
</body>

Developer wants to play the animation after 2 seconds when the user hovers over the box.
What CSS property should he write?

a) animation-delay: 2s; in .box:hover


b) animation-lag: 2s; in .box:hover
c) animation-delay: 2s in .box: hover
d) animation-delay: 2s in @keyframes rotate

Correct Answer:
Option (a) animation-delay: 2s; in .box:hover

Concept Recap: CSS Animation Timing with animation-delay


The animation-delay property in CSS is used to specify the amount of time to wait before starting
the animation.

Correct Syntax:

selector {
animation-delay: 2s;
}

It must be applied in the same block where animation properties like animation-name and animation-
duration are declared.
Explanation of Options:

Option Validity Explanation


a) animation-delay: 2s; in Valid Correct syntax and correct location
.box:hover
b) animation-lag: 2s; in No such CSS property as animation-
.box:hover Invalid lag
c) animation-delay: 2s in .box: Syntax error: space in :hover and
hover Invalid missing ;
d) animation-delay: 2s in @keyframes only defines steps — can't
@keyframes rotate Invalid set delay here

To delay animation on hover, the property must be set inside .box:hover.

Example Implementation:

.box:hover {
animation-name: rotate;
animation-duration: 0.75s;
animation-delay: 2s;
}

Key Points to Remember:

• animation-delay delays the start of the animation.


• It is declared alongside animation-name, animation-duration, etc.
• The @keyframes block only defines what happens during the animation — not when it
starts.

Final Answer: Option (a)


animation-delay: 2s; should be written in .box:hover to delay the animation by 2 seconds on
hover.

Question 23:
Choose the correct statements from the below, regarding id and class attribute:

1. id attributes should have unique value across the HTML page


2. class attributes should have unique value across the HTML page
a) Both are false
b) Both are true
c) Only 2 is true
d) Only 1 is true

Correct Answer:
Option (d) Only 1 is true

Concept Recap: id vs. class in HTML

Attribute Purpose Uniqueness Rule


id Identifies a unique element Must be unique on the page
class Applies styles to groups of elements Can be reused multiple times

Statement Analysis:

• Statement 1: True
The id attribute must be unique in the HTML document.
It is used for uniquely identifying elements (e.g., for JavaScript manipulation or anchor
linking).
• Statement 2: False
The class attribute can be used multiple times across elements.
It’s designed for grouping elements with shared styling or behavior.

Key Points to Remember:

• Use id for unique identifiers (e.g., #header, #loginForm)


• Use class for reusable styling or logic (e.g., .btn, .error)
• CSS targets:
o #idName {} for ids
o .className {} for classes

Final Answer: Option (d)


Only statement 1 is true — id must be unique, but class can be reused.

Question 24:
Look at the below code:

<html>
<head>
<style>
p { color: palevioletred; }
</style>
</head>
<body>
<p> Mysore </p>
<p> Bangalore </p>
</body>
</html>

Which div(s) will be styled by the styles embedded in the markup?

a) Both the paragraphs are styled


b) Only the first paragraph is styled
c) Only the second paragraph is styled
d) Neither the first paragraph nor the second paragraph are styled

Correct Answer:
Option (a) Both the paragraphs are styled

Concept Recap: CSS Element Selectors


The CSS selector:

p {
color: palevioletred;
}

applies the style to all <p> elements in the HTML document, regardless of their position.

Code Analysis:

• The CSS is written inside a <style> tag in the <head>, and it


correctly targets:

p {
color: palevioletred;
}

• The <body> contains:

<p> Mysore </p>


<p> Bangalore </p>
Both are paragraph tags, so both are styled with color: palevioletred.

Key Points to Remember:

• A CSS rule like p { color: ... } affects all paragraph (<p>) tags.
• This is called an element selector — it applies styles to all elements of the given type.
• No need for classes or IDs unless you want to target specific elements.

Final Answer: Option (a)


Both the paragraphs are styled in palevioletred because the CSS targets all <p> tags.

Question 25:
Observe the output and determine what should be filled in flex-direction to produce the following
layout:

footer
a
b
c
header

HTML Code:

<html>
<head>
<style>
.container {
display: flex;
flex-direction: <<Line 1>>
}
</style>
</head>
<body>
<div class="container">
<header>header</header>
<div>
<span>a</span>
<span>b</span>
<span>c</span>
</div>
<footer>footer</footer>
</div>
</body>
</html>

What value should replace <<Line 1>>?

a) column-reverse
b) column
c) row-reverse
d) none

Correct Answer:
Option (a) column-reverse

Concept Recap: flex-direction Property in CSS Flexbox

The flex-direction property specifies how flex items are placed in the flex container:

Value Direction of Items Description


row Left → Right (default) Items flow horizontally (LTR)
row-reverse Right → Left Items flow horizontally but in reverse
column Top → Bottom Items flow vertically
column-reverse Bottom → Top Items flow vertically in reverse order

Layout Analysis:

• Visual output:

footer
a
b
c
header

• This means the elements in .container are rendered from bottom to top → the last HTML
element appears first, and the first element appears last.
This exactly matches the behavior of:

flex-direction: column-reverse;

Key Points to Remember:

• column-reverse reverses the vertical stacking of flex items.


• It affects the main axis direction, not the content inside child elements.
• In this case, it reverses the stacking of header, <div>, and footer.

Final Answer: Option (a)


column-reverse is the correct value to reverse the vertical stacking order of the flex items to
match the displayed output.

Question 27:
Which are the logical operators used to compose media queries?

a) AND, OR, NOT


b) &&, ||, !
c) and, only, not
d) and, or

Correct Answer:
Option (c) and, only, not

Concept Recap: CSS Media Query Logical Operators

Media queries in CSS can be combined or refined using specific logical keywords, not JavaScript-
style symbols. The key operators include:

Operator Purpose
and Combines multiple conditions (all must be true)
only Applies the styles only if the entire media query is supported
not Negates a media query (applies styles when query does not match)

Examples of Usage:

/* Use 'and' to combine features */


@media screen and (min-width: 600px) {
body {
background: lightgreen;
}
}

/* Use 'only' to prevent older browsers from applying styles */


@media only screen and (max-width: 800px) {
body {
background: yellow;
}
}

/* Use 'not' to apply styles when a condition is NOT true */


@media not screen and (max-width: 600px) {
body {
background: red;
}

Why Other Options Are Incorrect:

• a) AND, OR, NOT → Incorrect casing and includes OR, which isn’t valid in CSS media
queries.
• b) &&, ||, ! → JavaScript syntax, not valid in CSS.
• d) and, or → CSS does not support or in media queries.

Final Answer: Option (c)


and, only, and not are the valid logical operators used in CSS media queries.

Question 28:
What will be the background color of the paragraph?

<!DOCTYPE html>
<html>
<head>
<style>
#a { background-color: yellow; }
div[id=a] { background-color: blue; }
</style>
</head>
<body>
<div id="a" style="background-color: red">
<p style="background-color: white">Guess my background color?</p>
</div>
</body>
</html>

a) Red
b) White
c) Blue
d) Yellow

Correct Answer:
Option (b) White

Concept Recap: CSS Specificity & Inline Styles

In CSS, the background color of an element is determined by the most specific rule that applies to
it. When multiple styles target an element, the browser uses a specificity hierarchy to decide which
style wins.

Specificity Order (Highest to Lowest):

1. Inline styles (style="...") — highest priority


2. ID selectors (#id)
3. Attribute selectors, classes, pseudo-classes
4. Element selectors (div, p, etc.)
5. Browser default styles

Step-by-Step Analysis:

• The paragraph (<p>) has this style:

<p style="background-color: white">

This is an inline style, which has highest priority for this <p>.

• The outer <div> has multiple background rules:

#a { background-color: yellow; } /* ID selector */


div[id=a] { background-color: blue; } /* Attribute selector
*/
But the <div> itself also has:

style="background-color: red"

So the div's background color is red (due to inline style).

• However, the question is about the paragraph's background color — not the div.

The <p> has its own inline style:

<p style="background-color: white">

So its background is explicitly set to white, and this will override any inherited or surrounding
styles.

Key Points to Remember:

• Inline styles take precedence over CSS rules in <style> or external


files.
• Parent background colors do not override child inline background styles.
• The <p> element is styled independently, even though it's inside a colored <div>.

Final Answer: Option (b)


The paragraph has an inline background color of white, so it will appear with a white
background.

Question 29:
What will be the background color of the paragraph?

<!DOCTYPE html>
<html>
<head>
<style>
#a { background-color: yellow; }
p { background-color: green; }
div[id=a] { background-color: blue; }
</style>
</head>
<body>
<div id="a">
<p>Guess my background color?</p>
</div>
</body>
</html>

a) Green
b) Yellow
c) Blue
d) White

Correct Answer:
Option (a) Green

Concept Recap: CSS Selector Specificity and Element Hierarchy

In this code:

• The <div id="a"> is targeted by two CSS rules:


o #a { background-color: yellow; } (ID selector)
o div[id=a] { background-color: blue; } (attribute selector)
• The <p> tag inside the div is directly targeted by:
o p { background-color: green; } (element selector)

Important: The background-color of a parent element (like the <div>) does not override the
explicitly defined background color of a child element (like the <p>).

Step-by-Step Analysis:

1. <div id="a">
o
Background: Both #a and div[id=a] apply.
o
Between yellow and blue, #a wins because an ID selector has higher specificity, so
the div background is yellow.
o But this is not what the question asks.
2. <p> inside the div:
o Styled with p { background-color: green; }.
o Since this rule directly targets the paragraph and no other rule overrides it, the <p>
background is green.

The paragraph will appear with a green background, regardless of its parent <div>'s color.

Key Points to Remember:

• CSS applies styles directly to matching elements unless overridden by more specific rules.
• A parent’s background color doesn’t override a child’s explicitly set background.
• The p { background-color: green; } rule applies specifically to the
paragraph, so it wins.

Final Answer: Option (a)


The paragraph will have a green background due to the p selector styling.

Question 30:
In media queries, comma-separated lists act like logical operator ____________ and styles get applied
if any of the media queries returns ____________.

a) “OR”, “true”
b) “AND”, “true”
c) “NOT”, “true”
d) “AND”, “false”

Correct Answer:
Option (a) “OR”, “true”

Concept Recap: Comma-Separated Media Queries

In CSS, when you use multiple media queries separated by commas, it works like a logical OR:

@media screen and (min-width: 768px), screen and (orientation: landscape)


{
/* styles here */
}

This means:

• Styles will be applied if either of the conditions is true.


• If any one of the media queries evaluates to true, the styles inside the block will take effect.

Explanation:

Syntax Example Evaluation


@media screen and (max-width: 600px), Applies if either max-width is 600px or
(orientation: landscape)
orientation is landscape

This acts like a logical OR, not AND.


Key Points to Remember:

• Comma-separated media queries = OR


• Only one of the conditions needs to be true for the styles to apply.
• Each query is evaluated independently.

Final Answer: Option (a)


In media queries, comma-separated lists act like logical “OR”, and styles apply if any condition
evaluates to “true”.

Question 31:
Which of the following transform property values defines a 2D skew transformation along the X-
and the Y-axis?

a) skewX(angle, angle)
b) skewY(angle, angle)
c) skew(x-angle, y-angle)
d) all of the mentioned

Correct Answer:
Option (c) skew(x-angle, y-angle)

Concept Recap: CSS transform – Skewing in 2D

The transform property in CSS allows you to apply 2D or 3D transformation effects like rotate,
scale, translate, and skew.

For skewing:

Function Purpose
skewX(angle) Skews the element along X-axis
skewY(angle) Skews the element along Y-axis
skew(x-angle, y-angle) Skews along both axes

Option Analysis:

Option Valid? Explanation


a) skewX(angle, angle) No Invalid syntax — skewX only takes one angle
b) skewY(angle, angle) No Invalid syntax — skewY only takes one angle
c) skew(x-angle, y- Correct syntax for skewing along both X and Y
angle) Yes axes
d) all of the mentioned No Only option (c) is correct
Key Points to Remember:

• skewX(30deg) → skews only horizontally


• skewY(30deg) → skews only vertically
• skew(30deg, 20deg) → skews both horizontally and vertically
• Degrees (deg) are commonly used, though radians (rad) are also valid

Example:

transform: skew(30deg, 10deg);

Final Answer: Option (c)


skew(x-angle, y-angle) is the correct syntax for applying a 2D skew transformation along both X
and Y axes.

Question 32:
Which of the following CSS properties can be used to define a delay before an animation starts?

a) transform-delay
b) delay-function
c) delay-animation
d) animation-delay

Correct Answer:
Option (d) animation-delay

Concept Recap: animation-delay in CSS

The animation-delay property in CSS is used to specify the amount of time to wait before an
animation starts. It allows you to delay the execution of the animation after it's triggered (e.g., on
page load or hover).

Syntax:

selector {
animation-name: fadeIn;
animation-duration: 2s;
animation-delay: 1s; /* Wait 1 second before starting */
}

Option Analysis:
Option Valid? Explanation
a) transform-delay No Not a valid CSS property
b) delay-function No Invalid and not recognized by CSS
c) delay-animation No Invalid – incorrect naming of a valid property
d) animation-delay Yes Correct property for setting delay before animation starts

Key Points to Remember:

• animation-delay accepts values in seconds (s) or milliseconds (ms)


• Negative values are allowed — the animation will start partway through
• It is often used in combination with animation-name, animation-duration, etc.

Example with delay:

.box {
animation-name: slideIn;
animation-duration: 1s;
animation-delay: 2s;
}

Final Answer: Option (d)


animation-delay is the correct CSS property used to define a delay before an animation begins.

Question 33:
Consider the below code snippet:

<!DOCTYPE html>
<html>
<head>
<style>
span[xyz="div"] {
color: blue;
}
div { color: red; }
</style>
</head>
<body>
<div>
This is my <span xyz="text">DEMO programme.</span>
</div>
</body>
</html>

Choose the option rendered as output for the above code:

a) This is my DEMO programme. (DEMO part in red)


b) This is my DEMO programme. (all in black)
c) This is my DEMO programme. (DEMO in blue)
d) This is my DEMO programme. (This is in red, DEMO in blue)

Correct Answer:
Option (a) This is my DEMO programme. (DEMO part in red)

Concept Recap: CSS Inheritance and Attribute Selectors

• The selector:

span[xyz="div"] {
color: blue;
}

applies only to <span> elements that have an attribute xyz="div".

• In the HTML, the actual <span> has:

<span xyz="text">

So it does not match the attribute selector span[xyz="div"].

• The rule:

div { color: red; }

applies to the entire <div> content, including inline text and any child elements that do not override
this style.

Since the <span> doesn’t match the blue selector and has no specific color of its own, it inherits
the red color from the <div>.

Rendered Output Breakdown:

Element Color Applied Reason


Text before <span> Red <div> style applies
<span xyz="text"> Red Does not match [xyz="div"] rule
Text inside <span> Red Inherits from parent <div>

Key Points to Remember:

• Attribute selectors are strict — [xyz="div"] does not match [xyz="text"].


• If a child element has no overriding style, it inherits from the parent.
• Text inside a <div> will be red if the <div> has color: red;.

Final Answer: Option (a)


The entire sentence will be red, including the word “DEMO”, since the span doesn't match the
blue selector and inherits the red color from the <div>.

Question 33 (Revised):
Consider the below code snippet:

<!DOCTYPE html>
<html>
<head>
<style>
span[xyz="div"] {
color: blue;
}
div { color: red; }
</style>
</head>
<body>
<div>
This is my <span xyz="text">DEMO programme.</span>
</div>
</body>
</html>

Choose the option rendered as output for the above code:

a) only option [a]


b) only option [b]
c) only option [c]
d) only option [d]

Let’s recall the original choices for clarity:

• [a] This is my DEMO programme. (DEMO part in red)


• [b] This is my DEMO programme. (all in black)
• [c] This is my DEMO programme. (DEMO in blue)
• [d] This is my DEMO programme. ("This is" in red, "DEMO" in blue)

Correct Answer:
Option (a) only option [a]

Explanation:

CSS Selectors:

• span[xyz="div"] { color: blue; }


This targets <span> elements only if xyz="div"
In the code, the span has xyz="text" → No match
So this rule does not apply
• div { color: red; }
All text inside <div> — including nested spans — inherits red
color, unless overridden.

Final Render:

• The <span> doesn't match the blue selector, so it inherits red from the <div>.
• No other color style overrides are present.

Therefore, the entire line, including "DEMO programme", is red.

Key CSS Principles:

• CSS attribute selectors require exact matches


• Styles cascade — if no direct style is applied to a child element, it inherits from its parent
• The color defined in div applies to the <span> when no more specific rule matches

Final Answer: a) only option [a]


"DEMO programme" appears in red since the span doesn't match the blue rule and inherits
red from the parent <div>.
Question 34:
Observe the below code snippet and choose the correct statement:

CSS:

h2 ~ p {
background-color: yellow;
}

HTML:

<article>
<p>Main title</p>
<h2>hello</h2>
<h2><p>hello world</p></h2>
<p>World</p>
</article>

Options:

a) The p tag within the h2 tag will be affected.


b) The p tag below the h2 tag will be affected.
c) The p tag above the h2 tag will be affected.
d) There will be no effect of selector, as selector class is not mentioned properly.

Correct Answer:
Option (b) The p tag below the h2 tag will be affected.

Concept Recap: CSS General Sibling Selector (A ~ B)

• The selector A ~ B matches all B elements that are siblings of A and appear after A.
• It does not match B elements that come before A, nor does it match B elements that are
nested within A.

Step-by-Step Analysis:

1. <p>Main title</p>
o Comes before any <h2> → Not selected
2. <h2>hello</h2>
o First occurrence of <h2>
Will affect any following <p> siblings, like the next
o
standalone <p>
3. <h2><p>hello world</p></h2>
o Invalid HTML (nesting <p> inside <h2> is not allowed)
o Most browsers will auto-correct this into separate elements:

<h2></h2>
<p>hello world</p>

So this <p> becomes a sibling after the first <h2> and matches the selector.

4. <p>World</p>
o Also a sibling after the first <h2> → Selected

So both p tags following the first <h2> will be affected.

Key Points to Remember:

• h2 ~ p affects all <p> elements after the first <h2> at the same nesting level
• It does not affect elements before the <h2>, or those inside it
• Invalid nesting like <h2><p>...</p></h2> gets auto-corrected by the browser

Final Answer: Option (b)


The p tag below the h2 tag will be affected due to the general sibling selector.

Question 35:
By default, which position value gets applied to HTML elements?

a) Relative
b) Absolute
c) Static
d) Fixed

Correct Answer:
Option (c) Static

Concept Recap: CSS position Property

The position property determines how an element is positioned in the document layout. The main
values are:

Value Description
static Default — element is positioned in the normal document flow
relative Element is positioned relative to its normal position
absolute Positioned relative to nearest positioned ancestor (or viewport)
fixed Positioned relative to the viewport, stays in place while scrolling
sticky A hybrid of relative and fixed, depending on scroll position

Explanation:

• All HTML elements have position: static applied by default unless explicitly changed.
• Elements with position: static cannot be moved using top, bottom, left, or right.
• It ensures elements are laid out in order, top to bottom, left to right (in LTR languages).

Key Points to Remember:

• Default value of position is static


• It places elements in the normal document flow
• Other position types (relative, absolute, fixed, sticky) need to be manually set

Final Answer: Option (c)


Static is the default position applied to HTML elements unless specified otherwise.

Question 36:
Select the incorrect statement related to Flexbox.

a) Flex Box layout also called as Flexible Box Module.


b) The prime characteristic of the flex container is the ability to modify the width or height.
c) This flex box layout should be used for small application components.
d) flex-content is one of the properties of flex-box

Correct Answer:
Option (d) flex-content is one of the properties of flex-box

Concept Recap: CSS Flexbox (Flexible Box Module)

Flexbox is a powerful CSS layout module designed to distribute space within a container and align
items efficiently. It provides responsive alignment and flexible item sizing, especially useful in 1D
layouts (either row or column).

Statement-by-Statement Validation:
Statement Valid? Explanation
a) True Flexbox is officially known as the Flexible Box Layout
Module
b) True Flex containers can dynamically adjust the width/height of
items to fill space
c) True Flexbox is best suited for small-scale UI components (like
nav bars, card layouts)
d) There is no property named flex-content in the Flexbox
False specification

The correct property for controlling alignment along the cross-axis is **align-content**, not flex-
content.

Key Flexbox Properties Include:

• display: flex / inline-flex


• flex-direction
• justify-content
• align-items
• align-content
• flex-wrap
• flex-grow, flex-shrink, flex-basis
• flex (shorthand)

There is no property named flex-content.

Final Answer: Option (d)


flex-content is not a valid Flexbox property — making this the incorrect statement.

Question 37:
Choose the correct statement for the below CSS code:

body {
background-color: black;
}
@media screen and (min-width: 480px) and (max-width: 550px) {
body {
background-color: blue;
}
}
a) The body color will change to blue if its viewport is more than 480px only.
b) The body color will change to blue if its viewport is between 480px and 550px.
c) The body color will change to black if its viewport is between 480px and 550px.
d) The body color will change to blue if its viewport is more than 550px only.

Correct Answer:
Option (b) The body color will change to blue if its viewport is between 480px and 550px.

Concept Recap: CSS Media Query Ranges

@media screen and (min-width: 480px) and (max-width: 550px)

This condition applies only when the screen width is between 480px and 550px, inclusive.

• min-width: 480px → applies to 480px and up


• max-width: 550px → applies to 550px and down
• So this query is only true if the screen is between 480px and 550px inclusive

Effect of the CSS:

Viewport Width Background Color


< 480px Black
480px to 550px Blue
> 550px Black

Key Points to Remember:

• Media queries use logical AND when multiple conditions are specified — both min-width
and max-width must be true.
• If no media query matches, the default CSS applies (background-color: black in this case).

Final Answer: Option (b)


The body color will change to blue only when the viewport width is between 480px and 550px.

Question 38:
Observe the below code and determine the correct behavior when the user hovers over "Welcome to
Infosys" at the 2nd second of the animation:

<html>
<head>
<style>
div {
background-color: blue;
animation: change 4s;
transition: 2s;
}
div:hover {
background-color: black;
}
@keyframes change {
from { background-color: red; }
to { background-color: yellow; }
}
</style>
</head>
<body>
<div>Welcome to Infosys</div>
</body>
</html>

What will happen when the user hovers over "Welcome to Infosys" at the 2nd second of
animation?

a) background color will turn to black after completion of animation without any transition-duration
b) background color will turn to black after completion of animation with transition-duration of 2 sec
c) background color will not turn to black as transition cannot override animation
d) background color will change to black as soon as user hovers over "Welcome to Infosys" with
transition-duration 2 sec

Correct Answer:
Option (c) background color will not turn to black as transition cannot override animation

Concept Recap: Animation vs Transition Priority in CSS

• CSS animations (defined using @keyframes and animation) take full control of the styled
properties while active.
• Transitions are smooth changes between values when a property is changed, e.g., on hover.
• BUT — transitions do not override animations while they are in progress.
Detailed Explanation:

• The <div> has an active animation:

animation: change 4s;

Which changes the background from red → yellow over 4 seconds.

• The :hover state uses:

background-color: black;
transition: 2s;

• If the user hovers during the animation (at 2 seconds), the animation is still controlling the
background-color.

Result: The hover effect (with transition) is ignored during the active animation.

After the animation ends (after 4 seconds), the :hover rule may apply (if still hovered), and then
transition will work.

Key Points to Remember:

• An animation overrides transitions on the same property during its active duration.
• Transitions take effect only when the property is not animated.
• If background-color is animated, a transition on it won’t apply until the animation finishes.

Final Answer: Option (c)


Background color will not turn to black as transition cannot override animation while it is in
progress.

Question 39:
John wants the following output for the page:

Java (in blue)


Python (in black)

He has written the following HTML:

<html>
<head>
<style>
<< line1 >> { color: blue }
</style>
</head>
<body>
<span>
<p>Java</p>
</span>
<p>Python</p>
</body>
</html>

What should he write in line1 to achieve the above output?

a) span < p
b) span > p
c) span + p
d) span * p

Correct Answer:
Option (b) span > p

Concept Recap: CSS Combinators

Selector Meaning
A > B Selects B elements that are direct children of A
A + B Selects the next sibling of A that is B
A B Selects all B elements descended from A
A * B Invalid syntax — not a valid CSS combinator
A < B Invalid — < is not a valid CSS selector

HTML Structure Analysis:

<span>
<p>Java</p>
</span>

• <p> is a direct child of <span> → Matches span > p

<p>Python</p>
• This <p> is not inside the span, so it won’t be selected by span > p

Why Other Options Are Incorrect:

• a) span < p → Invalid syntax


• c) span + p → Would match a <p> immediately after a <span> — not the one inside it
• d) span * p → Invalid combinator (* is not used this way in CSS selectors)

Final Output:

• "Java": Styled in blue (because it’s a <p> inside a <span>)


• "Python": Remains black (not inside the <span>)

Final Answer: Option (b)


span > p correctly targets the Java paragraph for blue color, without affecting Python.

Question 40:
Observe the code below:

<html>
<head>
<style>
.color {
color: blue;
}
div[class="color"] {
color: red;
}
div {
color: palegoldenrod;
}
.color:hover {
color: green;
}
</style>
</head>
<body>
<div class="color">Welcome to Infosys</div>
</body>
</html>

What will happen when the user hovers over “Welcome to Infosys”?

a) Text color will change from blue to green


b) Text color will change from red to green
c) Text color will change from palegoldenrod to green
d) Text color will not change

Correct Answer:
Option (b) Text color will change from red to green

Concept Recap: CSS Specificity and Pseudo-Classes

• When multiple CSS rules apply to the same element, the most specific selector wins.
• If specificity is equal, the last rule defined takes precedence.
• Pseudo-classes like :hover override base styling when activated.

Rule Breakdown:

1. .color { color: blue; }


→ Targets any element with class color (low specificity)
2. div[class="color"] { color: red; }
→ More specific: targets only div elements where class is exactly
"color"
→ Overrides .color rule → Applies → Red
3. div { color: palegoldenrod; }
→ Targets all div tags (lowest specificity) → Overridden by
above
4. .color:hover { color: green; }
→ On hover, this rule kicks in → Applies → Green

On Hover:

• Initial color: red (from div[class="color"])


• Hover color: green (from .color:hover)
Key Points to Remember:

• div[class="color"] is more specific than .color


• :hover overrides normal class styling when active
• CSS specificity hierarchy plays a critical role in determining which style applies

Final Answer: Option (b)


Text color will change from red to green when hovered, due to specificity and the hover rule.

Question 41:
Select which of the following statement/statements is correct about the pseudo-class :hover.

a) When something is passed over by an input from the user, such as when a cursor moves over a link.
b) Links can be jumped between using a tab key and they will gain focus one at a time.
c) Visited links will get focused.
d) Select links on mouse over.

Correct Answer:
Options (a) and (d) are correct

Concept Recap: CSS Pseudo-Class :hover

The :hover pseudo-class is triggered when a user points to an element (typically with a mouse) — it
does not depend on clicks or focus from a keyboard.

Commonly used for:

• Buttons
• Links
• Menus
• Cards
• Anything interactive

Option-wise Analysis:

Option Statement Validity Explanation


a) "When something is passed over Describes :hover behavior
by an input from the user, such as Correct accurately — it's triggered by a
when a cursor moves over a link." pointing device like a mouse
b) "Links can be jumped between This describes the :focus
using a tab key and they will gain Incorrect pseudo-class, not :hover
focus one at a time."
c) "Visited links will get focused" This relates to :visited and
Incorrect :focus, not :hover
d) "Select links on mouse over." This is a simplified way of
Correct describing what :hover does

Key Points to Remember:

• :hover applies when the mouse pointer is over an element


• :focus applies when an element is focused via keyboard or script
• :visited applies to links that the user has already clicked
• These pseudo-classes are distinct and serve different interaction purposes

Final Answer:
Options (a) and (d) are correct — both accurately describe how the :hover pseudo-class works.

You might also like