← Back to Chapters

jQuery css() Method

? jQuery css() Method

? Quick Overview

The css() method in jQuery allows you to dynamically get or set CSS style properties of selected elements.

? Key Concepts

  • Modify styles dynamically using JavaScript
  • Apply single or multiple CSS properties
  • Read computed CSS values from elements

? Syntax & Theory

? View Code Example 
// Set a single CSS property
$(selector).css("property","value");
// Set multiple CSS properties
$(selector).css({"property1":"value1","property2":"value2"});
// Get a CSS property value
$(selector).css("property");

? Live Example

This is a demo box.

➕ Another Example

This is another box.
? View Code Example 
// Increase font size dynamically
$('#secondBox').css('font-size','24px');
// Apply dashed green border
$('#secondBox').css('border','3px dashed green');

? Interactive Playground

Adjust the controls below to see css() applied instantly to the box.

I change in real-time!

? Explanation

  • Set single style: Pass property name and value
  • Set multiple styles: Pass an object of properties
  • Get value: Provide only the property name

? Live Output

Buttons above dynamically change text color, background, font size, and borders using the css() method.

✅ Tips & Best Practices

  • Use css() for dynamic styling based on user interaction
  • Prefer CSS classes for large or reusable style changes
  • Read values using css() for responsive logic

? Try It Yourself

  • Create a hover effect using css()
  • Build a light/dark theme toggle
  • Style even and odd list items dynamically