CSS Properties

The CSS properties you will use most, with syntax and a live example.

77 of 77

Property	Group	Description
color	Text	Sets the text colour.
background-color	Background	Sets the background colour.
background-image	Background	Sets a background image or gradient.
background-size	Background	Sizes the background image.
background-repeat	Background	Controls repeating of the background image.
opacity	Colour	Sets how transparent an element is (0 to 1).
font-family	Text	Sets the typeface.
font-size	Text	Sets the text size.
font-weight	Text	Sets how bold text is.
font-style	Text	Makes text italic or normal.
line-height	Text	Sets the space between lines.
letter-spacing	Text	Sets the space between letters.
word-spacing	Text	Sets the space between words.
text-align	Text	Aligns text horizontally.
text-decoration	Text	Adds underline, overline or line-through.
text-transform	Text	Changes letter case.
text-indent	Text	Indents the first line.
text-shadow	Text	Adds a shadow to text.
white-space	Text	Controls how white space is handled.
overflow-wrap	Text	Lets long words break.
width	Box	Sets the width of an element.
height	Box	Sets the height of an element.
min-width	Box	Sets the minimum width.
max-width	Box	Sets the maximum width.
padding	Box	Space inside the border.
margin	Box	Space outside the border.
border	Box	Sets width, style and colour of the border.
border-radius	Box	Rounds the corners.
box-shadow	Box	Adds a shadow around an element.
box-sizing	Box	Chooses what width and height include.
outline	Box	A line drawn outside the border.
display	Layout	Sets how an element is laid out.
visibility	Layout	Hides an element but keeps its space.
position	Layout	Sets the positioning method.
top	Layout	Offsets a positioned element from the top.
left	Layout	Offsets a positioned element from the left.
z-index	Layout	Sets the stacking order.
float	Layout	Floats an element left or right.
clear	Layout	Stops wrapping around floats.
overflow	Layout	Controls content that does not fit.
cursor	Interaction	Sets the mouse pointer shape.
pointer-events	Interaction	Lets an element ignore the mouse.
user-select	Interaction	Controls text selection.
flex	Flexbox	Shorthand for how a flex item grows and shrinks.
flex-direction	Flexbox	Sets the main axis of a flex container.
flex-wrap	Flexbox	Lets flex items wrap onto new lines.
justify-content	Flexbox	Aligns items along the main axis.
align-items	Flexbox	Aligns items along the cross axis.
align-self	Flexbox	Overrides align-items for one item.
gap	Flexbox	Sets the space between flex or grid items.
order	Flexbox	Changes the visual order of a flex or grid item.
grid-template-columns	Grid	Defines the columns of a grid.
grid-template-rows	Grid	Defines the rows of a grid.
grid-column	Grid	Places an item across grid columns.
grid-area	Grid	Names or places a grid area.
place-items	Grid	Aligns grid items on both axes.
transition	Animation	Animates changes between states.
transform	Animation	Moves, rotates, scales or skews.
animation	Animation	Runs a keyframe animation.
filter	Effects	Applies effects like blur or grayscale.
list-style	Lists	Sets the bullet or number style of lists.
border-collapse	Tables	Merges table borders.
object-fit	Images	How an image fills its box.
aspect-ratio	Layout	Keeps a box at a ratio of width to height.
content	Pseudo	Generated content for ::before and ::after.
var()	Variables	Reads a CSS custom property.
calc()	Functions	Calculates a value.
clamp()	Functions	A value that stays between a minimum and maximum.
@media	At-rules	Applies styles only when conditions match.
@keyframes	At-rules	Defines the steps of an animation.
@font-face	At-rules	Loads a custom font.
scroll-behavior	Interaction	Smooth scrolling for anchor links.
resize	Interaction	Lets the user resize an element.
column-count	Layout	Splits text into columns.
vertical-align	Text	Aligns inline content vertically.
accent-color	Colour	Colours form controls.
mix-blend-mode	Effects	Blends an element with what is behind it.