Fundamentals of Front End Development MCQs with Answers
Practice important Fundamentals of Front End Development MCQs with answers and explanations.
Chapter: 48
Q541:
Which CSS property makes the whole area of a link clickable in a navigation menu?
A. width
B. padding
C. display
D. margin
Correct Answer:
C
Chapter: 48
Q542:
What does the CSS property `float: left` do for <li> elements in a navigation menu?
A. It makes them stack vertically
B. It makes them stack horizontally
C. It allows them to slide next to each other
D. It centers them horizontally
Correct Answer:
C
Chapter: 48
Q543:
The CSS rule `ul { list-style-type: none; margin: 0; padding: 0; }` is used to style which type of navigation bar?
A. Vertical navigation bar
B. Horizontal navigation bar
C. Dropdown navigation bar
D. Responsive navigation bar
Correct Answer:
B
Chapter: 48
Q544:
Fill in the blank: To ensure all links in a horizontal navigation bar have the same width, use `a { width: _____; }`.
A. 60px
B. 100px
C. auto
D. 0.5
Correct Answer:
A
Chapter: 48
Q545:
Which CSS property controls the transparency of an image?
A. opacity
B. visibility
C. clip
D. filter
Correct Answer:
A
Chapter: 48
Q546:
What is the range of values for the `opacity` property in CSS?
A. 0 - 1
B. 0 - 100
C. 0 - 255
D. 45301
Correct Answer:
A
Chapter: 48
Q547:
What CSS property is used for image transparency in IE8 and earlier?
A. opacity
B. filter
C. visibility
D. background-color
Correct Answer:
B
Chapter: 48
Q548:
How can you ensure an image appears fully opaque when hovered over, using CSS?
A. Set `opacity` to 0.4 on hover
B. Set `opacity` to 1.0 on hover
C. Set `opacity` to 0.4 normally
D. Set `opacity` to 0.5 on hover
Correct Answer:
B
Chapter: 48
Q549:
Fill in the blank: To make an image 40% transparent, use `img { opacity: _____; }`.
A. 0.4
B. 0.6
C. 1
D. 0.8
Correct Answer:
A
Chapter: 48
Q550:
Fill in the blank: For IE8 and earlier, to make an image 40% transparent, use `filter: alpha(opacity=_____);`.
A. 40
B. 60
C. 80
D. 20
Correct Answer:
A
Chapter: 48
Q551:
The CSS rule `img:hover { opacity: 1.0; }` makes the image __________.
A. More transparent
B. Completely opaque
C. Less transparent
D. Unchanged
Correct Answer:
B
Chapter: 49
Q552:
What is an image sprite in CSS?
A. A single image with multiple images combined
B. A single image with only one image
C. A single image with multiple frames
D. A single image with a color gradient
Correct Answer:
A
Chapter: 49
Q553:
What does using image sprites reduce?
A. Loading time for a page
B. Number of images on a page
C. Number of CSS rules used
D. The width of the images
Correct Answer:
A
Chapter: 49
Q554:
In the CSS example provided, what does `background: url(img_navsprites.gif) 0 0;` specify?
A. The background image and its position
B. Only the background color
C. Only the image URL
D. The width and height of the image
Correct Answer:
A
Chapter: 49
Q555:
What does `#navlist {position:relative;}` achieve in the navigation list?
A. It allows for absolute positioning of child elements
B. It sets the background color of the navigation list
C. It hides the list items from view
D. It adjusts the width of the navigation list
Correct Answer:
A
Chapter: 49
Q556:
In the CSS for navigation list items, why is `list-style:none;` used?
A. To remove the default list item markers
B. To add custom markers to the list items
C. To change the font size of the list items
D. To increase the padding of the list items
Correct Answer:
A
Chapter: 49
Q557:
What is the purpose of setting `margin:0;` and `padding:0;` in the navigation list items?
A. To remove any default space around the list items
B. To add space around the list items
C. To change the color of the list item text
D. To align the list items horizontally
Correct Answer:
A
Chapter: 49
Q558:
How is the hover effect applied to the navigation items?
A. By changing the background image and position
B. By changing the text color of the links
C. By adjusting the height of the list items
D. By increasing the margin of the list items
Correct Answer:
A
Chapter: 49
Q559:
What does `#home {left:0px;width:46px;}` specify for the `#home` item?
A. The position and width of the image in the sprite
B. Only the position of the image
C. Only the width of the image
D. The height of the image
Correct Answer:
B
Chapter: 49
Q560:
Which property is used to define the part of the image to be shown in the sprite?
A. background
B. background-position
C. background-image
D. background-color
Correct Answer:
B