> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/css-classes/.css.md).

# .css()

### Jscula css() Method

The `css()` method sets or returns one or more style properties for the selected elements.

### Return a CSS Property

To return the value of a specified CSS property, use the following syntax:

*`css("valid-css-property-name");`*

The following example will return the background-color value of the FIRST matched element:

#### Example

{% code title="sniper.js" %}

```javascript
$("h1").css("background-color");
```

{% endcode %}

***

### Set a CSS Property

To set a specified CSS property, use the following syntax:

*`css("valid-css-property-name","value");`*

The following example will set the background-color value for ALL matched elements:

#### Example

{% code title="sniper.js" %}

```javascript
$("h1").css("background-color", "yellow");
```

{% endcode %}

***

### Set Multiple CSS Properties

To set multiple CSS properties, use the following syntax:

*`css({"propertyname":"value", "propertyname":"value", ...});`*

The following example will set a background-color and a font-size for ALL matched elements:

#### Example

{% code title="sniper.js" overflow="wrap" %}

```javascript
$("p").css({"background-color": "green", "font-size": "3rem"});
```

{% endcode %}

***

### CSS-IN-JS

css-in-js just got better with Jscula.

```javascript
$('.toast-container > div').css({
    width: '200px', 
    borderRadius: '5px', 
    boxShadow: '3px 10px 20px rgba(112, 188, 255, 0.35)', 
    border: '2px solid', 
    padding: 5, //5px
    transition: 'width 0.5s linear'
}).parentElement.css({
    position: 'absolute',
    bottom: '5%',
    left: 20,
    display: 'none',
    flexDirection: 'column !important',
    gap: '15px',
    alignItems: 'flex-end',
    transition: 'all ease 0.5s'

});
```

### Dynamic calculations / Values

```javascript
$('.toast-container > div').css({
    width: 30*4, //120px
     boxShadow: `3px 10px 20px ${themeColor}`,
});
```