CSS and Classes
Control styles with addClass(), removeClass(), and toggleClass(). css() reads or sets inline styles directly. Prefer adding and removing classes so your visual logic stays in CSS where it belongs.
Styling with jQuery $('p').css('color', 'red');
$('p').css({ color: 'red', fontSize: '18px' });
$('div').addClass('active');
$('div').removeClass('active');
$('div').toggleClass('visible');
$('div').hasClass('active'); // true/false
Test your understanding before moving on
1. Which method adds a CSS class?
A. .css()
B. .addClass()
C. .attr()
D. .style()
💡 .addClass() appends one or more classes to matched elements.
2. Which method toggles a class?
A. .switchClass()
B. .toggleClass()
C. .flipClass()
D. .changeClass()
💡 .toggleClass() adds the class if absent, removes it if present.
3. How do you set multiple CSS properties?
A. $.css(a, b, c)
B. $(el).css({a:1, b:2})
C. $(el).styles({})
D. $(el).setCSS()
💡 Pass an object to .css() to set multiple properties at once.
4. Which method checks if an element has a class?
A. .hasClass()
B. .containsClass()
C. .isClass()
D. .checkClass()
💡 .hasClass() returns true if the element has the specified class.
5. Which method removes a CSS class?
A. .deleteClass()
B. .removeClass()
C. .noClass()
D. .clearClass()
💡 .removeClass() removes one or more classes from matched elements.