Font size
WorksheetsMastering CSS Concepts
Total questions: 10
Worksheet time: 5mins
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
.class_name
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.
