CSS Quiz: Dropdowns, Animations, Layout, Flexbox

Which HTML tag was traditionally used to create scrolling text or images in a web page?

• <slide>

• <scroll>

• <marquee>

• <move>

What CSS property is used to create a dropdown menu?

• visibility: hidden;

• display: dropdown;

• position: absolute;

• dropdown: true;

Explain the concept of CSS animations and provide an example.

• CSS animations are used to create movement and change in web pages. They allow elements to gradually change from one style to another. An example of a CSS animation is animating the color change of a button when hovered over.

• CSS animations are only used for text formatting.

• CSS animations are used to create 3D effects on web pages.

• An example of a CSS animation is changing the font size of a paragraph.

How can you center an element horizontally using flexbox?

• justify-content: center;

• margin: auto;

• text-align: center;

• item-order: center;

How does flexbox help in creating responsive web designs?

• Flexbox provides a way to layout items in a container, making it easier to create responsive web designs.

• Flexbox only works for vertical layout and not responsive design

• Flexbox has no impact on creating responsive web designs

• Flexbox helps in creating fixed-width web designs

What is the CSS property used to add padding to an element?

• padding

• margin

• color

• border

Explain the difference between padding and margin in CSS.

• Padding and margin are the same thing in CSS.

• Padding is used for horizontal spacing, while margin is used for vertical spacing.

• Padding is the space outside the border of an element, while margin is the space inside the border of an element.

• Padding is the space inside the border of an element, while margin is the space outside the border of an element.

What does the CSS property position: relative; do?

• It positions an element relative to its normal position.

• It makes an element completely invisible.

• It fixes an element's position on the page.

• It centers an element horizontally and vertically.

How can you change the background color of a div when the mouse hovers over it?

• div: mouseover { background-color: #ff0000; }

• div: hover { background-color: #ff0000; }

• div: hover-background { #ff0000; }

• div: hover-color: #ff0000;

How can you create a hover effect for a link in CSS?

• :hover-link { }

• a:hover { }

• hover: a { }

• link:hover { }