You are tasked with ensuring that all hyperlinks have no underlines but should be underlined when hovered over. How would you implement this using CSS?
- a { text-decoration: none; } a:hover { text-decoration: underline; }
- a { text-decoration: underline; }
- a { text-decoration: underline; } a:hover { text-decoration: none; }
- a:hover { text-decoration: underline; }
To ensure that hyperlinks have no underlines by default but are underlined when hovered over, you should use the CSS rule a { text-decoration: none; } to remove the underlines from all anchor elements and then use a:hover { text-decoration: underline; } to specify that underlines should appear when the link is hovered.
OOCSS primarily focuses on separating container and content, and promoting the reuse of ________.
- CSS rules
- HTML elements
- JavaScript functions
- Styles
Object-Oriented CSS (OOCSS) emphasizes separating the container and content in your styles and promoting the reuse of styles (i.e., CSS rules). This approach helps keep your CSS modular, making it easier to maintain and reducing redundancy in your code.
When using Styled Components, how would you dynamically change the style of a component based on its props?
- Create separate component variants for each style and switch between them using conditional rendering.
- Styled Components do not support dynamic style changes based on props.
- Use the class prop to assign different CSS classes based on prop values.
- Use the style prop to pass in an inline CSS object and conditionally apply styles based on prop values.
In Styled Components, you can dynamically change the style of a component based on its props by using the style prop. You can pass in an inline CSS object and conditionally apply styles based on the values of the props. This allows for the creation of versatile and reusable components.
What is the default value of the box-sizing property in CSS?
- border-box
- content-box
- margin-box
- padding-box
The default value of the 'box-sizing' property in CSS is 'content-box.' In this mode, the width and height of an element do not include padding or borders, only the content is considered. This can sometimes lead to unexpected layout behavior, which is why 'border-box' is often preferred.