Grouping CSS formatting

CSS attributes can be divided into 7 basic formatting groups.

1. Type Group

Type group: formatting for text.

The basic attributes of the Type group:

• font-family: The font set used for an HTML object.
• font-style: Formatting for italic or regular fonts etc.
• font-size: Size formatting for the font.
• font-variant: Format style for regular or uppercase fonts.
• font-weight: The style of the text.
• line-height: The height between lines.
• text-transform: The display format of the font in the text, such as uppercase, lowercase, capitalize ...
• text-decoration: Formatting additional decorations for the text.
• color: The color of the font.

2. Background Group

Background group: formatting a background image for a certain object.

The basic attributes of the Background group:

• background-color: The background color of the HTML object.
• background-image: Use an image as the background.
• background-repeat: The manner of using the background image, if an image is used as the object's background.
• background-position: The starting display position of the background.
• background-attachment: The mode to fix the background.

3. Block Group

Block group: formatting for text.

The basic properties of the Block Group:

• letter-spacing: The distance between characters.
• word-spacing: Increase or decrease the distance between words in a text passage.
• text-align: Align the contents horizontally.
• text-indent: The distance from the beginning of the line for a text passage.
• white-space: Formatting for the white space in a text passage.
• display: The display types of an HTML element.
• vertical-align: The position of an element.

4. Border Group

Border group: formats the border for a specific object.

The basic attributes of the Border group:

• border-width, border-top-width, border-right-width, border-bottom-width, border-left-width: The width of the border.
• border-style, border-top-style, border-right-style, border-bottom-style, border-left-style: The display style of the border.
• border-color, border-top-color, border-right-color, border-bottom-color, border-left-color: The color of the border

5. Box Group

Box group: formatting the size and position of a block.

The basic properties of the Box Group:

• width, min-width, max-width: The width of the object.
• height, min-height, max-height: The length of the object.
• margin, margin-top, margin-right, margin-bottom, margin-left: The distance to the outside element.
• padding, padding-top, padding-right, padding-bottom, padding-left: The distance to the inside elements.
• float: Shift the block to the left or right.
• clear: Clear the float attributes of elements above.

6. List Group

List group: Formatting for lists.

The basic properties of the List Group:

• list-style-position: The position of the icon, the default is outside.
• list-style-type: The type of icon.
• list-style-image: The image icon.

7. Position Group

Position group: Determine the coordinates of a certain HTML element.

The basic properties of the Position Group:

• position: The display type of an object.
• top: The distance from the object to the top position.
• right: The distance from the object to the right position.
• left: The distance from the object to the left position.
• bottom: The distance from the object to the bottom position.
• z-index: The position of the object.
• overflow, overflow-x, overflow-y: The display mode of the scroll bar.