Typography Properties
Typography
font-size | font-size: 24px; | Text size |
font-weight | font-weight: 700; | Text weight |
line-height | line-height: 1.5; | Line spacing |
text-align | text-align: center; | Text alignment |
text-transform | text-transform: uppercase; | Text case |
text-decoration | text-decoration: underline; | Text decoration |
font-style | font-style: italic; | Font style |
letter-spacing | letter-spacing: 2px; | Character spacing |
Layout Properties
Layout
display | display: flex; | Display type |
position | position: relative; | Positioning |
z-index | z-index: 10; | Stacking order |
overflow | overflow: hidden; | Overflow behavior |
object-fit | object-fit: cover; | Object fitting |
aspect-ratio | aspect-ratio: 16/9; | Aspect ratio |
Flexbox Properties
Flexbox
flex-direction | flex-direction: row; | Flex direction |
flex-wrap | flex-wrap: wrap; | Flex wrapping |
justify-content | justify-content: center; | Horizontal alignment |
align-items | align-items: center; | Vertical alignment |
align-self | align-self: center; | Self alignment |
gap | gap: 16px; | Gap between items |
Spacing Properties
Spacing
margin | margin: 16px; | External spacing |
padding | padding: 16px; | Internal spacing |
margin-top | margin-top: 16px; | Top margin |
margin-bottom | margin-bottom: 16px; | Bottom margin |
margin-left | margin-left: auto; | Left margin |
margin-right | margin-right: auto; | Right margin |
padding-top | padding-top: 16px; | Top padding |
padding-bottom | padding-bottom: 16px; | Bottom padding |
padding-left | padding-left: 16px; | Left padding |
padding-right | padding-right: 16px; | Right padding |
Sizing Properties
Sizing
width | width: 100%; | Element width |
height | height: 100vh; | Element height |
max-width | max-width: 1200px; | Maximum width |
min-height | min-height: 100vh; | Minimum height |
Color Properties
Colors
color | color: #3b82f6; | Text color |
background-color | background-color: #ffffff; | Background color |
border-color | border-color: #e5e7eb; | Border color |
Border Properties
Borders
border-width | border-width: 2px; | Border thickness |
border-style | border-style: solid; | Border style |
border-radius | border-radius: 8px; | Corner rounding |
Effect Properties
Effects
opacity | opacity: 0.5; | Transparency |
Supported Values
Units
- Pixels:
16px,1px,100px - Percentages:
50%,100%,33.333% - Viewport units:
100vh,100vw - Relative units:
1rem,2em - Auto:
auto - Numbers:
0,10,1,0.5
Keywords
- Display:
block,flex,inline-block,none - Position:
static,relative,absolute,fixed - Alignment:
center,start,end,stretch - Colors:
transparent,inherit