MCQs Of Class 24: CSS Variables
Section 1: Basics of CSS Variables (Custom Properties)
Q1: What is the correct syntax to define a CSS variable?
🔘 a) variable: --main-color;
🔘 b) --main-color: blue; ✅
🔘 c) var(--main-color): blue;
🔘 d) set-variable(--main-color, blue);
✅ Explanation:
CSS variables are defined using -- followed by the variable name inside a selector, e.g., :root { --main-color: blue; }.
Q2: Where should global CSS variables be declared?
🔘 a) In @media queries
🔘 b) Inside the body tag
🔘 c) Inside the :root selector ✅
🔘 d) Inside JavaScript
✅ Explanation:
Using :root {} ensures variables are globally accessible across the entire CSS file.
Q3: How do you use a CSS variable in a property?
🔘 a) background-color: --main-color;
🔘 b) background-color: var(--main-color); ✅
🔘 c) background-color: set(--main-color);
🔘 d) background-color: css-var(--main-color);
✅ Explanation:
CSS variables are used with the var() function, e.g., color: var(--text-color);.
Q4: What is the fallback value in the var() function?
🔘 a) A secondary value used if the variable is not defined ✅
🔘 b) A predefined color in CSS
🔘 c) A JavaScript function
🔘 d) The default color of a browser
✅ Explanation:
Example: background: var(--main-color, red); → Uses red if --main-color is undefined.
Q5: Can CSS variables be modified in JavaScript?
🔘 a) Yes ✅
🔘 b) No
✅ Explanation:
CSS variables can be updated dynamically using JavaScript:
js
CopyEdit
document.documentElement.style.setProperty('--bg-color', 'black');
Section 2: Theme Switching with CSS Variables
Q6: What is the purpose of CSS theme switching?
🔘 a) To apply dynamic styles ✅
🔘 b) To replace JavaScript
🔘 c) To add animations
🔘 d) To disable styles
✅ Explanation:
Theme switching allows users to change website themes dynamically using CSS variables.
Q7: What is the best way to store a user’s theme preference?
🔘 a) Cookies
🔘 b) Session Storage
🔘 c) Local Storage ✅
🔘 d) IndexedDB
✅ Explanation:
LocalStorage retains the theme even after the page is refreshed:
js
CopyEdit
localStorage.setItem("theme", "dark-theme");
Q8: Which CSS property allows a smooth transition between themes?
🔘 a) animation
🔘 b) transition ✅
🔘 c) opacity
🔘 d) visibility
✅ Explanation:
Adding transition: background-color 0.5s ease; makes theme changes smooth.
Q9: What is the correct way to apply a theme using CSS classes?
🔘 a) document.body.addClass("dark-theme");
🔘 b) document.body.classList.add("dark-theme"); ✅
🔘 c) document.body = "dark-theme";
🔘 d) setClass("dark-theme");
✅ Explanation:
Use classList.add() to apply themes dynamically.
Q10: Which of the following is a correct way to reset a theme?
🔘 a) document.body.removeAttribute("class");
🔘 b) document.body.classList.remove("dark-theme"); ✅
🔘 c) document.body.style = "reset";
🔘 d) resetCSS();
✅ Explanation:
Using classList.remove("dark-theme") resets the theme to default.
Section 3: Advanced Theme Switching Concepts
Q11: Which layout method is best for designing a theme preview section?
🔘 a) position: absolute;
🔘 b) grid ✅
🔘 c) float
🔘 d) table
✅ Explanation:
CSS Grid or Flexbox allows arranging theme previews dynamically.
Q12: How do you create a hover effect for theme preview boxes?
🔘 a) opacity: 0;
🔘 b) transition: transform 0.3s; ✅
🔘 c) visibility: hidden;
🔘 d) display: none;
✅ Explanation:
Example:
css
CopyEdit
.theme-box:hover { transform: scale(1.1); }
Q13: What is a limitation of CSS variables?
🔘 a) They cannot be changed in JavaScript
🔘 b) They are not supported in all browsers
🔘 c) They do not work inside @media queries
🔘 d) They are not supported in Internet Explorer ✅
✅ Explanation:
CSS variables are not fully supported in Internet Explorer.
Section 4: MCQs on JavaScript for Theme Switching
Q14: How can you retrieve a CSS variable value in JavaScript?
🔘 a) getComputedStyle(document.documentElement).getPropertyValue('--bg-color'); ✅
🔘 b) document.body.getProperty('--bg-color');
🔘 c) document.getVariable('--bg-color');
🔘 d) window.getVariable('--bg-color');
✅ Explanation:
Use getComputedStyle() to access a CSS variable’s value in JavaScript.
Q15: What happens if you set a CSS variable inside an element instead of :root?
🔘 a) It applies globally
🔘 b) It only applies to that element ✅
🔘 c) It throws an error
🔘 d) It overrides all global variables
✅ Explanation:
CSS variables inside elements are scoped to that element.
More MCQs on:
✔ CSS Variables in Media Queries
✔ Using CSS Variables with Animations
✔ Theme Switching with Dark Mode
✔ CSS Grid vs. Flexbox for UI Layout
✔ Storing and Retrieving Themes in Local Storage
Would you like more MCQs or practice exercises? 🚀
You said:
yes ,,,from same above concept
ChatGPT said:
ChatGPT
Here are 35 more MCQs on CSS Variables and Theme Switching, continuing from the previous set. These cover advanced CSS concepts, JavaScript integration, animations, media queries, and best practices.
Section 5: CSS Variables in Media Queries
Q16: Can CSS variables be used inside @media queries?
🔘 a) No, CSS variables cannot be used inside @media queries
🔘 b) Yes, but only global variables (:root variables) ✅
🔘 c) Yes, but they must be defined inside the @media query
🔘 d) Only in @supports
✅ Explanation:
Global CSS variables (:root { --color: red; }) can be used in media queries, but locally scoped variables cannot.
Q17: Which of the following is a correct way to use a CSS variable in a media query?
🔘 a)
css
CopyEdit
@media (max-width: 600px) { body { --bg-color: blue; } }
✅
🔘 b)
css
CopyEdit
@media (max-width: 600px) { body { var(--bg-color: blue); } }
🔘 c)
css
CopyEdit
@media (max-width: 600px) { setVariable(--bg-color, blue); }
🔘 d)
css
CopyEdit
@media (max-width: 600px) { color: --bg-color; }
✅ Explanation:
CSS variables must be set inside a selector even within @media queries.
Q18: What happens when a CSS variable is defined in a media query but not globally?
🔘 a) It throws an error
🔘 b) It is only available inside that media query ✅
🔘 c) It applies to all screen sizes
🔘 d) It resets the variable
✅ Explanation:
A variable set in @media (max-width: 600px) only applies when the screen size matches the condition.
Section 6: Animating Theme Switching
Q19: Which CSS property is most commonly used for smooth theme transitions?
🔘 a) animation
🔘 b) transition ✅
🔘 c) transform
🔘 d) opacity
✅ Explanation:
Use transition for a smooth color change when switching themes. Example:
css
CopyEdit
body { transition: background-color 0.5s ease, color 0.5s ease; }
Q20: What is the best way to animate a theme change?
🔘 a) Using CSS @keyframes
🔘 b) Using transition ✅
🔘 c) Using JavaScript setTimeout()
🔘 d) Using opacity
✅ Explanation:
transition allows gradual background and text color changes when the theme is switched.
Q21: How do you ensure a smooth transition when switching themes?
🔘 a) Apply transition to every element
🔘 b) Apply transition to :root ✅
🔘 c) Disable transitions
🔘 d) Use display: none; before applying a theme
✅ Explanation:
Applying transition to :root makes all variable-based color changes smooth.
Section 7: Local Storage for Theme Persistence
Q22: What happens if you don’t store the user’s theme preference?
🔘 a) The page resets to the default theme ✅
🔘 b) The browser remembers the theme
🔘 c) The page saves the theme automatically
🔘 d) JavaScript applies the last used theme
✅ Explanation:
Without LocalStorage, the theme resets when the page reloads.
Q23: What is the correct way to store a theme in LocalStorage?
🔘 a) document.setStorage("theme", "dark");
🔘 b) localStorage.setItem("theme", "dark"); ✅
🔘 c) window.saveTheme("dark");
🔘 d) sessionStorage.set("theme", "dark");
✅ Explanation:
Use localStorage.setItem("theme", "dark"); to store the theme permanently.
Q24: How do you apply a stored theme when a user revisits a page?
🔘 a)
js
CopyEdit
let theme = localStorage.getItem("theme");
document.body.classList.add(theme);
✅
🔘 b)
js
CopyEdit
window.loadTheme();
🔘 c)
js
CopyEdit
document.cookie = "theme=dark";
🔘 d)
js
CopyEdit
sessionStorage.getItem("theme");
✅ Explanation:
Using localStorage.getItem("theme") ensures that theme persists across page reloads.
Section 8: Using Flexbox or Grid for Theme Previews
Q25: Which layout method is best for arranging theme preview boxes?
🔘 a) float
🔘 b) flexbox ✅
🔘 c) absolute positioning
🔘 d) inline-block
✅ Explanation:
Flexbox is best for dynamic, responsive layouts.
Q26: How do you ensure theme previews stay evenly spaced?
🔘 a) justify-content: space-around; ✅
🔘 b) display: block;
🔘 c) margin: auto;
🔘 d) text-align: center;
✅ Explanation:
space-around creates equal spacing between preview boxes.
Section 9: Custom Fonts & Themes
Q27: How can you change fonts dynamically for different themes?
🔘 a) Define fonts in CSS variables ✅
🔘 b) Use JavaScript only
🔘 c) Set different @import rules
🔘 d) Use text-transform
✅ Explanation:
Example:
css
CopyEdit
:root { --font-main: 'Arial'; }
body { font-family: var(--font-main); }
Q28: What happens if a font is not available?
🔘 a) The page crashes
🔘 b) The fallback font is used ✅
🔘 c) The font size resets
🔘 d) The text disappears
✅ Explanation:
CSS always falls back to another font if the primary font is missing.
Section 10: Miscellaneous MCQs
Q29: Which of these browsers does not support CSS variables?
🔘 a) Chrome
🔘 b) Firefox
🔘 c) Internet Explorer ✅
🔘 d) Safari
✅ Explanation:
Internet Explorer does not support CSS variables.
Q30: How can you provide a default value when using var()?
🔘 a) var(--color, blue); ✅
🔘 b) default(--color, blue);
🔘 c) set-color(--color, blue);
🔘 d) fallback(--color, blue);
✅ Explanation:
Using var(--color, blue); ensures blue is used if --color is undefined.
Q31: Which of these is a best practice for using CSS variables?
🔘 a) Always define them in :root ✅
🔘 b) Use variables for every single CSS property
🔘 c) Define them inline
🔘 d) Use only global variables
✅ Explanation:
Defining CSS variables in :root makes them easier to manage.
Would you like more MCQs, assignments, or practical exercises? 🚀
You said:
rest
ChatGPT said:
ChatGPT
Here are the remaining 19 MCQs on CSS Variables and Theme Switching, completing the full set of 50.
Section 11: Debugging and Best Practices
Q32: How can you check the computed value of a CSS variable in the browser?
🔘 a) console.log(getComputedStyle(document.documentElement).getPropertyValue('--color')); ✅
🔘 b) console.log(document.documentElement.style.get('--color'));
🔘 c) console.log(window.getVariable('--color'));
🔘 d) console.log(var('--color'));
✅ Explanation:
getComputedStyle() returns the final value of CSS properties applied to an element.
Q33: What happens if you reference an undefined CSS variable?
🔘 a) The page crashes
🔘 b) The browser ignores the rule ✅
🔘 c) The text disappears
🔘 d) The default browser color is used
✅ Explanation:
If no fallback is provided, the browser ignores the property.
Q34: What is a best practice for naming CSS variables?
🔘 a) --primary-color ✅
🔘 b) --1color
🔘 c) --background color
🔘 d) --p
✅ Explanation:
CSS variables must start with --, cannot start with numbers, and should be descriptive.
Q35: Which of these CSS variables is correctly formatted?
🔘 a) --main-color: red; ✅
🔘 b) --main color: red;
🔘 c) --maincolor = red;
🔘 d) main-color: red;
✅ Explanation:
CSS variables must use a colon (:) and cannot contain spaces.
Section 12: Theme Switching and JavaScript
Q36: How can JavaScript update a CSS variable?
🔘 a) document.documentElement.style.setProperty('--color', 'blue'); ✅
🔘 b) document.setCSSVariable('--color', 'blue');
🔘 c) setVariable('--color', 'blue');
🔘 d) updateCSS('--color', 'blue');
✅ Explanation:
setProperty() allows dynamic changes to CSS variables.
Q37: What is the best way to store the selected theme persistently?
🔘 a) localStorage.setItem('theme', 'dark'); ✅
🔘 b) sessionStorage.setItem('theme', 'dark');
🔘 c) cookie.setTheme('dark');
🔘 d) theme.save('dark');
✅ Explanation:
localStorage ensures the theme remains even after closing the browser.
Q38: What is the role of toggle() in a theme switcher?
🔘 a) Adds or removes a class ✅
🔘 b) Deletes a variable
🔘 c) Changes the variable permanently
🔘 d) Removes the current theme
✅ Explanation:
classList.toggle('dark-mode') switches between light and dark mode.
Q39: Which event listener is best for detecting theme button clicks?
🔘 a) addEventListener('click', switchTheme); ✅
🔘 b) onThemeChange = switchTheme;
🔘 c) setTimeout(switchTheme, 1000);
🔘 d) switchTheme();
✅ Explanation:
Using addEventListener('click', function) attaches an event listener properly.
Q40: How can you ensure the correct theme is applied when the page loads?
🔘 a) Use window.onload = applyTheme; ✅
🔘 b) setTimeout(applyTheme, 1000);
🔘 c) loadTheme();
🔘 d) applyTheme();
✅ Explanation:
window.onload runs the function when the page loads.
Section 13: CSS Variables and Components
Q41: How do you define a local variable inside a component?
🔘 a) Inside .component { --bg: red; } ✅
🔘 b) Inside :root { --bg: red; }
🔘 c) Using JavaScript only
🔘 d) It is not possible
✅ Explanation:
Local CSS variables only apply to the component they are declared in.
Q42: What happens if a component-level variable is missing?
🔘 a) The global variable is used ✅
🔘 b) The page crashes
🔘 c) The browser ignores the rule
🔘 d) The component does not render
✅ Explanation:
If a local variable is missing, the global variable is used.
Q43: How do you override a global CSS variable inside a component?
🔘 a) Define --bg-color inside the component ✅
🔘 b) Use !important
🔘 c) Change the :root variable
🔘 d) You cannot override global variables
✅ Explanation:
A locally defined variable inside a component takes priority.
Section 14: Advanced Concepts
Q44: Which property allows smooth background transitions when switching themes?
🔘 a) transition: background-color 0.5s; ✅
🔘 b) animation: fade 0.5s;
🔘 c) opacity: 0.5;
🔘 d) transform: rotate(360deg);
✅ Explanation:
transition is the correct way to animate color changes.
Q45: What is the benefit of using CSS variables for themes?
🔘 a) They allow quick theme changes ✅
🔘 b) They use less memory
🔘 c) They improve SEO
🔘 d) They prevent page reloads
✅ Explanation:
CSS variables enable dynamic theming without modifying CSS files.
Q46: How do you reset a theme back to default?
🔘 a) document.documentElement.style.removeProperty('--bg-color'); ✅
🔘 b) resetTheme();
🔘 c) clearTheme();
🔘 d) deleteCSSVariable('--bg-color');
✅ Explanation:
removeProperty() deletes the custom value, restoring the default.
Q47: What is the role of prefer-color-scheme: dark?
🔘 a) Detects the user’s OS theme ✅
🔘 b) Automatically changes themes
🔘 c) Sets a default dark theme
🔘 d) Overrides all styles
✅ Explanation:
@media (prefers-color-scheme: dark) applies dark mode based on system settings.
Q48: How can you make a theme switch button accessible?
🔘 a) Add aria-label="Switch Theme" ✅
🔘 b) Use a <div> instead of a <button>
🔘 c) Hide it from screen readers
🔘 d) Use JavaScript only
✅ Explanation:
aria-label improves accessibility for screen readers.
Q49: What happens when you store a theme in sessionStorage instead of localStorage?
🔘 a) The theme resets after the session ends ✅
🔘 b) The theme is saved permanently
🔘 c) The browser crashes
🔘 d) The user cannot switch themes
✅ Explanation:
sessionStorage only lasts until the browser is closed.
Q50: Which of these is NOT a valid method for theme switching?
🔘 a) Changing CSS variables dynamically
🔘 b) Using a pre-defined class
🔘 c) Reloading the page ✅
🔘 d) Modifying the style property in JavaScript
✅ Explanation:
Reloading the page is unnecessary for theme switching.
No comments:
Post a Comment