Applying CSS to Elements

If you need help with jQuery Selectors, please click on the previous link.

Using jQuery, you can apply CSS directly to one or more elements you have selected with the jQuery selector. This is done using the css function. It is called by placing a jQuery selector, dot and then the css command.

This actually works in the way of editing the style attribute of a tag. Note: this change is only relevant to the that loaded instance of the page. It does not get saved on the server, nor will is slow down the download of a site.

Changing a Single Property

A simple example passes two parameters to the css function. The first is the property that will be changed, the second is the value. Note: If the value has a unit measurement, it will need to be applied as well. Consider the following example:

$('p').css('font-size', '22px');

In this example you are changing the font size for every paragraph element on the web page.

Changing Multiple Properties

If you want to change multiple properties, you will need to pass in a JavaScript Object. A JavaScript Object is inclosed within braces. Values are separated by a colon, like they are in CSS. The property and value will often need to be treated as a string, so unless you are using a number, or a variable, put quotes around the item.

For example:

$('ul:first').css({
 'font-size': '14px',
 'color': 'red',
 'background-color': '#BBB'
 });

Notice that your values can be of any valid CSS value.

Watch on YouTube

Applying CSS to Elements was originally found on Access 2 Learn