CSS Properties: A Reference Guide

A

align-content	Packs text lines to the left of the flex container
align-items	Specifies the default alignment for items inside a specific flex container
align-self	Specifies the alignment for a selected item in a flex container
all	Resets all the properties to either inherited or initial value
animation	A shorthand for the eight properties used for animation
animation-delay	Specifies the delay before an animation starts playing
animation-direction	Defines if the animation plays in reverse or alternate cycles
animation-duration	Sets the duration of an animation cycle
animation-fill-mode	Sets the style for an element while the animation is not active (finished or delayed)
animation-iteration-count	Defines the number of times an animation should normally repeat
animation-name	Specifies the name of the animation
animation-timing-function	Specifies the duration of time for an element to transition from one set of styles to another

B

backface-visibility	Defines if the element’s back is visible when it is not facing the screen
background	A shorthand for the eight properties used for background
background-clip	Specifies the area to which a background should extend
background-color	Sets a background color
background-image	Sets a background image for an element
background-origin	Specifies where to position the background image
background-position	Specifies the initial position of the background image
background-size	Defines the size of the background image
border	A shorthand for the three properties used for borders
border-bottom-left-radius	Defines the rounded corners for an element
border-image	Specifies the image to be used instead of a regular border
border-image-outset	Specifies how much of the border image goes outside of the border box
border-image-repeat	Specifies if the border image is rounded, repeated or stretched
border-image-slice	Specifies how a border image should be sliced
border-image-source	Specifies the path to access the image that you want to use as a border
border-image-width	Specifies the border image width
border-radius	A shorthand for the four properties used for border radius
border-style	Defines the style of the border lines
border-top-left-radius	Defines the shape of the top left corner border
border-top-right-radius	Defines the shape of the top right corner border
border-bottom-left-radius	Defines the shape of the bottom left corner border
border-bottom-right-radius	Defines the shape of the bottom right corner border
box-shadow	Adds a shadow to a box element
box-sizing	Specifies whether the height and width values represent the content box or the border box

C

color	Sets the color of text
column-count	Specifies the number of columns an element should be divided into
column-gap	Defines the gap between columns
column-rule	A shorthand for the three properties used for column rules
column-rule-color	Specifies the color of the column rule
column-rule-style	Specifies the style of the column rule
column-rule-width	Specifies the width of of the column rule
column-span	Specifies how many columns an element should span across
column-width	Specifies the optimal width of a column
columns	A shorthand for column-width and column-count

D

display

Specifies what kind of container the element will use

F

filter	Defines visual effects for elements
flex	A shorthand for flex-grow, flex-shrink and flex-basis
flex-basis	Sets the initial length of a flex item
flex-direction	Specifies the placement of flex items
flex-flow	A shorthand for flex-direction and flex-wrap
flex-grow	Specifies how much a flex item should grow when there's too much space in a flex container
flex-shrink	Specifies how much a flex item should shrink when there's too little space in a flex container
font	A shorthand for the seven properties used for fonts
font-family	Defines what font an element will use when it has text in it
font-size	Sets the default size of text characters
font-size-adjust	Controls the sizing of lowercase letters
font-stretch	Defines how wide or narrow the characters should be
font-style	Defines the text font style
font-weight	Defines how thick or thin the characters should be

H

hanging-punctuation

Defines if punctuation marks should be displayed outside of the lines to keep them properly aligned

J

justify-content

Aligns flex items along the horizontal axis of the container

L

line-height

Defines the line height

M

margin

Adds space around an element

N

nav-down	Defines where the web page will navigate when the downwards arrow navigation key is pressed
nav-index	Sets the sequence of navigation, or tabbing, order for elements
nav-left	Defines where the web page will navigate when the left arrow navigation key is pressed
nav-right	Defines where the web page will navigate when the right arrow navigation key is pressed
nav-up	Defines where the web page will navigate when the upwards arrow navigation key is pressed

O

opacity	Sets the opacity level for an element
order	Defines the position of a specific flex item in the order of items in the same container
outline	Draws a line outside the element
outline-offset	Adds space between the outline and the border of the element
overflow	Defines how the element behaves when the content cannot fit within its borders
overflow-x	Defines how left and right sides of a container react to overflowing content
overflow-y	Defines how top and bottom sides of a container react to overflowing content

P

padding	Adds space around an element
perspective	Defines how far away an object is to create a 3D perspective
perspective-origin	Specifies where a 3D element originates from on the x– and y– axis
position	Specifies how an element is positioned

R

resize

Specifies whether a user can resize the element

T

tab-size	Defines how much space the tab character is going to take up in the text
text-align	Defines the horizontal text alignment inside of an element
text-align-last	Defines the horizontal alignment for the last line of text
text-decoration	A shorthand for the three properties used for text decoration lines
text-decoration-color	Sets the color for all text decoration lines
text-decoration-line	Specifies where text decoration line is displayed (below, above or through the text)
text-decoration-style	Defines the style of text decoration line
text-emphasis	A shorthand for text-emphasis-style and text-emphasis-color
text-overflow	Defines how the presence of overflowed content that is not displayed will be shown to the user
text-shadow	Adds a shadow to the text
text-transform	Controls the capitalization of the text
transform	Applies various transformations to an element
transition	A shorthand for the four properties used for transition
transition-delay	Specifies the transition starting point in time
transition-duration	Specifies how long a transition takes to finish
transition-property	Defines the CSS property that is affected by the transition effect
transition-timing-function	Specifies the speed curve of a transition

V

vertical-align

Specifies the vertical alignment for items inside an element

W

word-break	Defines the line breaking rules for words when they reach the end of the line
word-wrap	Allows breaking long words and wrapping them in the next line

Z

z-index

Defines a position of an element on the z-axis

:@

:hover	Defines how elements should be styled when they are hovered on
@font-face	Allows you to use a font file and define the name of the font instead of having to use a web-safe font
@keyframes	Allows specifying code for the animation
@media	Specifies different style rules for different devices and/or media types