⚓ css(property)

Returns the value of the named CSS property from the first element in the collection.

var rect = Pablo.rect({
    style: 'fill:orange; cursor:pointer'
});

alert(rect.css('cursor')); // 'pointer'

Note, this is not the computed style. This method only returns the value of CSS properties that have been set directly on the element, not those set in any stylesheet.

⚓ css(property, value)

Sets the named property to the specified value, for all elements in the collection and returns the collection.

var svg = Pablo(demoElement).svg({height:100}),
    rect  = svg.rect({
        width: 200,
        height: 100
    });

rect.css('fill', 'green');

Styles set on elements with .css() will override CSS rules set in stylesheets - unlike style properties set with the .attr() method.

⚓ css(styles)

Sets multiple styles (specified as an object), for all elements in the collection and returns the collection.

var svg = Pablo(demoElement).svg({height:100}),
    rect  = svg.rect({
        width: 200,
        height: 100
    });

rect.css({fill:'black', opacity:0.4});

⚓ Autodetection of browser vendor-prefixes

The css() method will automatically convert CSS properties into their browser vendor-prefixed version - e.g. from transition to -webkit-transition.

var svg = Pablo(demoElement).svg({height:100}),
    square = svg.rect({
        width: 100,
        height: 100,
        fill: 'purple'
    }),
    opacity = 1;

// Automatically apply vendor-prefixes to `transition`
square.css('transition', 'opacity 0.5s');

// Toggle opacity, set attribute & repeat
function changeOpacity(){
    opacity = opacity ? 0 : 1;
    square.attr('opacity', opacity);
    window.setTimeout(changeOpacity, 500);
}
changeOpacity();

⚓ Vendor prefixes

CSS properties are automatically converted into their browser vendor-prefixed version - e.g. from transition to -webkit-transition.

var svg = Pablo(demoElement).svg({height:100}),
    square = svg.rect({
        width: 100,
        height: 100,
        fill: 'purple'
    }),
    opacity = 1;

// Automatically apply vendor-prefixes to `transition`
square.css('transition', 'opacity 0.5s');

// Toggle opacity, set attribute & repeat
function changeOpacity(){
    opacity = opacity ? 0 : 1;
    square.attr('opacity', opacity);
    window.setTimeout(changeOpacity, 500);
}
changeOpacity();

Painting is just another way of keeping a diary.

Pablo Picasso