Page 28 - CSS

Modifying CSS properties with jQuery is even simpler.

$('#element').css('margin', '5px');

If you need to change more than one style rule:

$('#element').css({
margin: "5px",
padding: "10px",
color: "black"
});

jQuery includes two ways to change css rules that have hyphens in them (i.e. font-size). You can
put them in quotes or camel-case the style rule name.

$('.example-class').css({
"background-color": "blue",
fontSize: "10px"
});

See also

• JavaScript documentation – Reading and Changing CSS Style.
• jQuery documentation – CSS Manipulation

Styling Lists with CSS

There are three different properties for styling list-items: list-style-type, list-style-image, and
list-style-position, which should be declared in that order. The default values are disc, outside,
and none, respectively. Each property can be declared separately, or using the list-style
shorthand property.

list-style-type defines the shape or type of bullet point used for each list-item.

Some of the acceptable values for list-style-type:

• disc
• circle
• square
• decimal
• lower-roman
• upper-roman
• none

(For an exhaustive list, see the W3C specification wiki)

To use square bullet points for each list-item, for example, you would use the following property-
value pair:

https://riptutorial.com/ 6