CSS & Styling
jQuery gives you two different ways to change how an element looks: .css() for reading or setting individual style properties directly, and a set of class-based methods for toggling styles that already live in a stylesheet.
Reading and setting with .css()
JS app.js
console.log($("#box").css("background-color"));
$("#box").css("background-color", "tomato");
$("#box").css({ color: "white", padding: "12px" });
Console output + result
First line logs the box's current computed background color, e.g.
rgb(255, 255, 255). After the next two calls, #box has a tomato-red background, white text, and 12px of padding on every side — .css() accepts either a single property/value pair, or an object setting several at once.Class-based styling
For anything beyond a one-off tweak, toggling a CSS class is usually the better fit — the styling itself stays in your stylesheet, and jQuery just flips a class name on and off:
JS app.js
$("#box").addClass("highlight");
$("#box").toggleClass("highlight");
Result
After
addClass, #box has the highlight class (and whatever styling that rule defines in the stylesheet). toggleClass then removes it again, since it was already present — call it a second time and it would add it back.Note:
.css() writes an inline style attribute, which beats any class-based CSS rule on specificity almost no matter what. Mixing heavy use of .css() with a stylesheet that tries to override those same properties via a class is a common source of "my CSS class isn't doing anything" confusion — prefer addClass/removeClass/toggleClass whenever the styling is more than a single quick, temporary change.