MCQs Of Class 23: Enhancing HTML with CSS
CSS Box Model
1. What is the Box Model in CSS?
o A) Defines how content is arranged in an HTML element
o B) Describes the outer area of an HTML element, including padding and margins
o C) Specifies the color of an HTML element
o D) Specifies the font of an element
o Answer: B
Explanation: The CSS Box Model defines the outer area of an element, including its content, padding, border, and margin.
2. Which of the following is NOT part of the Box Model?
o A) Content
o B) Padding
o C) Border
o D) Height
o Answer: D
Explanation: Height is not part of the Box Model; it's a property used to set the size of an element.
3. What does the box-sizing: border-box property do?
o A) Includes padding and border in the width and height calculation
o B) Excludes padding and border in the width and height calculation
o C) Adds border to the element
o D) Increases the padding of the element
o Answer: A
Explanation: box-sizing: border-box ensures that padding and border are included within the width and height of the element.
4. Which property controls the space inside an element, between the content and the border?
o A) Margin
o B) Padding
o C) Border
o D) Width
o Answer: B
Explanation: Padding is the space between the content and the border inside an element.
5. In the Box Model, which property controls the space outside an element?
o A) Margin
o B) Padding
o C) Border
o D) Height
o Answer: A
Explanation: Margin is the space outside an element, pushing it away from other elements.
6. Which of the following will increase the size of the element's box without changing its width or height?
o A) Border
o B) Padding
o C) Margin
o D) None of the above
o Answer: A
Explanation: Adding a border increases the size of the box, but it does not affect the element's width or height directly.
7. What does the width: 300px property define in the Box Model?
o A) The content width
o B) The total width including padding and border
o C) The padding of the box
o D) The height of the element
o Answer: A
Explanation: The width property defines the width of the content area in the Box Model.
8. What is the default value of box-sizing in CSS?
o A) border-box
o B) padding-box
o C) content-box
o D) box
o Answer: C
Explanation: The default value of box-sizing is content-box, which means padding and border are not included in the element's total width and height.
Flexbox Layout
9. What does display: flex do in CSS?
o A) Makes the container a grid
o B) Makes the container a flex container, enabling flexbox layout
o C) Centers content horizontally
o D) Changes the font size of the container
o Answer: B
Explanation: display: flex turns the container into a flex container, enabling the use of flexbox layout.
10. Which property is used to align flex items horizontally in a flex container?
o A) justify-content
o B) align-items
o C) align-self
o D) flex-align
o Answer: A
Explanation: justify-content is used to align flex items horizontally along the main axis.
11. What is the purpose of the align-items property in flexbox?
o A) Aligns the items horizontally
o B) Aligns the items vertically
o C) Defines the space between items
o D) Sets the direction of the items
o Answer: B
Explanation: align-items is used to align flex items vertically (along the cross axis).
12. Which property is used to control the direction of flex items?
o A) flex-direction
o B) flex-align
o C) justify-content
o D) align-items
o Answer: A
Explanation: flex-direction controls the direction of flex items, such as row or column.
13. What does justify-content: space-between do in a flex container?
o A) Distributes space equally between items
o B) Aligns items at the center of the container
o C) Places the first item at the start and the last at the end, with equal space between them
o D) Aligns items at the end of the container
o Answer: C
Explanation: justify-content: space-between places the first item at the start, the last at the end, and distributes space between them.
14. Which property is used to make flex items wrap onto new lines?
o A) flex-wrap
o B) flex-direction
o C) wrap-items
o D) align-items
o Answer: A
Explanation: flex-wrap allows flex items to wrap onto new lines if necessary.
15. What is the default value of flex-wrap?
o A) wrap
o B) nowrap
o C) wrap-reverse
o D) flex
o Answer: B
Explanation: The default value of flex-wrap is nowrap, meaning items will not wrap by default.
Grid Layout
16. What is the purpose of CSS Grid Layout?
o A) Allows creating responsive columns
o B) Helps position elements using rows and columns
o C) Aligns elements vertically and horizontally
o D) Changes the element size
o Answer: B
Explanation: CSS Grid allows you to create layouts by defining rows and columns.
17. Which property defines the number of columns in a grid layout?
o A) grid-template-columns
o B) grid-columns
o C) grid-template-rows
o D) grid-columns-count
o Answer: A
Explanation: grid-template-columns defines the number and size of columns in a grid.
18. How can you specify the gap between grid items?
o A) gap
o B) grid-gap
o C) grid-spacing
o D) row-gap
o Answer: A
Explanation: gap is used to define the space between grid items.
19. What does grid-template-rows: 100px 200px do?
o A) Defines the height of the first row as 100px and the second row as 200px
o B) Defines the width of the columns
o C) Sets the margin for the rows
o D) Defines the background color of the rows
o Answer: A
Explanation: grid-template-rows: 100px 200px defines the height of the first and second rows in a grid.
20. Which of the following values is used to create an equal column layout in CSS Grid?
o A) grid-template-columns: 1fr 1fr 1fr
o B) grid-template-rows: 100px 100px
o C) grid-template-columns: auto
o D) grid-template-columns: 50% 50%
o Answer: A
Explanation: 1fr divides the space equally, so grid-template-columns: 1fr 1fr 1fr creates three equal-width columns.
Box Shadow Effect
21. Which property is used to create a shadow effect in CSS?
o A) shadow
o B) box-shadow
o C) text-shadow
o D) shadow-effect
o Answer: B
Explanation: The box-shadow property is used to apply a shadow effect to an element.
22. What is the syntax for applying a shadow with a 10px horizontal and 10px vertical offset, and 15px blur?
o A) box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5)
o B) box-shadow: 15px 10px rgba(0, 0, 0, 0.5)
o C) box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.5)
o D) box-shadow: 15px 0px 10px rgba(0, 0, 0, 0.5)
o Answer: A
Explanation: box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5) defines a shadow with a 10px horizontal and 10px vertical offset, and a 15px blur.
23. How can you add an inset shadow to an element?
o A) By adding inset keyword in box-shadow
o B) By adding text-shadow property
o C) By setting box-shadow to none
o D) By using shadow-inset property
o Answer: A
Explanation: The inset keyword in box-shadow creates a shadow inside the element.
Responsive Design
24. What is the purpose of media queries in CSS?
o A) To apply styles based on the screen size or device characteristics
o B) To apply styles to specific elements
o C) To animate elements
o D) To load external files
o Answer: A
Explanation: Media queries allow you to apply styles based on the screen size or other device characteristics.
25. Which of the following is an example of a media query for screens with a width of 600px or less?
o A) @media (max-width: 600px) { ... }
o B) @media (min-width: 600px) { ... }
o C) @media (width: 600px) { ... }
o D) @media 600px { ... }
o Answer: A
Explanation: @media (max-width: 600px) applies styles when the screen width is 600px or less.
26. What does vw stand for in responsive design?
o A) Vertical width
o B) Viewport width
o C) Vertical window
o D) Variable width
o Answer: B
Explanation: vw stands for viewport width, and 1vw equals 1% of the viewport's width.
27. What is the function of the meta viewport tag in HTML?
o A) It defines the width of the page
o B) It specifies how the page should be displayed on mobile devices
o C) It sets the background color
o D) It links external CSS files
o Answer: B
Explanation: The meta viewport tag ensures proper scaling and rendering of the page on mobile devices.
Advanced Flexbox
28. What does align-items: stretch do in a flex container?
o A) Stretches the items to fill the container's cross-axis
o B) Aligns items at the center of the cross-axis
o C) Aligns items at the start of the cross-axis
o D) Stretches the container
o Answer: A
Explanation: align-items: stretch makes the flex items stretch to fill the available space along the cross axis.
I can continue if needed, but let me know if you would like to adjust or include any specific topics from the original content.
You said:
give rest
ChatGPT said:
ChatGPT
Here are the remaining multiple-choice questions (MCQs) for the given CSS topics:
Advanced Flexbox (continued)
29. Which of the following properties allows a flex item to grow or shrink in size?
- A) flex-grow
- B) flex-shrink
- C) flex-basis
- D) All of the above
- Answer: D
Explanation:flex-grow,flex-shrink, andflex-basisare the three properties used to control the flex item's ability to grow or shrink.
30. What is the default value of flex-shrink?
- A) 1
- B) 0
- C) auto
- D) inherit
- Answer: A
Explanation: The default value offlex-shrinkis1, meaning the item can shrink if necessary.
31. What is the purpose of the order property in flexbox?
- A) It controls the order in which flex items appear
- B) It defines the size of the flex item
- C) It sets the alignment of flex items
- D) It defines the space between flex items
- Answer: A
Explanation: Theorderproperty allows you to rearrange the order of flex items in the container without changing the HTML structure.
Grid Layout (continued)
32. How do you create a 3x3 grid in CSS?
- A) grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
- B) grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
- C) grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 2fr 2fr 2fr;
- D) grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 2fr 2fr 1fr;
- Answer: B
Explanation:grid-template-columns: 1fr 1fr 1frandgrid-template-rows: 1fr 1fr 1frcreate a 3x3 grid, where each column and row has equal width and height.
33. What property is used to create grid gaps between rows and columns?
- A) grid-gap
- B) grid-row-gap and grid-column-gap
- C) gap
- D) grid-spacing
- Answer: C
Explanation: Thegapproperty is used to define the space between both rows and columns in a grid layout.
34. What does grid-template-areas allow you to do in CSS Grid?
- A) Define grid items' size
- B) Control the order of items in the grid
- C) Define specific areas for items within the grid layout
- D) Adjust the grid's overall layout direction
- Answer: C
Explanation:grid-template-areasallows you to define named areas for grid items within the grid, which you can use for more flexible and readable layout design.
35. How do you span a grid item across multiple rows in CSS Grid?
- A) grid-row: span 2;
- B) grid-row: 2 / 4;
- C) grid-column: span 2;
- D) Both A and B
- Answer: D
Explanation: Bothgrid-row: span 2;andgrid-row: 2 / 4;will span the grid item across multiple rows.
Box Shadow Effect (continued)
36. Which of the following is the correct syntax for a box-shadow with a 5px horizontal offset, 10px vertical offset, and a 2px blur with a color of rgba(0, 0, 0, 0.7)?
- A) box-shadow: 5px 10px 2px rgba(0, 0, 0, 0.7);
- B) box-shadow: 5px 10px 0px rgba(0, 0, 0, 0.7);
- C) box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.7);
- D) box-shadow: 10px 5px 2px rgba(0, 0, 0, 0.7);
- Answer: A
Explanation:box-shadow: 5px 10px 2px rgba(0, 0, 0, 0.7);applies the correct shadow with a 5px horizontal offset, 10px vertical offset, and 2px blur.
37. How do you apply an inset box shadow effect?
- A) box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
- B) box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
- C) box-shadow: 0px 0px 10px;
- D) box-shadow: inset rgba(0, 0, 0, 0.5);
- Answer: A
Explanation: Theinsetkeyword is used to apply an inner shadow effect in thebox-shadowproperty.
Responsive Design (continued)
38. What is the benefit of using rem in responsive design?
- A) It scales based on the element's parent size
- B) It scales based on the root element's font size
- C) It does not scale at all
- D) It makes the font size responsive based on screen width
- Answer: B
Explanation:remstands for "root em" and scales based on the root element's font size, making it ideal for responsive design.
39. Which property helps make images responsive in CSS?
- A) max-width: 100%;
- B) width: 100%;
- C) height: auto;
- D) All of the above
- Answer: D
Explanation: Usingmax-width: 100%,width: 100%, andheight: autohelps make images scale responsively according to the viewport.
40. What is the primary use of the @media rule in CSS?
- A) To add external stylesheets based on screen size
- B) To apply styles based on the conditions like screen size, resolution, and orientation
- C) To adjust the layout for different browsers
- D) To add JavaScript code based on screen size
- Answer: B
Explanation: The@mediarule allows you to apply styles based on specific conditions such as screen size, resolution, and orientation.
41. What does min-width mean in a media query?
- A) It applies styles for screens with a width greater than or equal to the specified value
- B) It applies styles for screens with a width smaller than the specified value
- C) It applies styles for all screen sizes
- D) It defines the minimum width of an element
- Answer: A
Explanation:min-widthapplies the styles to screens that are at least as wide as the specified value.
42. What does the vh unit represent in responsive design?
- A) Viewport height
- B) Vertical height
- C) Vertical width
- D) View height
- Answer: A
Explanation:vhstands for viewport height, where 1vh is equal to 1% of the height of the viewport.
Advanced Flexbox (continued)
43. What does flex-grow: 2 do to a flex item?
- A) It makes the item grow twice as much as other items
- B) It makes the item twice as wide as others
- C) It shrinks the item
- D) It adds padding to the item
- Answer: A
Explanation:flex-grow: 2makes the flex item grow twice as much as other items with aflex-growvalue of 1.
44. Which of the following properties can be used to set the initial size of a flex item?
- A) flex-grow
- B) flex-shrink
- C) flex-basis
- D) flex-align
- Answer: C
Explanation:flex-basissets the initial size of the flex item before any flex grow or shrink occurs.
Responsive Design (continued)
45. Which of the following is NOT a common unit used in responsive design?
- A) vw
- B) px
- C) em
- D) rem
- Answer: B
Explanation:px(pixels) is not recommended for responsive design because it does not scale with screen size, unlikevw,em, orrem.
46. Which CSS rule makes the layout of a website adapt to different screen sizes?
- A)
@mediaquery - B)
width: 100% - C)
flex - D)
float - Answer: A
Explanation: The@mediaquery is used to make the layout responsive by applying different styles based on the screen size.