Font size
WorksheetsCW412 PART III
Total questions: 25
Worksheet time: 20mins
The box-sizing property allows you to define how the width and height of an element are calculated.
Which value includes padding and border in the width and height calculations?
content-box
border-box
padding-box
margin-box
What is the difference between an ID selector and a class selector?
An ID selector and a class selector both target a specific element based on its unique attribute, but an ID selector is used for classes and a class selector is used for IDs.
An ID selector and a class selector both target multiple elements with the same attribute, but an ID selector is used for classes and a class selector is used for IDs.
An ID selector targets multiple elements with the same ID attribute, while a class selector targets a specific element based on its unique class attribute.
An ID selector targets a specific element based on its unique ID attribute, while a class selector targets multiple elements with the same class attribute.
You can combine selectors using commas (,) to target elements with multiple conditions.
Which code snippet selects all <p> elements with the class "important" that are descendants of a <div> with the ID "content"?
p.important #content div
div#content p.important
#content .important p
#content div p.important
What property defines the margin around an element and separates it from the content or neighboring elements?
margin
spacing
border
padding
The box-sizing property allows you to define how the width and height of an element are calculated.
Which value includes padding and border in the width and height calculations?
content-box
margin-box
padding-box
border-box
How can you collapse the top and bottom margins of adjacent elements to prevent unwanted spacing?
Use margin-collapse: collapse
Use the 'border-spacing' property
Apply padding instead of margin
Set 'display: inline-block' on the elements
The flex-direction property in Flexbox controls the direction of the flex items within the container.
Which value will display the items in a row from left to right?
column
reverse-row
right-to-left
row
Which of the following positioning values removes an element from the normal document flow and allows absolute positioning?
absolute
static
relative
fixed
In the box model, what property defines the padding around an element's content?
margin
border
outline
padding
Which of the following positioning values removes an element from the normal document flow and allows absolute positioning?
static
fixed
absolute
relative
What does the position property in CSS control?
The font size of an element.
The background color of an element.
The type of positioning method used for an element.
The margin around an element.
Which positioning value makes an element stay in place even when the page is scrolled?
fixed
absolute
sticky
relative
Choose the answer that best describes each CSS selector type.
Element selectors (sometimes called type selectors):
Selects elements with a specific class
Selects elements based on their position in the DOM
Selects elements based on their attributes
Selects all elements of the specified type.
Choose the answer that best describes each CSS selector type.
Class selectors:
Select elements with a specific id attribute
Select elements with a specific class attribute
Select elements based on their tag name
Select elements with a specific data attribute
Choose the answer that best describes each CSS selector type.
ID selectors:
Selects an element with a specific ID attribute
Selects elements based on their class attribute
Selects all elements on the page
Selects elements based on their tag name
To style all <p> elements on a webpage, you would use a(n) (a) selector.
If you want to target a specific button with the class name "submit", you would use the (a) selector.
Highlighting a link when the user hovers over it can be achieved with the (a) pseudo-class.
The default value for background-repeat is:
infinite
once
repeat
no-repeat
To create a solid border around an element in CSS, you would use the shorthand property (a) and specify the width, style, and color of the border.
The individual properties for border include border-width, border-style, and border-color. To set a dashed border, you would set the border-style property to (a) .
By default, borders are applied to all four sides of an element. You can target specific sides using properties like border-top, border-right, border-bottom, and border-left. To style only the bottom border of an element, you would use the property (a) .
In CSS, the value border-collapse: collapse can be used to collapse the margins of adjacent borders. This is useful for creating tables or other elements with borders that touch. To achieve this effect, you would set the border-collapse property to (a) .
Borders can also be used to create rounded corners on elements. The border-radius property allows you to define the curvature of the corners. To create a rounded border with a radius of 10 pixels, you would set the border-radius property to (a) .
Scenario: You're building a website with a game where adorable frogs need to jump on lilypads. Flexbox is the perfect layout tool to position the lilypads in a row. But uh oh, some frogs are misplaced!
Instructions: Use your Flexbox knowledge to answer the following questions and help the frogs reach their lilypads!
The frogs currently appear left to right. How can you use Flexbox to display them in reverse order (right to left)?
(a)
The frogs are currently chilling on the top edge of the lilypads. How can you use Flexbox to center them vertically within the container?
(a)
The frogs are a bit too close together. How can you use Flexbox to add some space between them? (do no use margins)
(a)
What if you want the frogs to behave differently on larger screens? Flexbox offers a way to set conditions based on screen size. You can create a _____ _______
(a)
