CSS Concepts Challenge

What are the four areas of the CSS box model?

(a)  

How does the 'position' property affect an element's placement?

• The 'position' property controls an element's placement in relation to its normal flow and surrounding elements.

• The 'position' property determines the color of an element.

• The 'position' property has no effect on an element's visibility.

• The 'position' property only affects the size of an element.

What is the difference between a pseudo-class and a pseudo-element?

• A pseudo-class targets the state of an element; a pseudo-element targets a specific part of an element.

• A pseudo-class is used for animations; a pseudo-element is used for transitions.

• A pseudo-class applies styles to all elements; a pseudo-element applies styles to none.

• A pseudo-class is a type of element; a pseudo-element is a type of class.

Name three common media types used in CSS.

• tablet

• screen, print, speech

• web

• mobile

What is the purpose of the 'float' property in CSS?

• To position elements to the left or right and allow text to wrap around them.

• To make elements invisible on the page.

• To create a fixed position for elements.

• To change the color of text elements.

How does the 'display' property influence the layout of an element?

• The 'display' property controls the rendering behavior and layout of an element.

• The 'display' property only affects the color of an element.

• The 'display' property determines the font size of an element.

• The 'display' property is used to add animations to an element.

What is the default value of the 'position' property in CSS?

• absolute

• fixed

• static

• relative

How can you select an element when it is hovered over using CSS?

• .element:active { /* styles here */ }

• element:hover { /* styles here */ }

• element:hovered { /* styles here */ }

• .element:hover { /* styles here */ }

What media type would you use for print styles?

• video

• print

• audio

• screen

Explain the difference between 'inline' and 'block' display values.

• Inline elements stack vertically, while block elements flow within a line.

• Block elements are for content that flows within a line, while inline elements create distinct sections.

• Inline elements are for content that flows within a line, while block elements create distinct sections that stack vertically.

• Inline elements create vertical sections, while block elements flow within a line.