CSS and Media Queries Essentials

What does CSS stand for?

• Computer Style Sheets

• Cascading Style Sheets

• Creative Style Sheets

• Cascading Style System

What is a viewport in web design?

• A viewport is the size of a web server.

• A viewport is a type of web browser.

• A viewport is the code used to create a website.

• A viewport is the visible area of a web page on a device.

How do media queries enhance responsive design?

• Media queries enhance responsive design by enabling styles to change based on device characteristics.

• Media queries only affect text size.

• Media queries are used to optimize images only.

• Media queries are irrelevant for mobile devices.

What is the purpose of the 'max-width' property in CSS?

• The 'max-width' property sets the minimum width of an element.

• The 'max-width' property limits the maximum width of an element.

• The 'max-width' property controls the height of an element.

• The 'max-width' property is used to define the padding of an element.

How can you target different devices using media queries?

• Utilize JavaScript to detect devices instead of CSS.

• Apply styles only for desktop devices using 'max-height'.

• Use '@media' rules with conditions like 'max-width', 'min-width', 'orientation', etc., to apply styles for different devices.

• Use 'media' tags to specify device types directly.

What is the difference between 'em' and 'rem' units in CSS?

• 'em' is always larger than 'rem' units.

• 'rem' is relative to the parent element's font size.

• Both 'em' and 'rem' are fixed units and do not change with the font size.

• The 'em' unit is relative to the parent element's font size, while 'rem' is relative to the root element's font size.

What is the significance of the 'viewport' meta tag?

• The 'viewport' meta tag is responsible for loading external scripts.

• The 'viewport' meta tag controls the color scheme of a webpage.

• The 'viewport' meta tag is used to define the character set of a webpage.

• The 'viewport' meta tag allows for responsive design by controlling the layout and scaling of a webpage on mobile devices.

How can you optimize images for faster loading times?

• Disable image loading completely

• Compress images, use appropriate formats, implement lazy loading, and utilize responsive images.

• Increase image resolution

• Use only PNG format

What is the role of the 'srcset' attribute in image optimization?

• The 'srcset' attribute is used to define the image's alt text.

• The 'srcset' attribute specifies the image format to be used.

• The 'srcset' attribute optimizes images by allowing the browser to choose the best image source based on device characteristics.

• The 'srcset' attribute compresses images for faster loading.

What are the benefits of using SVG images over traditional formats?

• Benefits of using SVG images include scalability without quality loss, smaller file sizes for simple graphics, support for interactivity and animation, and resolution independence.

• SVG images cannot be animated or interactive

• SVG images are only compatible with modern browsers

• SVG images are always larger than PNG files