Code has been added to clipboard!

CSS Properties: A Reference Guide

Reading time 6 min
Published Nov 22, 2018
Updated Jan 27, 2020

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
Tutorial
CSS3 Features
Syntax
Classes
ID Selectors
Attribute Selectors
Stylesheets
Inline
Internal
External
Box Model
Children Selectors
Pseudo Classes
Pseudo Elements
Variables
Counters
Text
Fonts
Web Fonts
Backgrounds
Background Images
Colors
Gradients
Opacity / Transparency
Shadow Effects
Transitions
Tooltip
Transform
Animations
Layout — Display
Layout — Position
Layout — Float
Layout — Clear
Layout — Horizontal & Vertical Align
Multiple Columns
Introduction
Responsive Web Design — Viewport
Responsive Web Design — Grid View
Responsive Web Design — Media Queries
Responsive Web Design — Flexbox Layout
Responsive Web Design — Images
Responsive Web Design — Videos
Borders
Margin
Padding
Width
Height
Outline
Links
Lists
Tables
Dropdown Menu
Navigation Bar
Images
Image Gallery
Border Images
Forms
Rounded Corners
Buttons
Box-Sizing
Selector Reference
Pagination Examples
Code Examples
CSS3 Browser Support Reference
Functions Reference
Speech Module Reference
Units
Web Safe Font Combinations
Cheat Sheet
:hover
@font-face
@keyframes
@media
align-content
align-items
align-self
all
animation
backface-visibility
background
background-clip
background-color
background-image
background-origin
background-position
background-size
border
border-image
border-radius
border-style
box-shadow
box-sizing
color
columns
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
font
font-family
font-size
font-size-adjust
font-stretch
font-style
font-weight
hanging-punctuation
justify-content
line-height
margin
offset
opacity
order
outline
overflow
padding
perspective
position
resize
tab-size
text-align
text-decoration
text-emphasis
text-transform
text-shadow
transform
transition-property
translate
vertical-align
word-break
word-wrap
z-index