Mastering CSS Concepts

What is the purpose of CSS selectors?

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

• To define the structure of HTML documents.

• To manage server-side data processing.

• To create JavaScript functions for interactivity.

Which selector targets all elements of a specific type?

• Class selector

• Universal selector

• Type selector

• ID selector

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

• *example

• #example

• .className

• .example

What is the difference between an ID selector and a class selector?

• An ID selector can be used for multiple elements, while a class selector is for a single element.

• An ID selector targets a unique element with a specific 'id', while a class selector targets multiple elements with a shared 'class'.

• Both ID and class selectors target unique elements but are used differently in CSS.

• An ID selector is defined with a dot, while a class selector is defined with a hash.

How do you create a grid container in CSS?

• Add 'grid-area' to the child elements.

• Use 'grid-template-columns' to define the grid.

• Set 'display: flex;' on the container element.

• Set 'display: grid;' on the container element.

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

• grid-template-rows

• grid-template-columns

• grid-area

• grid-columns

How do you make a grid item span multiple columns?

• Set the 'column-span' property in HTML.

• Use the 'grid-column' property in CSS.

• Use the 'grid-row' property in CSS.

• Apply 'flexbox' to the grid item.

What is the purpose of the 'grid-template-areas' property?

• To define the number of columns in a grid layout.

• To create responsive images in CSS.

• To define named grid areas for layout in CSS Grid.

• To set the background color of a grid item.

How can you create a simple fade-in animation using CSS?

• Use the following CSS: @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation: fadeIn 2s; }

• @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

• .element { animation: bounce 2s; }

• Use the following CSS: .element { transition: opacity 2s; opacity: 1; }

What property is used to define the duration of a CSS animation?

• animation-time

• animation-length

• animation-speed

• animation-duration