NEW
Font size
WorksheetsMastering CSS Concepts
Total questions: 15
Worksheet time: 8mins
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
How do you define a CSS variable?
A CSS variable is created by using 'set --variable-name value;' syntax.
CSS variables are declared using 'var(--variable-name: value);'.
A CSS variable is defined with 'variable-name: value;' without the '--'.
A CSS variable is defined using the syntax '--variable-name: value;'. It can be accessed with 'var(--variable-name)'.
What is the syntax to use a CSS variable in a style rule?
--variable-name var()
var(--variable-name)
var[]
variable-name: var()
How can you change the value of a CSS variable dynamically?
Use CSS preprocessors like SASS to modify variables.
Set the variable in a separate JavaScript file without using 'style.setProperty'.
Change the CSS variable in the HTML file directly.
Use JavaScript to change the CSS variable with 'style.setProperty'.
What is the difference between 'ease', 'linear', and 'ease-in-out' in CSS animations?
'ease' is abrupt, 'linear' is variable, and 'ease-in-out' is unpredictable.
'ease' and 'ease-in-out' are the same, while 'linear' is different.
The difference is in the timing function: 'ease' is gradual, 'linear' is constant, and 'ease-in-out' combines both.
'ease' is constant, 'linear' is gradual, and 'ease-in-out' is random.
How do you apply multiple animations to a single element in CSS?
Set animations in a separate CSS file.
Use the 'animation' property with multiple animations separated by commas.
Use the 'transform' property for animations.
Apply animations using JavaScript only.
