css#

Various abstractions over the CSS object model.

class GlobalImportedStyleSheet(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

An imported stylesheet that’s appended to the <head> element.

Note

A stylesheet will be appended only once, regardless of how many times it’s being used in other models.

class GlobalInlineStyleSheet(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

An inline stylesheet that’s appended to the <head> element.

Note

A stylesheet will be appended only once, regardless of how many times it’s being used in other models.

class ImportedStyleSheet(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

Imported stylesheet equivalent to <link rel="stylesheet" href="${url}">.

Note

Depending on the context, this stylesheet will be appended either to the parent shadow root, if used in a component, or otherwise to the <head> element. If you want to append globally regardless of the context, use GlobalImportedStyleSheet instead.

url#

The location of an external stylesheet.

class InlineStyleSheet(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

Inline stylesheet equivalent to <style type="text/css">${css}</style>.

Note

Depending on the context, this stylesheet will be appended either to the parent shadow root, if used in a component, or otherwise to the <head> element. If you want to append globally regardless of the context, use GlobalInlineStyleSheet instead.

css#

The contents of this stylesheet.

class Styles(*args: Any, id: ID | None = None, **kwargs: Any)[source]#

Allows to configure style attribute of DOM elements.

align_content#
align_items#
align_self#
alignment_baseline#
all#
animation#
animation_delay#
animation_direction#
animation_duration#
animation_fill_mode#
animation_iteration_count#
animation_name#
animation_play_state#
animation_timing_function#
aspect_ratio#
backface_visibility#
background#
background_attachment#
background_clip#
background_color#
background_image#
background_origin#
background_position#
background_position_x#
background_position_y#
background_repeat#
background_size#
baseline_shift#
block_size#
border#
border_block_end#
border_block_end_color#
border_block_end_style#
border_block_end_width#
border_block_start#
border_block_start_color#
border_block_start_style#
border_block_start_width#
border_bottom#
border_bottom_color#
border_bottom_left_radius#
border_bottom_right_radius#
border_bottom_style#
border_bottom_width#
border_collapse#
border_color#
border_image#
border_image_outset#
border_image_repeat#
border_image_slice#
border_image_source#
border_image_width#
border_inline_end#
border_inline_end_color#
border_inline_end_style#
border_inline_end_width#
border_inline_start#
border_inline_start_color#
border_inline_start_style#
border_inline_start_width#
border_left#
border_left_color#
border_left_style#
border_left_width#
border_radius#
border_right#
border_right_color#
border_right_style#
border_right_width#
border_spacing#
border_style#
border_top#
border_top_color#
border_top_left_radius#
border_top_right_radius#
border_top_style#
border_top_width#
border_width#
bottom#
box_shadow#
box_sizing#
break_after#
break_before#
break_inside#
caption_side#
caret_color#
clear#
clip#
clip_path#
clip_rule#
color#
color_interpolation#
color_interpolation_filters#
column_count#
column_fill#
column_gap#
column_rule#
column_rule_color#
column_rule_style#
column_rule_width#
column_span#
column_width#
columns#
content#
counter_increment#
counter_reset#
cursor#
direction#
display#
dominant_baseline#
empty_cells#
fill#
fill_opacity#
fill_rule#
filter#
flex#
flex_basis#
flex_direction#
flex_flow#
flex_grow#
flex_shrink#
flex_wrap#
float#
flood_color#
flood_opacity#
font#
font_family#
font_feature_settings#
font_kerning#
font_size#
font_size_adjust#
font_stretch#
font_style#
font_synthesis#
font_variant#
font_variant_caps#
font_variant_east_asian#
font_variant_ligatures#
font_variant_numeric#
font_variant_position#
font_weight#
gap#
glyph_orientation_vertical#
grid#
grid_area#
grid_auto_columns#
grid_auto_flow#
grid_auto_rows#
grid_column#
grid_column_end#
grid_column_gap#
grid_column_start#
grid_gap#
grid_row#
grid_row_end#
grid_row_gap#
grid_row_start#
grid_template#
grid_template_areas#
grid_template_columns#
grid_template_rows#
height#
hyphens#
image_orientation#
image_rendering#
inline_size#
justify_content#
justify_items#
justify_self#
left#
letter_spacing#
lighting_color#
line_break#
line_height#
list_style#
list_style_image#
list_style_position#
list_style_type#
margin#
margin_block_end#
margin_block_start#
margin_bottom#
margin_inline_end#
margin_inline_start#
margin_left#
margin_right#
margin_top#
marker#
marker_end#
marker_mid#
marker_start#
mask#
mask_composite#
mask_image#
mask_position#
mask_repeat#
mask_size#
mask_type#
max_block_size#
max_height#
max_inline_size#
max_width#
min_block_size#
min_height#
min_inline_size#

The min-inline-size CSS property defines the horizontal or vertical minimal size of an element’s block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of writing-mode.

min_width#
object_fit#
object_position#
opacity#
order#
orphans#
outline#
outline_color#
outline_offset#
outline_style#
outline_width#
overflow#
overflow_anchor#
overflow_wrap#
overflow_x#
overflow_y#
overscroll_behavior#
overscroll_behavior_block#
overscroll_behavior_inline#
overscroll_behavior_x#
overscroll_behavior_y#
padding#
padding_block_end#
padding_block_start#
padding_bottom#
padding_inline_end#
padding_inline_start#
padding_left#
padding_right#
padding_top#
page_break_after#
page_break_before#
page_break_inside#
paint_order#
perspective#
perspective_origin#
place_content#
place_items#
place_self#
pointer_events#
position#
quotes#
resize#
right#
rotate#
row_gap#
ruby_align#
ruby_position#
scale#
scroll_behavior#
shape_rendering#
stop_color#
stop_opacity#
stroke#
stroke_dasharray#
stroke_dashoffset#
stroke_linecap#
stroke_linejoin#
stroke_miterlimit#
stroke_opacity#
stroke_width#
tab_size#
table_layout#
text_align#
text_align_last#
text_anchor#
text_combine_upright#
text_decoration#
text_decoration_color#
text_decoration_line#
text_decoration_style#
text_emphasis#
text_emphasis_color#
text_emphasis_position#
text_emphasis_style#
text_indent#
text_justify#
text_orientation#
text_overflow#
text_rendering#
text_shadow#
text_transform#
text_underline_position#
top#
touch_action#
transform#
transform_box#
transform_origin#
transform_style#
transition#
transition_delay#
transition_duration#
transition_property#
transition_timing_function#
translate#
unicode_bidi#
user_select#
vertical_align#
visibility#
white_space#
widows#
width#
will_change#
word_break#
word_spacing#
word_wrap#
writing_mode#
z_index#
On this page