WikiGalaxy
CSS Quiz: The Box Model
Question:
What are the four components of the CSS Box Model?
Fact:
The CSS Box Model is crucial for designing layouts as it defines the space an element occupies and how it interacts with other elements.
/* CSS Box Model Components */
.element {
margin: 10px;
border: 1px solid black;
padding: 5px;
width: 100px;
}
Answer:
The four components are: Content, Padding, Border, and Margin.
CSS Quiz: Flexbox
Question:
What does the "justify-content" property do in a flex container?
Fact:
Flexbox allows for flexible and efficient arrangement of items within a container, adapting to different screen sizes seamlessly.
/* Flexbox Justify-Content Example */
.container {
display: flex;
justify-content: center;
}
Answer:
The "justify-content" property aligns the flex items along the main axis, distributing space between and around them.
CSS Quiz: Grid Layout
Question:
How does the "grid-template-columns" property work?
Fact:
CSS Grid Layout is a powerful tool for creating two-dimensional layouts, offering more control than traditional layout methods.
/* Grid Template Columns Example */
.grid-container {
display: grid;
grid-template-columns: 100px 200px;
}
Answer:
The "grid-template-columns" property defines the number and size of columns in a grid layout.
CSS Quiz: Pseudo-classes
Question:
What is the difference between ":hover" and ":active" pseudo-classes?
Fact:
Pseudo-classes provide a way to style elements based on their state or position, enhancing user interaction.
/* Pseudo-classes Example */
.button:hover {
background-color: blue;
}
.button:active {
background-color: red;
}
Answer:
":hover" applies when the user hovers over an element, while ":active" applies when the element is being clicked.
CSS Quiz: Media Queries
Question:
How do media queries enhance responsive design?
Fact:
Media queries allow developers to apply different styles based on device characteristics, making websites adaptable to various screen sizes.
/* Media Queries Example */
@media (max-width: 600px) {
.responsive {
font-size: 12px;
}
}
Answer:
Media queries adjust the layout and styling of a website based on the device's screen size, ensuring optimal viewing experiences.
CSS Quiz: Positioning
Question:
What is the difference between "absolute" and "relative" positioning?
Fact:
Understanding CSS positioning is key to controlling the layout and flow of elements on a webpage.
/* Positioning Example */
.relative {
position: relative;
top: 10px;
}
.absolute {
position: absolute;
top: 20px;
}
Answer:
"Relative" positioning moves an element relative to its normal position, while "absolute" positions it relative to the nearest positioned ancestor.
CSS Quiz: Transitions
Question:
How do CSS transitions enhance user experience?
Fact:
Transitions allow for smooth changes between states, making interactions feel more natural and engaging.
/* Transitions Example */
.transition {
transition: background-color 0.5s ease;
}
.transition:hover {
background-color: yellow;
}
Answer:
CSS transitions provide a way to animate changes to CSS properties, enhancing the fluidity of interactions.
CSS Quiz: Z-index
Question:
What role does "z-index" play in CSS stacking context?
Fact:
The "z-index" property controls the vertical stacking order of elements that overlap, crucial for managing layered content.
/* Z-index Example */
.layer1 {
position: absolute;
z-index: 1;
}
.layer2 {
position: absolute;
z-index: 2;
}
Answer:
"Z-index" determines the order of overlapping elements, with higher values appearing on top of lower ones.
