Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS provides a way to style HTML elements and create visually appealing web pages. CSS is widely used in web development and is a key tool for creating responsive and dynamic web pages.
This cheat sheet provides a quick reference for the most commonly used CSS properties organized into themes. Each theme contains a table with the property name and a brief description of its purpose. The cheat sheet covers a wide range of CSS properties, from basic text and background styles to advanced animation and transformation effects.
Using this cheat sheet can save you time and help you write cleaner, more efficient CSS code. By having all the CSS properties organized into themes, you can easily find the property you need and quickly add it to your code. This cheat sheet can also help you learn new CSS properties and how they can be used to create different styles and effects.
In conclusion, CSS is an essential tool for web development and this cheat sheet is a handy resource for anyone who works with CSS. By using this cheat sheet, you can improve your CSS skills and create more visually appealing and dynamic web pages.
Cheat Sheet
Basic Syntax
CSS Selector
Description
*
Selects all elements
element
Selects all elements of a specific type
.class
Selects all elements with a specific class
#id
Selects the element with a specific ID
selector1, selector2
Selects all elements that match either selector1 or selector2
selector1 selector2
Selects all elements that match selector2 and are descendants of elements that match selector1
selector1 > selector2
Selects all elements that match selector2 and are direct children of elements that match selector1
selector1 + selector2
Selects the element that immediately follows selector1 and matches selector2
selector1 ~ selector2
Selects all elements that follow selector1 and match selector2
Text Properties
Property
Description
color
Sets the color of text
font-size
Sets the size of text
font-weight
Sets the weight of text (e.g. bold)
font-style
Sets the style of text (e.g. italic)
text-align
Sets the alignment of text
text-decoration
Sets the decoration of text (e.g. underline)
text-transform
Sets the case of text (e.g. uppercase)
line-height
Sets the height of a line of text
letter-spacing
Sets the spacing between letters
word-spacing
Sets the spacing between words
white-space
Sets how white space is handled
text-shadow
Adds a shadow to text
Box Properties
Property
Description
width
Sets the width of an element
height
Sets the height of an element
margin
Sets the margin 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
Sets the padding 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
padding-left
Sets the left padding of an element
border
Sets the border of an element
border-top
Sets the top border of an element
border-right
Sets the right border of an element
border-bottom
Sets the bottom border of an element
border-left
Sets the left border of an element
border-width
Sets the width of a border
border-style
Sets the style of a border
border-color
Sets the color of a border
border-radius
Sets the radius of a border
box-sizing
Sets the box model for an element
overflow
Sets how content that overflows an element is handled
display
Sets the display style of an element
visibility
Sets the visibility of an element
Background Properties
Property
Description
background-color
Sets the color of an element’s background
background-image
Sets an image as an element’s background
background-repeat
Sets how an element’s background image is repeated
background-position
Sets the position of an element’s background image
background-size
Sets the size of an element’s background image
background-attachment
Sets whether an element’s background image scrolls with the page or is fixed
Positioning Properties
Property ——
Description
position
Specifies the type of positioning used for an element
top
Sets the distance between the top edge of an element and the top edge of its containing element
bottom.
Sets the distance between the bottom edge of an element and the bottom edge of its containing element
left
Sets the distance between the left edge of an element and the left edge of its containing element
right
Sets the distance between the right edge of an element and the right edge of its containing element
z-index
Sets the stacking order of elements
float
Specifies whether or not an element should float
clear
Specifies which sides of an element other floating elements are not allowed
Flexbox Properties
Property
Description
display: flex
Sets an element as a flex container
flex-direction
Sets the direction of the flex container
justify-content
Sets the alignment of flex items along the main axis
align-items
Sets the alignment of flex items along the cross axis
flex-wrap
Sets whether flex items should wrap
align-content
Sets the alignment of flex lines along the cross axis
flex
Sets the flexible size of a flex item
order
Sets the order of a flex item
align-self
Sets the alignment of a single flex item along the cross axis
Grid Properties
Property
Description
display: grid
Sets an element as a grid container
grid-template-columns
Sets the width of each column in the grid
grid-template-rows
Sets the height of each row in the grid
grid-template-areas
Sets the position of grid items using named grid areas
grid-column-gap
Sets the gap between columns in the grid
grid-row-gap
Sets the gap between rows in the grid
grid-gap
Sets the gap between rows and columns in the grid
grid-auto-columns
Sets the width of columns that aren’t explicitly sized in the grid
grid-auto-rows
Sets the height of rows that aren’t explicitly sized in the grid
grid-auto-flow
Sets the flow of grid items that aren’t explicitly placed in the grid
grid-row-start
Sets the starting row position of a grid item
grid-row-end
Sets the ending row position of a grid item
grid-column-start
Sets the starting column position of a grid item
grid-column-end
Sets the ending column position of a grid item
grid-area
Sets the grid item’s position using the grid-row-start, grid-row-end, grid-column-start, and grid-column-end properties
Animation and Transition Properties
Property
Description
animation-name
Sets the name of an animation
animation-duration
Sets the length of an animation
animation-timing-function
Sets the timing of an animation
animation-delay
Sets the delay before an animation starts
animation-iteration-count
Sets the number of times an animation should repeat
animation-direction
Sets the direction of an animation
animation-fill-mode
Sets what styles are applied to an element before and after an animation
animation-play-state
Sets whether an animation is running or paused
transition-property
Sets the CSS property to which a transition should be applied
transition-duration
Sets the length of a transition
transition-timing-function
Sets the timing of a transition
transition-delay
Sets the delay before a transition starts
Responsive Design Properties
Property
Description
@media
Sets styles for different screen sizes
max-width
Sets the maximum width of an element
min-width
Sets the minimum width of an element
width
Sets the width of an element
height
Sets the height of an element
max-height
Sets the maximum height of an element
min-height
Sets the minimum height of an element
viewport units
Sets sizes relative to the viewport
Pseudo-class and Pseudo-element Properties
Property
Description
:active
Sets the styles for an element when it is being activated
:hover
Sets the styles for an element when it is being hovered
:focus
Sets the styles for an element when it has focus
:visited
Sets the styles for a visited link
:before
Inserts content before the content of an element
:after
Inserts content after the content of an element
Transform Properties
Property
Description
transform
Applies a 2D or 3D transformation to an element
transform-origin
Sets the origin point of a transformation
rotate
Rotates an element around a fixed point
scale
Increases or decreases the size of an element
translate
Moves an element along the horizontal and/or vertical axis
skew
Skews an element along the horizontal and/or vertical axis