Quiz for Inline Styling

Q1: How do you apply inline styles to a React element?

A. Using the style attribute with a JavaScript object B. Using class attribute C. Using CSS files D. Using style tags in HTML

Q2: What is the correct syntax for setting a background color inline in React?

A. style={{backgroundColor: "red"}} B. style="background-color:red;" C. style="backgroundColor:red;" D. style={{background-color: "red"}}

Q3: How do you set multiple inline styles in React?

A. style={{color: "blue", fontSize: "12px"}} B. style="color:blue; font-size:12px;" C. style={{"color":"blue", "font-size":"12px"}} D. style={color: "blue", fontSize: "12px"}

Q4: Which naming convention is used for inline style properties in React?

A. camelCase B. kebab-case C. snake_case D. PascalCase

Q5: How do you specify a numeric value for a style property in React?

A. Without units for pixel values (e.g., fontSize: 12) B. Always as a string with units (e.g., "12px") C. With quotes only D. Not allowed

Q6: Can you use CSS pseudo-classes like :hover with inline styles in React?

A. No, inline styles do not support pseudo-classes B. Yes, using JS events C. Yes, directly in the style object D. Yes, using external CSS

Q7: What is a drawback of using inline styles in React?

A. Lack of support for pseudo-classes and media queries B. They are global styles C. Require external files D. They override CSS Modules

Q8: How can you dynamically change inline styles based on component state?

A. By using state variables inside the style object B. Using className only C. Using CSS files D. Using props only

Q9: Is it recommended to use inline styles for large-scale styling?

A. No, it is better to use CSS or CSS-in-JS B. Yes, always use inline styles C. Only for media queries D. Only for animations

Q10: How do you apply vendor prefixes in inline styles?

A. Manually include them as camelCase properties B. Automatically by React C. Using CSS files D. Not possible

Q11: Can inline styles be combined with CSS classes in React?

A. Yes, you can use both together B. No, only one at a time C. Only with styled-components D. Only with CSS Modules

Q12: How do you set a style property with a hyphenated CSS name in inline styles?

A. Convert it to camelCase (e.g., fontSize) B. Use quotes with hyphen C. Use string keys only D. Use underscores

Q13: How do you add an !important declaration in inline styles?

A. It is not possible with inline styles B. Use "important" property C. Use CSS classes D. Use style tags

Q14: What type of value should be used for CSS properties like zIndex?

A. Number without units B. String with "px" C. String with units D. Boolean

Q15: Can you use JavaScript expressions inside inline style properties?

A. Yes, style attribute accepts JS expressions B. No, only strings allowed C. Only numbers D. Only booleans

Q16: How do you specify a custom CSS property (CSS variable) in inline styles?

A. Use the JavaScript style property with quotes (e.g., "--main-color") B. Use camelCase C. Not supported D. Use CSS classes

Q17: Is it possible to use media queries in inline styles?

A. No, media queries are not supported inline B. Yes, using JS C. Yes, by nesting objects D. Only with CSS files

Q18: How do you handle hover effects in React using inline styles?

A. Use event handlers to change styles on mouse events B. Use :hover pseudo-class in style object C. Use CSS files only D. Not possible

Q19: What is a recommended use case for inline styles in React?

A. Quick style changes based on state or props B. All styling C. Global styles D. Animations only

Q20: Are inline styles in React applied as CSS classes in the DOM?

A. No, they are applied directly as style attributes B. Yes, converted to classes C. Yes, always D. No styles applied