Mastering CSS Concepts

What is the purpose of CSS selectors?

• To create HTML elements from scratch.

• To define the structure of a webpage.

• To add interactivity to HTML elements.

• The purpose of CSS selectors is to select HTML elements for styling.

Which selector targets all elements of a specific type?

• Type selector

• Class selector

• Universal selector

• ID selector

How do you select an element with a specific class in CSS?

• *example

• .example

• #example

• .className

What is the difference between 'flex-start' and 'flex-end' in Flexbox?

• 'flex-start' aligns items at the start of the container, while 'flex-end' aligns them at the end.

• 'flex-start' and 'flex-end' are the same

• 'flex-end' aligns items vertically in the middle

• 'flex-start' moves items to the center

How do you create a Flexbox container?

• Apply 'float: left' to the container element.

• Set the CSS property 'display' to 'flex' on the container element.

• Set the CSS property 'display' to 'block' on the container element.

• Use the CSS property 'flex-direction' on the child elements.

What property is used to define the number of columns in a CSS Grid?

• grid-template-rows

• grid-columns

• grid-area

• grid-template-columns

How do you center an item in a Flexbox layout?

• Use 'justify-content: center' and 'align-items: center' on the flex container.

• Use 'margin: auto' on the item itself.

• Apply 'text-align: center' to the flex container.

• Set 'display: block' on the flex container.

What does the 'grid-template-areas' property do?

• It sets the gap between grid items.

• It defines named grid areas for layout in a CSS grid.

• It specifies the number of columns in a grid.

• It controls the size of grid items.

Which CSS selector is used to select an element with a specific ID?

• .class

• #id

• [attribute='value']

• *

How can you change the direction of items in a Flexbox layout?

• By using the 'flex-direction' property.

• By applying 'align-items' property.

• By setting 'display: block' on the container.

• By using 'justify-content' property.