# Local Styles (/common-widget-features/styles/local_styles)



Overview [#overview]

In addition to "normal" styles, Widgets can also store local styles.
This concept is similar to inline styles in CSS
(e.g. `<div style="color:red">`) with some modification.

Local styles are like normal styles, but they can't be shared among
other Widgets. If used, local styles are allocated automatically, and
freed when the Widget is deleted. They are useful to add local
customization to a Widget.

Unlike in CSS, LVGL local styles can be assigned to states
(pseudo-classes\_) and parts (pseudo-elements\_).

Usage [#usage]

To set a local property use functions like
`lv_obj_set_style_<property_name>(widget, <value>, <selector>);`   For example:

```c title=" " lineNumbers=1
lv_obj_set_style_bg_color(slider, lv_color_red(), LV_PART_INDICATOR | LV_STATE_FOCUSED);
```

Binding Local Styles [#binding-local-styles]

By using <ApiLink name="lv_obj_bind_style_prop" />, it's possible to bind a style property
to a [Subject](/main-modules/observer/observer)'s value.

It's a great way to map every slider's color or opacity to a subject and control it
externally.

For example:

```c title=" " lineNumbers=1
lv_obj_bind_style_prop(slider1, LV_STYLE_BG_OPA, LV_PART_MAIN, &subject_bg_opa);
lv_obj_bind_style_prop(slider1, LV_STYLE_BG_COLOR, LV_PART_INDICATOR, &subject_bg_color);
```