Common Component Style Attributes
The style attributes listed in this section are common to all components. Style attributes that are unique to a component are listed as part of the component's documentation.
Align
The Align style attribute is available when the layout display selected is Flex. It sets the align-self value on all direct children as a group, and the alignment is along the Cross Axis.
Type: Flex start, Flex end, Center, Stretch and Baseline.
For more detail on the Align style attribute, see the Mozilla developer docs.
Align Content
The Align Content style attribute is available when the layout display selected is Grid. It sets distribution space between and around items along the Block Axis.
Type: Start, Center, End, Stretch, Space between, Space around, and Space evenly.
For more detail on the Align Content style attribute, see the Mozilla developer docs.
Align Items
The Align Items style attribute is available when the layout display selected is Grid. It sets the align-self value on all direct children as a group, and the alignment is along the Block Axis.
Type: Start, Center, End, and Stretch.
For more detail on the Align Items style attribute, see the Mozilla developer docs.
Align Self
The Align Self style attribute overrides the align-items value of a Flex or Grid item. In a Grid, the item is aligned inside the grid area and in Flex, along the cross axis.
Type: Start, Center, End, and Stretch.
For more detail on the Align Self style attribute, see the Mozilla developer docs.
Background Color
The Background Color style attribute sets the background color of a component.
Type: Hex: #FFFFFF or RGB: 104, 37, 37
For more detail on the Background Color style attribute, see the Mozilla developer docs.
Background Source
The Background Source style attribute sets the background image on a component.
For more detail on the Background Source style attribute, see the Mozilla developer docs.
Border Color
The Border Color style attribute sets the border color of a component.
Type: Hex: #FFFFFF or RGB: 104, 37, 37.
For more detail on the Border Color style attribute, see the Mozilla developer docs.
Border Radius
The Border Radius style attribute rounds the corners of a component's outer border edge.
The border radius uses one, two, three or four values; these can be in pixels or percentages.
Example:
- border-radius: 50%;
- border-radius: 40px 10px;
- border-radius: 10px 100px/120px;
- border-radius: 10px 30px 20px 25px;
The border radius also has four constituent properties.
- border-top-left-radius - rounds the top left corner of an element
- border-top-right-radius - rounds the top right corner of an element
- border -bottom-left-radius - rounds the bottom left corner of the element
- border-bottom-right-radius - rounds the bottom right radius of an element
A border radius constituent requires two values, if in pixels or a single percentage value.
Example:
- border-top-left-radius: 80px 80px;
- border-top-left-radius: 50%;
For more detail on the Border Radius style attribute, see the Mozilla developer docs.
Border Width
The Border Width style attribute sets the width, in pixels, of a component's border.
For more detail on the Border Width style attribute, see the Mozilla developer docs.
Breaking
The Breaking style attribute controls the white-space within lines of text in a component.
Type: Normal, No Wrap, Pre, Pre Wrap, and Break Spaces.
- Normal - text will wrap onto a new line when needed. Extra spaces and tabs will collapse.
- No Wrap - text will display on a single line and not wrap to a new line. Extra spaces and tabs will collapse.
- Pre - text will wrap to a new line on line breaks. Extra spaces and tabs will not collapse.
- Pre Wrap - text will wrap to a new line when necessary and on any line breaks. Extra spaces and tabs will not collapse.
- Break Spaces - text will wrap to a new line when necessary and on any line breaks or spaces. Extra spaces and tabs will not collapse.
Capitalize
The Capitalize style attribute controls how text input is automatically capitalized as it is entered by the user.
Type: Uppercase, Capitalize, and Lowercase.
For more detail on the Capitalize style attribute, see the Mozilla developer docs.
Children
The Children style attribute sets whether flex items are forced onto a single line or can wrap across multiple lines. If wrapping is allowed, its sets the direction that lines are stacked.
The Display value must be Flex.
Type: NoWrap, Wrap, and Reverse.
For more detail on the Children style attribute, see the Mozilla developer docs.
Color
The Color style attribute sets the foreground color of a component's text and text decorations.
Type: Hex: #FFFFFF or RGB: 104, 37, 37.
For more detail on the Color style attribute, see the Mozilla developer docs.
Cursor
The Cursor style attribute sets the mouse cursor to show when the mouse pointer is over a component.
For more detail on the Cursor style attribute, see the Mozilla developer docs.
Decoration
The Decoration style attribute sets the appearance of decorative lines on text.
Type: Line through, Underline, and Overline.
For more detail on the Decoration style attribute, see the Mozilla developer docs.
Direction
The Direction style attribute sets the direction of text, table columns, and horizontal overflow.
Type: rtl - right to left, ltr - left to right.
For more detail on the Direction style attribute, see the Mozilla developer docs.
Display
The Display style attribute defines whether a component is considered a block or inline type and the layout of its children.
Type: Block, Flex, Grid, Inline-block, Inline, and Hidden.
For more detail on the Display style attribute, see the Mozilla developer docs.
Flex Basis
The Flex Basis style attribute sets the initial size of a flex item.
For more detail on the Flex Basis style attribute, see the Mozilla developer docs.
Flex Grow
The Flex Grow style attribute sets the grow factor of a flex item's main size.
For more detail on the Flex Grow style attribute, see the Mozilla developer docs.
Flex Shrink
The Flex Shrink style attribute sets the shrink factor of a flex item. If the combined size of all flex items is larger than the container, items will shrink according to their flex shrink value.
For more detail on the Flex Shrink style attribute, see the Mozilla developer docs.
Font
The Font style attribute sets the font family of a component's font.
For more detail on the Font style attribute, see the Mozilla developer docs.
Grid Area
The Grid Area style attribute specifies a grid item's size and location within a grid. Grid lines, spans or the auto setting define an item's grid placement and set the edges of its grid area.
The Grid Area consists of four constituent properties.
- grid-row-start
- grid-column-start
- grid-row-end
- grid-column-end
Example:
.item1 {
background-color: blue;
grid-area = 2 / 1 / auto /span 3
}
The grid area for item1 will start in row 2 column 1 and will end after a span of 3 columns.
For more detail on the Grid Area style attribute, see the Mozilla developer docs.
Grid Auto Columns
The Grid Auto Columns style attribute specifies the size of an implicitly created grid column track.
For more detail on the Grid Auto Columns style attribute, see the Mozilla developer docs.
Grid Auto Flow
The Grid Auto Flow style attribute controls how the auto-placement algorithm works and specifies how auto-placed items get flowed into the grid.
For more detail on the Grid Auto Flow style attribute, see the Mozilla developer docs.
Grid Auto Rows
The Grid Auto Rows style attribute specifies the size of an implicitly created grid row track.
For more detail on the Grid Auto Rows style attribute, see the Mozilla developer docs.
Grid Column
The Grid Column style attribute specifies a grid item's size and location within a grid column. Grid lines, spans or the auto setting define an item's grid placement and set the inline-start and inline-end edge of its grid area.
For more detail on the Grid Column style attribute, see the Mozilla developer docs.
Grid Column Gap
The Grid Column Gap style attribute sets the size of the gap (gutter) between a component's columns.
For more detail on the Grid Column Gap style attribute, see the Mozilla developer docs.
Grid Column End
The Grid Column End style attribute specifies a grid item's end position within a grid column. Grid lines, spans or the auto setting define an item's grid placement and set the block-end edge of its grid area.
For more detail on the Grid Column End style attribute, see the Mozilla developer docs.
Grid Column Start
The Grid Column Start style attribute specifies a grid item's start position within a grid column. Grid lines, spans or the auto setting define an item's grid placement and set the block-start edge of its grid area.
For more detail on the Grid Column Start style attribute, see the Mozilla developer docs.
Grid Gap
The Grid Gap style attribute sets the size of the gaps (gutters) between rows and columns.
For more detail on the Grid Gap style attribute, see the Mozilla developer docs.
Grid Row
The Grid Row style attribute specifies a grid item's size and location within a grid row. Grid lines, spans or the auto setting define an item's grid placement and set the inline-start and inline-end edge of its grid area.
For more detail on the Grid Row style attribute, see the Mozilla developer docs.
Grid Row End
The Grid Row End style attribute specifies a grid item's end position within a grid row. Grid lines, spans or the auto setting define an item's grid placement and set the inline-end edge of its grid area.
For more detail on the Grid Row End style attribute, see the Mozilla developer docs.
Grid Row Gap
The Grid Row Gap style attribute sets the size of the gap (gutter) between a component's rows.
For more detail on the Grid Row Gap style attribute, see the Mozilla developer docs.
Grid Row Start
The Grid Row Start style attribute specifies a grid item's start position within a grid row. Grid lines, spans or the auto setting define an item's grid placement and set the inline-start edge of its grid area.
For more detail on the Grid Row Start style attribute, see the Mozilla developer docs.
Grid Template
The Grid Template style attribute is a shorthand attribute to define the grid template columns, grid template rows, and grid template areas.
For more detail on the Grid Template style attribute, see the Mozilla developer docs.
Grid Template Areas
The Grid Template Areas style attribute specifies named grid areas, establishing the grid cells and assigning them names.
For more detail on the Grid Template Areas style attribute, see the Mozilla developer docs.
Grid Template Columns
The Grid Template Columns style attribute defines the line names and track sizing functions of the grid columns.
For more detail on the Grid Template Columns style attribute, see the Mozilla developer docs.
Grid Template Rows
The Grid Template Rows style attribute defines the line names and track sizing functions of the grid rows.
For more detail on the Grid Template Rows style attribute, see the Mozilla developer docs.
Height
The Height style attribute sets the height of a component. By default, it defines the height of the content area unless box-sizing is border box, then it determines the height of the border area.
For more detail on the Height style attribute, see the Mozilla developer docs.
Italicize
The Italicize style attribute sets the font style of the font.
Type: Normal and Italic.
For more detail on the Italicize style attribute, see the Mozilla developer docs.
Justify
The Justify style attribute is available when the layout display selected is Flex. It defines the justify-self value on all items within a container and justifies all items as a group.
Type: Flex start, Flex end, Center, Space between and Space around.
For more detail on the Justify style attribute, see the Mozilla developer docs.
Justify Content
The Justify Content style attribute is available when the layout display selected is Grid. It defines the spatial distribution between and around items along the inline axis of a grid container.
Type: Start, Center, End, Stretch, Space between, Space around, and Space evenly.
For more detail on the Justify Content style attribute, see the Mozilla developer docs.
Justify Items
The Justify Items style attribute is available when the layout display selected is Grid. It defines the justify-self value on all items within a container and justifies each item along the appropriate axis.
Type: Start, Center, End, and Stretch.
For more detail on the Justify Items style attribute, see the Mozilla developer docs.
Justify Self
The Justify Self style attribute is available when the layout display selected is Flex or Grid. It defines the justification of an item inside its container along the appropriate axis.
Type: Start, Center, End, Space between, Space around, and Space evenly.
For more detail on the Justify Self style attribute, see the Mozilla developer docs.
Line Height
The Line Height style attribute sets the height of a line box, which defines the distance between lines of text in a paragraph.
For more detail on the Line Height style attribute, see the Mozilla developer docs.
Max Height
The Max-Height style attribute sets the maximum height of a component. It prevents the height value from becoming larger than the max-height value.
For more detail on the Max-Height style attribute, see the Mozilla developer docs.
Max Width
The Max-Width style attribute sets the maximum width of a component. It prevents the width value from becoming larger than the max-width value.
For more detail on the Max-Width style attribute, see the Mozilla developer docs.
Min Height
The Min-Height style attribute sets the minimum height of a component. It prevents the height value from becoming smaller than the min-height value.
For more detail on the Min-Height style attribute, see the Mozilla developer docs.
Min Width
The Min-Width style attribute sets the minimum width of a component. It prevents the width value from becoming smaller than the min-width value.
For more detail on the Min-Width style attribute, see the Mozilla developer docs.
Overflow
The Overflow style attribute sets the desired behavior of a component's overflow when the content is too big to fit its formatting context.
Type: Visible, Hidden, Scroll, and Auto.
For more detail on the Overflow style attribute, see the Mozilla developer docs.
Place Content
The Place Content style attribute allows you to align content along the block and inline directions simultaneously when the Display value is Grid.
For more detail on the Place Content style attribute, see the Mozilla developer docs.
Place Items
The Place Items style attribute allows you to align items along the block and inline directions simultaneously when the Display value is Grid.
For more detail on the Place Items style attribute, see the Mozilla developer docs.
Place Self
The Place Self style attribute allows you to align an individual item along the block and inline directions simultaneously.
For more detail on the Place Self style attribute, see the Mozilla developer docs.
Size
The Size style attribute sets the size (font size) of the font. The value is one of absolute size, relative size, or length.
Example
- Absolute - small, medium, large
- Relative - smaller, larger
- Length - 20em
For more detail on the Size style attribute, see the Mozilla developer docs.
Spacing-Margin
The Spacing-Margin style attribute sets the margin on all four sides of a component. All four values can be set at once or constituent values can be set individually.
Example:
- margin: 10px 50px 30px 5px;
- margin-top: 10px;
- margin-bottom: 30px;
- margin-left: 5px;
- margin-right: 50px;
For more detail on the Spacing-Margin style attribute, see the Mozilla developer docs.
Spacing-Padding
The Spacing-Padding style attribute sets the padding on all four sides of an component. All four values can be set at once or constituent values can be set individually.
Example:
- padding: 10px 50px 30px 5px;
- padding-top: 10px;
- padding-bottom: 30px;
- padding-left: 5px;
- padding-right: 50px;
For more detail on the Spacing-Padding style attribute, see the Mozilla developer docs.
Text Align
The Text Align style attribute sets the horizontal alignment of the inline-level content of a block or table-box component.
Type: Left, Center, Right, and Justify.
For more detail on the Text Align style attribute, see the Mozilla developer docs.
Weight
The Weight style attribute sets the weight or boldness of a text component. The values available will depend on the current font (font family) setting.
For more detail on the Weight style attribute, see the Mozilla developer docs.
Width
The Width style attribute sets the width of a component. By default, it defines the width of the content area unless box-sizing is border box, then it determines the width of the border area.
For more detail on the Width style attribute, see the Mozilla developer docs.