TRB PG Assistant - Layout and Menus - DIV and CSS layout, inline menus, responsive design concepts Question Bank with Options

1. Which CSS unit is often recommended for font sizes in responsive design to allow users to adjust text size in browser settings?

A) px

B) pt

C) em or rem

D) %

2. What is the primary goal of responsive design in terms of user experience?

A) To provide the exact same layout on all devices

B) To ensure optimal viewing and interaction experience across a wide range of devices

C) To force users to zoom in on mobile devices

D) To prioritize desktop users over mobile users

3. Which CSS property is used to control the order of flex items visually, independent of their order in the HTML source?

A) flex-direction

B) order

C) flex-grow

D) align-self

4. What is a common issue when using `float` for layout and how is it addressed?

A) Parent containers collapse; addressed with `clear: both;` or a clearfix hack

B) Items overlap; addressed with `z-index`

C) Vertical alignment is difficult; addressed with `vertical-align`

D) Responsiveness is automatic; no addressing needed

5. If you want a navigation menu to be sticky (remain visible at the top as the user scrolls), what CSS property is commonly used?

A) position: relative;

B) position: static;

C) position: sticky;

D) position: absolute;

6. Which CSS property is essential for creating layouts where items are aligned along a single axis, either horizontally or vertically?

A) Grid

B) Flexbox

C) Table

D) Block

7. What is the primary benefit of using semantic HTML elements like `<nav>`?

A) They automatically make the website responsive

B) They improve accessibility and SEO by providing structural meaning

C) They are required for all CSS styling

D) They reduce the need for JavaScript

8. In the context of responsive design, what is a 'breakpoint'?

A) A point where the layout breaks entirely

B) A specific screen width at which the CSS layout changes

C) The minimum width required for a device

D) The maximum width a browser window can be

9. Which CSS property controls the stacking order of positioned elements?

A) z-index

B) order

C) position

D) top

10. When creating an inline menu, what is the typical parent element containing the menu items?

A) <div>

B) <span>

C) <ul> or <ol>

D) <section>

11. What does `overflow: hidden;` on a container element do?

A) It makes the content scrollable

B) It hides any content that extends beyond the element's boundaries

C) It enlarges the element to fit all content

D) It displays the overflowing content with a scrollbar

12. Consider a responsive layout where a sidebar and main content area are side-by-side on large screens but stack vertically on small screens. Which CSS technique is most suitable for this?

A) Using `float: left;` for both and clearing the float

B) Using `display: inline-block;` for both

C) Using CSS Grid or Flexbox with media queries

D) Using `position: absolute;` for the sidebar

13. Which HTML element is specifically designed for navigation links?

A) <nav>

B) <menu>

C) <navlist>

D) <navigation>

14. What is the purpose of the `rem` unit in CSS, especially in responsive design?

A) It is relative to the parent element's font size

B) It is relative to the root element's (`<html>`) font size

C) It is a fixed pixel value

D) It is relative to the viewport width

15. Which of the following is NOT a valid value for `justify-content` in Flexbox?

A) flex-start

B) center

C) space-between

D) align-center

16. What is the default value for `flex-direction`?

A) row

B) column

C) row-reverse

D) column-reverse

17. When using `flex-wrap: wrap;`, what happens to items that don't fit on the main axis?

A) They are clipped or hidden

B) They overflow the container

C) They wrap onto the next line

D) They shrink smaller until they fit

18. Which CSS property allows flex items to wrap onto multiple lines if they don't fit on one line?

A) flex-grow

B) flex-shrink

C) flex-wrap

D) flex-flow

19. In CSS Grid, how do you assign an item to a specific grid area?

A) Using `grid-column` and `grid-row` properties

B) Using the `grid-area` property with a predefined area name

C) Using `position: absolute;`

D) Using `float: left;`

20. What is the advantage of using CSS Grid over floats for complex page layouts?

A) CSS Grid is simpler and requires less code for complex layouts

B) Floats provide better control over vertical alignment

C) CSS Grid is universally supported by all older browsers

D) Floats are easier to manage for multi-column layouts

21. To make a menu accessible on touch devices, what interaction might replace a simple `:hover` effect?

A) A `click` event handler using JavaScript

B) A `focus` event handler using JavaScript

C) A `longpress` event handler using JavaScript

D) No alternative is needed, hover works on touch

22. Which HTML structure is most semantically appropriate for a primary navigation menu?

A) A series of `<div>` elements

B) An unordered list (`<ul>`) containing list items (`<li>`) with anchor tags (`<a>`)

C) A paragraph (`<p>`) with `<a>` tags

D) A table (`<table>`)

23. When creating a dropdown menu that appears on hover, what CSS pseudo-class is typically used?

A) :focus

B) :active

C) :hover

D) :visited

24. What is the role of `box-sizing: border-box;` in responsive design?

A) It makes padding and border included in the element's total width and height

B) It excludes padding and border from the element's total width and height

C) It centers the content within the element

D) It controls the overflow behavior of the element

25. Consider a `<div>` with `width: 50%;`. In a responsive context, what happens when the viewport width decreases?

A) The `div`'s width remains fixed at 50% of its original computed width

B) The `div`'s width shrinks proportionally to 50% of the new, smaller viewport width

C) The `div` becomes hidden

D) The `div` overflows its container

26. Which CSS property is useful for creating flexible grids that automatically adjust column widths?

A) float

B) position

C) display: grid

D) display: flex

27. What is a 'mobile-first' approach in responsive design?

A) Designing for large desktop screens first and then scaling down

B) Designing for mobile devices first and then adding styles for larger screens

C) Using only mobile-compatible technologies

D) Prioritizing mobile user experience above all else

28. Which CSS unit is often preferred for fluid layouts in responsive design because it scales relative to the viewport size?

A) px (pixels)

B) em

C) rem

D) vw (viewport width)

29. What does `width: 100%;` on an element typically ensure in a responsive layout?

A) The element will always be 100 pixels wide

B) The element will take up the full available width of its parent container

C) The element will shrink to fit the smallest screen

D) The element will maintain its original aspect ratio

30. A common breakpoint in responsive design might be represented by a CSS media query like:

A) @media screen and (max-width: 600px)

B) @media print

C) @media all

D) @media screen and (min-width: 1200px)

31. What are CSS Media Queries primarily used for in responsive design?

A) To define font styles for different browsers

B) To apply different CSS rules based on device characteristics like screen width

C) To embed audio and video content

D) To create interactive JavaScript elements

32. Which HTML element is crucial for responsive design, allowing the browser to set the page's dimensions and scaling?

A) <meta name='viewport' content='width=device-width, initial-scale=1.0'>

B) <link rel='stylesheet' href='style.css'>

C) <title>Page Title</title>

D) <body>

33. What does the term 'responsive design' refer to in web development?

A) A design that is visually appealing

B) A design that adapts its layout to different screen sizes and devices

C) A design that uses only CSS for styling

D) A design that loads very quickly

34. To create a horizontal navigation bar, what CSS approach is commonly applied to list items (`<li>`) within an unordered list (`<ul>`)?

A) Set `display: block;` on `<li>`

B) Set `float: left;` or `display: inline-block;` on `<li>`

C) Set `position: relative;` on `<li>`

D) Set `text-align: center;` on `<ul>`

35. What CSS property is often used to remove default padding from `<ul>` and `<ol>` elements when creating navigation menus?

A) margin: 0;

B) padding: 0;

C) border: 0;

D) box-sizing: border-box;

36. When styling a list-based inline menu, what is a common practice to remove default bullet points?

A) Set `list-style-type: none;` on the `<ul>` or `<ol>`

B) Set `text-decoration: none;` on the `<a>` tags

C) Set `margin: 0;` on the `<li>` elements

D) Set `padding: 0;` on the `<ul>` or `<ol>`

37. How can you create an inline menu using HTML and CSS?

A) By styling `<li>` elements with `display: block;`

B) By styling `<a>` elements within a `<ul>` or `<ol>` with `display: inline-block;` or `float: left;`

C) By using only `<div>` elements with specific widths

D) By applying `position: absolute;` to each menu item

38. What CSS property is used to define the gaps between grid rows and columns?

A) grid-gap

B) grid-spacing

C) row-column-gap

D) gap-size

39. In CSS Grid, what defines the structure of rows and columns?

A) display: grid;

B) grid-template-rows and grid-template-columns

C) grid-area

D) grid-gap

40. Which CSS property is used to create a two-dimensional layout system for web pages, allowing for rows and columns?

A) Flexbox

B) Grid

C) Float

D) Position

41. What is the purpose of `align-items` in Flexbox?

A) To control the alignment of flex items along the main axis

B) To control the alignment of flex items along the cross axis

C) To determine how flex items wrap to new lines

D) To set the direction of the main axis

42. In Flexbox, what does `justify-content: center;` do?

A) Centers items vertically within their container

B) Centers items horizontally along the main axis

C) Distributes items evenly with space between them

D) Aligns items to the end of the cross axis

43. Which CSS property is the main axis for Flexbox layout?

A) justify-content

B) align-items

C) flex-direction

D) flex-wrap

44. What CSS layout model is specifically designed for arranging items in rows and columns, providing powerful control over alignment and distribution?

A) Grid Layout

B) Flexbox Layout

C) Block Layout

D) Inline Layout

45. Which `display` value allows an element to behave like an inline element but maintain block-level properties like width and height?

A) inline

B) block

C) inline-block

D) flex

46. What is the effect of `display: inline;` in CSS?

A) The element takes up the full width and starts on a new line

B) The element flows with surrounding text and only takes up as much width as necessary

C) The element is positioned absolutely relative to its container

D) The element creates a block-level box with specific dimensions

47. In CSS, what does `display: block;` typically do to an element?

A) Makes it behave like an inline element

B) Causes it to take up the full width available and start on a new line

C) Hides the element completely

D) Allows it to float to the left or right

48. Which CSS property is used to control the visual presentation of elements within a `<div>` container?

A) content

B) display

C) style

D) format

49. What is the primary purpose of the `<div>` element in HTML?

A) To create a paragraph of text

B) To define a hyperlink

C) To group other HTML elements for styling or scripting purposes

D) To embed an image

Layout and Menus - DIV and CSS layout, inline menus, responsive design concepts - Question Bank