Q121
Q121 Which pseudo-class targets the first child element within a parent?
:first-of-type
:first-child
:nth-child(1)
:first
Q122
Q122 What does the :nth-child() pseudo-class do?
Selects elements based on their sequence number in a group of siblings
Changes the style of every nth-child in a list
Applies styles to children of a specific parent
All of the above
Q123
Q123 How do you select an input element when it has focus?
input:focus
input:active
input:hover
input:focus-within
Q124
Q124 What is the difference between pseudo-classes and pseudo-elements?
Pseudo-classes target states or conditions, while pseudo-elements target specific parts of an element
Pseudo-classes can be combined, but pseudo-elements cannot
Pseudo-elements are used for layout, while pseudo-classes are used for styling
Pseudo-classes apply to all elements, while pseudo-elements only apply to container elements
Q125
Q125 How do you style the first line of a paragraph?
p:first-line { font-weight: bold; }
p::first-line { font-weight: bold; }
p:first-line:: { font-weight: bold; }
p:line:first { font-weight: bold; }
Q126
Q126 How can you style every odd row of a table?
tr:nth-child(odd) { background-color: #eee; }
tr:odd { background-color: #eee; }
table tr:odd-child { background-color: #eee; }
tr:nth-odd { background-color: #eee; }
Q127
Q127 How do you create a custom bullet point for list items using CSS?
li::before { content: '• '; }
ul li:bullet { content: '→ '; }
li:marker { content: '→ '; }
ul::marker { content: '→ '; }
Q128
Q128 What is required for the :hover pseudo-class to work on a link ( tag)?
An href attribute
A specific class or ID
JavaScript event listeners
CSS animations attached
Q129
Q129
Ensure the element has a closing tag
Set the content property to something other than none
Verify that the display property is not set to none
Both B and C are correct
Q130
Q130 What is the primary use of CSS custom properties (variables)?
To store values that can be reused throughout the document
To create complex animations
To define new CSS properties
To enhance browser compatibility
Q131
Q131 How do CSS functions like calc(), var(), and attr() enhance CSS capabilities?
By adding programming logic to CSS
By allowing dynamic calculations and access to element attributes
By enabling conditional styling
By extending CSS with JavaScript
Q132
Q132 What is a primary benefit of using CSS variables in web design?
Simplifying theme customization
Facilitating responsive design
Improving maintainability
Enhancing animation control
Q133
Q133 How do you define a CSS variable named --main-color on the :root selector?
:root { --main-color: #333; }
:root { main-color: #333; }
root { var(--main-color: #333); }
:root { $main-color: #333; }
Q134
Q134 How can you use the calc() function to create a width that is 50% of its container minus 30px?
width: calc(50% - 30px);
width: calc(50% - 30);
width: 50% - 30px;
width: calc(50 - 30px);
Q135
Q135 Why might changes to a CSS variable not be reflected in the styles of a page?
The variable is not correctly defined within the scope
The browser does not support CSS variables
The variable is overridden by another style
Both A and C are correct
Q136
Q136 How can you troubleshoot a calc() expression that doesn't apply the expected result?
Check for syntax errors in the expression
Ensure all values are of compatible types (e.g., all lengths)
Verify that no spaces are missing around operators
All of the above
Q137
Q137 What is the main advantage of using a CSS framework like Bootstrap?
Speeds up the development process by providing pre-designed components
Allows for the creation of complex animations easily
Automatically optimizes CSS for performance
Enhances the security of web applications
Q138
Q138 How do CSS preprocessors like SASS enhance CSS development?
By adding programming features such as variables, nested rules, and functions
By automatically converting CSS to JavaScript
By reducing the need for CSS files
By encrypting CSS files for security
Q139
Q139 What is the difference between SASS and SCSS?
SASS uses a strict indentation-based syntax, while SCSS uses a syntax similar to CSS
SASS files are faster to compile than SCSS
SCSS can only be used with Bootstrap
There is no difference; they are interchangeable
Q140
Q140 How do you include a Bootstrap component in your webpage?
Add the Bootstrap CDN link in the and use the component's class in your HTML
Download the Bootstrap library and reference it in your HTML
Use a Bootstrap plugin
All of the above
Q141
Q141 How do you create a mixin in SASS?
@mixin mixin-name { ... }
$mixin mixin-name { ... }
#mixin mixin-name { ... }
%mixin mixin-name { ... }
Q142
Q142 Why might changes made with SASS not be reflected in your CSS?
The SASS file was not saved before compiling
The CSS file is not correctly linked to the HTML document
There is a syntax error in the SASS file
All of the above
Q143
Q143 How can you troubleshoot a Bootstrap component that is not displaying as expected?
Check if the Bootstrap CDN link is correctly included in the
Verify that the correct classes are applied to the component
Ensure that no custom CSS is overriding Bootstrap's styles
All of the above
Q144
Q144 What is a key reason to use CSS shorthand properties?
To improve readability and maintainability
To exclusively enhance performance
To introduce new CSS features
To comply with CSS validation standards
Q145
Q145 What is the impact of using !important in CSS?
It makes debugging more difficult by breaking the natural cascade
It improves performance by prioritizing certain styles
It is required for responsive design
It enhances security by enforcing style rules
Q146
Q146 How does CSS minification improve website performance?
By reducing the number of CSS files
By decreasing the file size, leading to faster download times
By increasing the specificity of selectors
By automatically correcting syntax errors
Q147
Q147 What is the best practice for organizing CSS selectors and rules?
Grouping selectors and rules by page section
Ordering selectors alphabetically
Separating layout and typography styles into different files
All of the above
Q148
Q148 Which practice is recommended to optimize CSS rendering performance?
Using ID selectors extensively
Minimizing the use of universal selectors
Relying heavily on inline styles
Employing a large number of animations
Q149
Q149 What is a common issue when using multiple CSS frameworks or libraries simultaneously?
Conflicting styles leading to unexpected visual results
Increased load times due to additional HTTP requests
Incompatibility with JavaScript frameworks
All of the above
Q150
Q150 How can specificity conflicts in CSS be best resolved?
Using !important tags liberally
Increasing the specificity of conflicting selectors
Refactoring CSS to simplify selectors
Relying on inline styles for overrides
