CSS is a style sheet language used for describing the presentation of a document written in HTML. This cheatsheet covers essential CSS concepts, properties, and examples to help you style your web pages effectively.
Font
There are many properties related to the font, such as the face, weight, style, etc. These properties allow you to change the style or complete look of your text.
Font-Family
font-family: Tahoma, Geneva, Verdana, sans-serif;Font-Style
font-style: italic;Font-Variant
font-variant: small-caps;Font-Weight
font-weight: bold;Font-Size
font-size: larger;Font
font: style variant weight size family;Text
Text properties allow you to manipulate alignment, spacing, decoration, indentation, etc., in the document.
Text-Align
text-align: justify;Letter-Spacing
letter-spacing: 0.15em;Text-Decoration
text-decoration: underline;Word-Spacing
word-spacing: 0.25em;Text-Transform
text-transform: uppercase;Text-Indent
text-indent: 0.5cm;Line-Height
line-height: normal;Background
As the name suggests, these properties are related to background, i.e., you can change the color, image, position, size, etc., of the document.
Background-Image
background-image: url("Path");Background-Position
background-position: right top;Background-Size
background-size: cover;Background-Repeat
background-repeat: no-repeat;Background-Attachment
background-attachment: scroll;Background-Color
background-color: fuchsia;Background Shorthand
background: color image repeat attachment position;Border
Border properties allow you to change the style, width, color, etc., of the border of an element.
Border-Width
border-width: 2px;Border-Style
border-style: solid;Border-Color
border-color: #000000;Border Shorthand
border: width style color;Border-Radius
border-radius: 10px;Box Model
In laymen's terms, the CSS box model is a container that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. It is used to create the design and layout of web pages.
Float
float: left;Clear
clear: both;Display
display: block;Height
height: fit-content;Width
width: 50%;Margin
margin: 10px;Padding
padding: 10px;Overflow
overflow: hidden;Visibility
visibility: hidden;Color
color: #000000;Opacity
opacity: 0.5;Template Layout
Box-Align
box-align: center;Box-Direction
box-direction: normal;Box-Flex
box-flex: 1;Box-Flex-Group
box-flex-group: 2;Box-Orient
box-orient: inline;Box-Pack
box-pack: center;Box-Sizing
box-sizing: border-box;max-Height
max-height: 100px;min-Height
min-height: 100px;max-Width
max-width: 100px;min-Width
min-width: 100px;Table
Border-Collapse
border-collapse: collapse;Empty-Cells
empty-cells: show;Border-Spacing
border-spacing: 5px;Table-Layout
table-layout: fixed;Caption-Side
caption-side: bottom;Columns
Column-Count
column-count: 2;Column-Gap
column-gap: 40px;Column-rule-width
column-rule-width: 2px;Column-Rule-Style
column-rule-style: solid;Column-Rule-Color
column-rule-color: #000000;Column-Span
column-span: all;Column-Width
column-width: 100px;List & Markers
List-style-type
list-style-type: circle;List-style-position
list-style-position: inside;List-style-image
list-style-image: url("Path");Marker-offset
marker-offset: 10px;Animation
Animation-name
animation-name: example;Animation-duration
animation-duration: 5s;Animation-timing-function
animation-timing-function: linear;Animation-delay
animation-delay: 2s;Animation-iteration-count
animation-iteration-count: infinite;Animation-direction
animation-direction: alternate;Animation-play-state
animation-play-state: running;Animation-fill-mode
animation-fill-mode: forwards;Transition
Transition-property
transition-property: width;Transition-duration
transition-duration: 2s;Transition-timing-function
transition-timing-function: linear;Transition-delay
transition-delay: 1s;Flexbox
Flex Container (Parent)
Display
display: flex;Flex-direction
flex-direction: row | column;Flex-wrap
flex-wrap: wrap;Flex-flow
flex-flow: row wrap;Justify-content
justify-content: center;Align-items
align-items: center;Align-content
align-content: space-around;Flex Items (Child)
Order
order: 1;Flex-grow
flex-grow: 2;Flex-shrink
flex-shrink: 1;Flex-basis
flex-basis: 20%;Flex
flex: 1 1 auto;Align-self
align-self: flex-end;Grid
Grid Container (Parent)
Display
display: grid;Grid-template-columns
grid-template-columns: 1fr 1fr;Grid-template-rows
grid-template-rows: 100px 100px;Grid-gap
grid-gap: 10px;Justify-items
justify-items: center;Align-items
align-items: center;Grid Items (Child)
Grid-column
grid-column: 1 / span 2;Grid-row
grid-row: 1 / span 2;Media Queries
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}Conclusion
This CSS cheatsheet covers essential CSS concepts, properties, and examples to help you style your web pages effectively. Use it as a quick reference to build your next project.
Written by
Shyam Verma
At
September 17th, 2024
March 7th, 2026
Read time
4 min
Tags