What are media queries in CSS and their use case?Difference between min-width and max-width in media queries?Explain float and clear property in CSS!

What are media queries in CSS and their use case?

Ans:-Media queries allow you to apply CSS styles depending on the width of the devices and display CSS styles depending on various types like screen and print.

Use Cases

• Responsive Design

• Customized user experience

• Improved performance

• Enhanced accessibility

• Simplified maintenance

Difference between min-width and max-width in media queries in CSS?

Ans:-

min-width: @media (min-width: value){...}, it says that your viewport width should at least be the value given to min-width to display the respective CSS inside the block of the respective media query.

max-width: @media (max-width: value){...}, it says that your respective CSS inside the block of the respective media query will be applied till the viewport width value is less than or equal to the max-width value given to max-width and vice-versa.

Explain float property and clear property in CSS with examples.

Ans:- Float: The float property specifies how an element should float i.e for the positioning and formatting of content on a web page.

The property value may be none or left or right or both or inherit.

e.g: for an element, we write the CSS property as element { float: left; } , now the element will float left to the container of the element.

Clear: The clear property controls the flow next to floated elements.

The clear property specifies what should happen with the element that is next to the floating element.

The clear value may be none or left or right or both or initial or inherit.

e.g: for an element we write the CSS property as element {clear: left;} , now the element will be pushed below the left floated elements.