Q61
Q61 How do you position an element at the bottom right corner of its positioned ancestor?
position: absolute; bottom: 0; right: 0;
position: fixed; bottom: 0; right: 0;
position: relative; bottom: 0; right: 0;
position: sticky; bottom: 0; right: 0;
Q62
Q62 What does setting position: sticky; on an element do?
Keeps the element fixed at the top of the viewport
Allows the element to scroll away with the page
Positions the element based on the user's scroll position, toggling between relative and fixed
Makes the element unresponsive to scroll events
Q63
Q63 How do you make an element with position: fixed; cover the entire viewport?
top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
top: 0; bottom: 0;
right: 0; left: 0;
Q64
Q64 Why might an element with position: absolute; not appear where expected?
It's outside the viewport
Its containing block is not positioned
It has a z-index of -1
Both B and C are correct
Q65
Q65 What could cause a position: fixed; element to behave like position: absolute;?
The document is in quirks mode
The element is inside a transformed ancestor
The viewport is not defined
The browser does not support position: fixed;
Q66
Q66 How can you solve an issue where a sticky positioned element isn't sticking?
Ensure the element has a defined top, right, bottom, or left value
Remove any overflow properties on ancestors
Increase the z-index
Both A and B are correct
Q67
Q67 Why might elements with different z-index values not stack as expected?
They are in different stacking contexts
There's a CSS error
The z-index is not supported
They have different position values
Q68
Q68 What is the purpose of responsive web design?
To make web pages render well on a variety of devices and window or screen sizes
To improve the speed of web pages
To enhance the security of web pages
To create a single design for all devices
Q69
Q69 Which HTML element is used to set the viewport to the device's width?
Q70
Q70 What does a media query allow you to do in CSS?
Change the layout based on the device's orientation
Apply different styles for different devices based on criteria like width, height, or orientation
Increase the loading speed of web pages
Encrypt web page data for security
Q71
Q71 Which CSS unit is recommended for responsive typography?
px
em
rem
pt
Q72
Q72 How do you apply a CSS style only for screens smaller than 600px?
@media only screen and (max-width: 599px) { ... }
@media screen and (max-width: 600px) { ... }
@media (min-width: 600px) { ... }
@media (width < 600px) { ... }
Q73
Q73 What is the difference between min-width and max-width in media queries?
min-width applies styles for widths greater than or equal to the specified value, while max-width applies styles for widths less than or equal to the specified value
min-width applies styles for heights, while max-width applies styles for widths
min-width is used for mobile devices, while max-width is used for desktops
There is no difference, they are interchangeable
Q74
Q74 Why is it important to use relative units like %, vw, vh, em, or rem in responsive design?
They allow for more precise control over layout dimensions
They enable the layout to adjust based on the parent element's size
They help the layout adapt to different screen sizes and resolutions
They make it easier to calculate dimensions
Q75
Q75 How do you ensure that a video embedded in a web page is responsive?
Set the video's width and height attributes to 100%
Use a container with a fixed aspect ratio and set the video to fill it
Use the element with the responsive attribute
Apply a media query to the video based on the viewport width
Q76
Q76 Which media query is correct for applying styles to devices with a width of at least 768px?
@media (min-width: 768px) { ... }
@media only screen (width >= 768px) { ... }
@media screen and (width: 768px) { ... }
@media (width > 768px) { ... }
Q77
Q77 How can you create a flexible grid layout that uses available space but limits column width to 200px?
Use display: grid; grid-template-columns: repeat(auto-fill, minmax(auto, 200px));
Use display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
Use display: flex; flex-wrap: wrap; and set children's flex-basis: 200px;
Use display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
Q78
Q78 What is the best practice for serving high-resolution images to devices with high-density displays?
Use the srcset attribute in the element
Specify different images for different resolutions using CSS
Use JavaScript to detect the screen resolution and load images accordingly
All of the above
Q79
Q79 How do you apply styles for landscape and portrait orientations of a device?
@media (orientation: landscape) { ... } and @media (orientation: portrait) { ... }
@media screen and (orientation: landscape) { ... }
@media only screen and (orientation: portrait) { ... }
Both A and B are correct
Q80
Q80 Why might a media query not apply its styles as expected?
The media query is incorrectly formatted
The viewport meta tag is missing from the HTML document
There is a more specific style overriding the media query
All of the above
Q81
Q81 How can you fix a layout that breaks at certain viewport sizes?
Use additional media queries to adjust styles at those sizes
Increase the base font size
Remove all media queries and use fixed sizes
Decrease the overall page width
Q82
Q82 What could be the reason for a background image not resizing with its container?
The background-size property is set to cover
The background-size property is set to contain
The container's size is not defined
The background-size property is set to auto
Q83
Q83 Why might changes in a media query not reflect in a browser?
The browser cache is outdated
The media query syntax is incorrect
The stylesheet link is broken
All of the above
Q84
Q84 Which property is used to change the font size of text in CSS?
font-style
font-weight
font-size
text-transform
Q85
Q85 What does the font-weight property do?
It changes the font style to italic or normal
It adjusts the thickness or boldness of the font
It alters the spacing between characters
It sets the height of a line of text
Q86
Q86 Which property is used to set the text color?
color
text-color
font-color
text-style
Q87
Q87 How do you make text uppercase using CSS?
text-transform: uppercase;
text-style: uppercase;
font-case: uppercase;
text-case: uppercase;
Q88
Q88 What is the purpose of the line-height property?
To set the vertical spacing between lines of text
To define the height of a line box
Both A and B are correct
To adjust the horizontal spacing between characters
Q89
Q89 Which property adds shadow to text?
text-shadow
font-shadow
box-shadow
shadow
Q90
Q90 How do you apply a font family of "Arial" to an element?
font-family: "Arial";
font-type: "Arial";
font: "Arial";
typeface: "Arial";
