[8] CSS MCQ Quiz

Correct Answers: 0
Incorrect Answers: 0

148. What will 'grid-template-columns: repeat(3, 1fr);' do in a grid container?

Create a grid with 3 fixed-width columns

Create a single column repeated 3 times

Create 3 columns with flexible widths based on content

Create 3 columns each occupying equal available space

149. What is the effect of 'text-transform: capitalize;'?

Capitalizes the first letter of each word

Converts all letters to lowercase

Makes all letters uppercase

Capitalizes only the first letter of the element

150. Which CSS property defines the order of flex items within a container?

order

z-index

flex-direction

flex-order

151. How would you prevent a flex item from shrinking?

shrink: false;

flex-grow: 1;

flex-shrink: 0;

flex-basis: auto;

152. How do you create a grid layout with 4 equally sized columns using CSS Grid?

grid-layout: 4 columns;

display: grid 4x;

grid-columns: 4 equal;

grid-template-columns: repeat(4, 1fr);

153. Which CSS function is used to change the hue, saturation, or lightness of a color?

filter()

adjust()

color-adjust()

hsl()

154. Which CSS property is used to adjust the space between the border and content of an element?

margin

spacing

padding

border-spacing

155. Which value of 'justify-content' distributes flex items with space between them, but with no space at the edges?

space-between

space-around

center

stretch

156. How do you apply a CSS transition to change an element's color smoothly over 2 seconds?

change: color 2s;

transform: color 2s;

animation: color-change 2s;

transition: color 2s;

157. Which of the following is NOT a valid way to apply multiple classes to an element in CSS?

.class1+class2

.class1, .class2

.class1 .class2

.class1.class2

158. Which CSS property allows you to set the gap between grid items in a CSS Grid layout?

spacing

grid-gap

grid-spacing

gap

159. What does the 'isolation' property control in CSS?

Image rendering quality

Whether an element creates a new stacking context

Text isolation within a container

How flex items are aligned

160. Which of the following is a valid CSS custom media query definition?

@media --viewport-medium 768px;

@custom-media --viewport-medium (min-width: 768px);

@define-media --viewport-medium min-width 768px;

@media-custom --viewport-medium 768px;

161. Which CSS property controls how line breaks are handled within an element?

text-wrap

white-space

line-break

overflow-wrap

162. How would you create an animation that starts immediately and loops infinitely?

animation: loop;

animation-repeat: always;

animation-play: forever;

animation-iteration-count: infinite;

163. Which of the following will set a grid item to occupy 3 columns from the 2nd column?

grid-area: 2 / 4 / span 3;

grid-row: 3 / span 2;

grid-column: 2 / span 3;

grid-column: span 3 / 2;

164. Which CSS property can be used to create a multi-column layout?

grid-columns

multi-column

column-count

columns

165. Which of the following is not a valid value for the 'overflow' property?

fade

clip

hidden

scroll

166. Which CSS property determines how an element behaves when it is too large to fit in its container?

object-fit

content-fit

flex-wrap

overflow

167. Which CSS function is used to create a repeating linear gradient?

gradient-repeat()

repeating-linear-gradient()

repeat-gradient()

linear-gradient-repeat()

168. How would you disable pointer events on an element?

events: disabled;

pointer-events: none;

cursor: disabled;

pointer: none;

PreviousNext