The CSS Setup Latest Update Graded A+
How can you create rounded corners on an element?
✔✔Rounded corners can be achieved using the `border-radius` property, specifying a pixel value
or percentage for the curvature.
What does the `overflow` property do in CSS?
✔✔The `overflow` property controls how content that exceeds an element's box is handled, with
values like `visible`, `hidden`, `scroll`, and `auto`.
What is the function of the `transition` property?
✔✔The `transition` property allows for smooth changes between property values over a
specified duration, enhancing user experience.
How can you hide an element without removing it from the document flow?
✔✔To hide an element while keeping it in the document flow, use the `visibility` property set to
`hidden`.
What does the `flex-wrap` property do in a flex container?
1
,✔✔The `flex-wrap` property controls whether flex items should wrap onto multiple lines when
they exceed the container's width.
How do you create a CSS grid layout?
✔✔A CSS grid layout can be created by defining a container with `display: grid;` and then
specifying the layout with properties like `grid-template-rows` and `grid-template-columns`.
What is the purpose of the `nth-child` selector in CSS?
✔✔The `nth-child` selector targets specific child elements based on their position, allowing for
styling of every nth child element.
How can you make text bold in CSS?
✔✔Text can be made bold using the `font-weight` property, typically set to `bold` or a numeric
value like `700`.
What is the significance of the `float` property in CSS?
✔✔The `float` property allows elements to be positioned to the left or right, enabling text and
inline elements to wrap around them.
2
,How can you style a placeholder text in an input field?
✔✔Placeholder text can be styled using the `::placeholder` pseudo-element, allowing
customization of color, font, and opacity.
What does the `display: flex;` declaration do?
✔✔The `display: flex;` declaration enables a flex container, allowing for flexible and responsive
layouts of its child elements.
How can you apply a CSS style only when an element is hovered over?
✔✔To apply a style on hover, use the `:hover` pseudo-class, e.g., `button:hover { background-
color: blue; }`.
What is the difference between `margin` and `padding`?
✔✔`Margin` is the space outside an element's border, while `padding` is the space between an
element's content and its border.
How do you create a simple CSS animation?
✔✔A simple CSS animation can be created using the `@keyframes` rule to define the animation
steps and the `animation` property to apply it to an element.
3
, What is the effect of setting `display: none;` on an element?
✔✔Setting `display: none;` removes the element from the document flow entirely, making it
invisible and not occupying any space.
How can you vertically center an element using Flexbox?
✔✔To vertically center an element using Flexbox, set the container's `display` to `flex` and
apply `align-items: center;`.
What does the `background-attachment` property control?
✔✔The `background-attachment` property controls whether a background image scrolls with the
content or remains fixed, with values like `scroll`, `fixed`, and `local`.
How can you use CSS to change the cursor style on hover?
✔✔The cursor style can be changed on hover using the `cursor` property, such as `cursor:
pointer;` for interactive elements.
What is the purpose of using media queries in CSS?
4
How can you create rounded corners on an element?
✔✔Rounded corners can be achieved using the `border-radius` property, specifying a pixel value
or percentage for the curvature.
What does the `overflow` property do in CSS?
✔✔The `overflow` property controls how content that exceeds an element's box is handled, with
values like `visible`, `hidden`, `scroll`, and `auto`.
What is the function of the `transition` property?
✔✔The `transition` property allows for smooth changes between property values over a
specified duration, enhancing user experience.
How can you hide an element without removing it from the document flow?
✔✔To hide an element while keeping it in the document flow, use the `visibility` property set to
`hidden`.
What does the `flex-wrap` property do in a flex container?
1
,✔✔The `flex-wrap` property controls whether flex items should wrap onto multiple lines when
they exceed the container's width.
How do you create a CSS grid layout?
✔✔A CSS grid layout can be created by defining a container with `display: grid;` and then
specifying the layout with properties like `grid-template-rows` and `grid-template-columns`.
What is the purpose of the `nth-child` selector in CSS?
✔✔The `nth-child` selector targets specific child elements based on their position, allowing for
styling of every nth child element.
How can you make text bold in CSS?
✔✔Text can be made bold using the `font-weight` property, typically set to `bold` or a numeric
value like `700`.
What is the significance of the `float` property in CSS?
✔✔The `float` property allows elements to be positioned to the left or right, enabling text and
inline elements to wrap around them.
2
,How can you style a placeholder text in an input field?
✔✔Placeholder text can be styled using the `::placeholder` pseudo-element, allowing
customization of color, font, and opacity.
What does the `display: flex;` declaration do?
✔✔The `display: flex;` declaration enables a flex container, allowing for flexible and responsive
layouts of its child elements.
How can you apply a CSS style only when an element is hovered over?
✔✔To apply a style on hover, use the `:hover` pseudo-class, e.g., `button:hover { background-
color: blue; }`.
What is the difference between `margin` and `padding`?
✔✔`Margin` is the space outside an element's border, while `padding` is the space between an
element's content and its border.
How do you create a simple CSS animation?
✔✔A simple CSS animation can be created using the `@keyframes` rule to define the animation
steps and the `animation` property to apply it to an element.
3
, What is the effect of setting `display: none;` on an element?
✔✔Setting `display: none;` removes the element from the document flow entirely, making it
invisible and not occupying any space.
How can you vertically center an element using Flexbox?
✔✔To vertically center an element using Flexbox, set the container's `display` to `flex` and
apply `align-items: center;`.
What does the `background-attachment` property control?
✔✔The `background-attachment` property controls whether a background image scrolls with the
content or remains fixed, with values like `scroll`, `fixed`, and `local`.
How can you use CSS to change the cursor style on hover?
✔✔The cursor style can be changed on hover using the `cursor` property, such as `cursor:
pointer;` for interactive elements.
What is the purpose of using media queries in CSS?
4
