Text and Font Properties
color
Sets the color of text.
font-size
Controls the size of text.
font-family
Specifies the font family for text.
font-weight
Sets the thickness of text (e.g., bold, normal, 400).
font-style
Sets the font style (italic, normal).
text-align
Aligns text horizontally (left, center, right, justify).
text-decoration
Adds decorations like underline, overline, or line-through.
line-height
Controls space between lines.
letter-spacing
Adjusts space between characters.
font-family
Specifies the font family for text.
text-transform
Changes text case (uppercase, lowercase, capitalize).
Layout Properties
display
Specifies the display behavior of an element (block, inline, flex, grid).
position
Defines the position of an element (static, relative, absolute, fixed).
top
Sets the top position of an element.
left
Sets the left position of an element.
right
Sets the right position of an element.
bottom
Sets the bottom position of an element.
float
Specifies whether an element should float (left, right, none).
clear
Specifies whether an element should clear floating elements.
z-index
Sets the stack order of an element.
max-width
Sets the maximum width of an element.
min-width
Sets the minimum width of an element.
max-height
Sets the maximum height of an element.
min-height
Sets the minimum height of an element.
margin-top
Sets the top margin of an element.
margin-right
Sets the right margin of an element.
margin-bottom
Sets the bottom margin of an element.
margin-left
Sets the left margin of an element.
padding-top
Sets the top padding of an element.
padding-right
Sets the right padding of an element.
padding-bottom
Sets the bottom padding of an element.
border-style
Sets the style of the border (solid, dashed, dotted, double).
border-width
Sets the width of the border.
border-color
Sets the color of the border.
border-radius
Rounds the corners of an element.
box-shadow
Adds a shadow to an element.
transform
Applies transformations (rotate, scale, translate).
background-color
Sets the background color of an element.
text-align
Sets the horizontal alignment of text within an element.
text-decoration
Adds underline, overline, or line-through to text.
color
Sets the text color of an element.
font-family
Sets the font family of an element.
font-size
Sets the font size of an element.
font-weight
Sets the font weight of an element.
line-height
Sets the line height of an element.
text-transform
Transforms text (uppercase, lowercase, capitalize).
text-indent
Sets the indentation of the first line of text within an element.
text-shadow
Adds shadow to text.
text-decoration-line
Sets the line decoration (underline, overline, line-through).
text-decoration-style
Sets the line decoration style (solid, dotted, dashed).
text-decoration-color
Sets the color of the line decoration.
white-space
Specifies how white-space is handled within an element (normal, pre, nowrap,
pre-wrap).
width
Sets the width of an element.
height
Sets the height of an element.
margin
Sets the outer space around an element.
padding
Sets the inner space within an element.
overflow
Specifies handling of overflow content (visible, hidden, scroll, auto).
Background Properties
background-color
Sets the background color of an element.
background-image
Sets a background image for an element.
background-size
Controls the size of the background image (cover, contain).
background-repeat
Specifies if/how the background image repeats (repeat, no-repeat).
background-attachment
Specifies if the background image scrolls with the page (fixed,
local).
background-position
Positions the background image.
Border and Outline Properties
border
Sets the border around an element (width, style, color).
border-style
Sets the style of the border (solid, dashed, dotted, double).
border-color
Sets the color of the border.
border-width
Sets the width of the border.
border-top
Sets the border for the top side.
border-right
Sets the border for the right side.
border-bottom
Sets the border for the bottom side.
border-left
Sets the border for the left side.
border-collapse
Specifies whether the borders of adjacent cells should be collapsed
(collapse).
border-spacing
Sets the spacing between border-collapsing cells.
border-image
Sets the border image source and properties.
border-top-left-radius
Rounds the top-left corner of the top border.
border-top-right-radius
Rounds the top-right corner of the top border.
border-bottom-left-radius
Rounds the bottom-left corner of the bottom border.
border-bottom-right-radius
Rounds the bottom-right corner of the bottom border.
border-top-color
Sets the color of the top border.
border-right-color
Sets the color of the right border.
border-bottom-color
Sets the color of the bottom border.
border-left-color
Sets the color of the left border.
border-top-style
Sets the style of the top border.
border-right-style
Sets the style of the right border.
border-bottom-style
Sets the style of the bottom border.
border-top-width
Sets the width of the top border.
border-right-width
Sets the width of the right border.
border-bottom-width
Sets the width of the bottom border.
border-collapse
Specifies whether the borders of adjacent cells should be collapsed
(collapse).
border-radius
Rounds the corners of an element.
outline
Sets the outline around an element (like border but does not affect layout).
box-shadow
Adds shadow around an element.
Positioning Properties
position
Specifies the positioning method (static, relative, absolute, fixed, sticky).
top
Positions an element from the top.
left
Positions an element from the left.
right
Positions an element from the right.
bottom
Positions an element from the bottom.
z-index
Controls stacking order of elements (higher numbers are in front).
Flexbox Properties
display: flex
Sets an element as a flex container.
justify-content
Aligns flex items horizontally (start, end, center, space-between).
align-items
Aligns flex items vertically (start, end, center, stretch).
flex-direction
Sets the direction of flex items (row, column).
flex-wrap
Specifies if flex items wrap onto multiple lines.
Grid Properties
display: grid
Sets an element as a grid container.
grid-template-columns
Defines the columns in a grid.
grid-template-rows
Defines the rows in a grid.
gap
Sets the gap between rows and columns in grid or flex layout.
Animation and Transition Properties
transition
Specifies transitions between states (duration, timing).
animation
Specifies animation properties (name, duration, timing function).
animation-name
Defines the name of the animation.
animation-duration
Defines the duration of the animation.
animation-timing-function
Defines the timing function of the animation.
animation-iteration-count
Defines the number of times the animation should run.
animation-delay
Defines the delay before starting the animation.
animation-fill-mode
Specifies the state of the animation after it is finished (forwards,
backwards, both).
animation-play-state
Specifies whether the animation should run or pause.
transform
Applies transformations like scale, rotate, translate, or skew.
Other Properties
opacity
Sets the transparency of an element (0 to 1).
visibility
Controls visibility of an element (visible, hidden).
cursor
Sets the type of cursor displayed when hovering over an element.
filter
Applies visual effects like blur, brightness, contrast to an element.