CSS-Cheat-Sheet
CSS-Cheat-Sheet
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
CSS Reference
❮ Home Next ❯
CSS Properties
Search..
A
accent-color Specifies an accent color for user-interface controls
animation-fill-mode Specifies a style for the element when the animation is not
playing (before it starts, after it ends, or both)
https://www.w3schools.com/cssref/index.php 1/25
10/10/24, 7:22 PM CSS Reference
animation-iteration-
count
Tutorials
Specifies the number of times an animation should be
Exercises
played
Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
animation-name Specifies a name for the @keyframes animation
B
backdrop-filter Defines a graphical effect to the area behind an element
https://www.w3schools.com/cssref/index.php 2/25
10/10/24, 7:22 PM CSS Reference
block-size
Tutorials Specifies the size of an element in block direction
Exercises Services Sign Up Log in
border A shorthand property for border-width, border-style and
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
border-color
border-block-color Sets the color of the borders at start and end in the block
direction
border-block-end-color Sets the color of the border at the end in the block direction
border-block-end-style Sets the style of the border at the end in the block direction
border-block-end-width Sets the width of the border at the end in the block
direction
border-block-start- Sets the color of the border at the start in the block
color direction
border-block-start- Sets the style of the border at the start in the block
style direction
border-block-start- Sets the width of the border at the start in the block
width direction
border-block-style Sets the style of the borders at start and end in the block
direction
border-block-width Sets the width of the borders at start and end in the block
direction
https://www.w3schools.com/cssref/index.php 3/25
10/10/24, 7:22 PM CSS Reference
border-bottom-right-
Tutorials
radius
Defines the radius of the border of the bottom-right corner
Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
border-bottom-style Sets the style of the bottom border
border-end-end-radius Sets the radius of the corner between the block-end and
the inline-end sides of the element
border-end-start- Sets the radius of the corner between the block-end and
radius the inline-start sides of the element
border-inline-color Sets the color of the borders at start and end in the inline
direction
border-inline-end-color Sets the color of the border at the end in the inline direction
border-inline-end-style Sets the style of the border at the end in the inline direction
border-inline-end- Sets the width of the border at the end in the inline
width direction
https://www.w3schools.com/cssref/index.php 4/25
10/10/24, 7:22 PM CSS Reference
border-inline-start
Tutorials A shorthand property for border-inline-start-width, border-
Exercises Services Sign Up
inline-start-style and border-inline-start-color
Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
border-inline-start- Sets the color of the border at the start in the inline
color direction
border-inline-start- Sets the style of the border at the start in the inline
style direction
border-inline-start- Sets the width of the border at the start in the inline
width direction
border-inline-style Sets the style of the borders at start and end in the inline
direction
border-inline-width Sets the width of the borders at start and end in the inline
direction
border-start-end- Sets the radius of the corner between the block-start and
radius the inline-end sides of the element
border-start-start- Sets the radius of the corner between the block-start and
radius the inline-start sides of the element
https://www.w3schools.com/cssref/index.php 5/25
10/10/24, 7:22 PM CSS Reference
border-top
Tutorials A shorthand property for border-top-width, border-top-style
Exercises Services
and border-top-color
Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
border-top-color Sets the color of the top border
bottom Sets the elements position, from the bottom of its parent
element
C
caption-side Specifies the placement of a table caption
https://www.w3schools.com/cssref/index.php 6/25
10/10/24, 7:22 PM CSS Reference
caret-color
Tutorials Specifies the color of the cursor (caret) in inputs, textareas,
Exercises Services
or any element that is editable
Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
@charset Specifies the character encoding used in the style sheet
clear Specifies what should happen with the element that is next
to a floating element
https://www.w3schools.com/cssref/index.php 7/25
10/10/24, 7:22 PM CSS Reference
counter-set
Tutorials Creates or sets one or more CSS counters
Exercises Services Sign Up Log in
cursor Specifies the mouse cursor to be displayed when pointing
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
over an element
D
direction Specifies the text direction/writing direction
E
empty-cells Specifies whether or not to display borders and background
on empty cells in a table
F
filter Defines effects (e.g. blurring or color shifting) on an
element before the element is displayed
flex-grow Specifies how much the item will grow relative to the rest
flex-shrink Specifies how the item will shrink relative to the rest
https://www.w3schools.com/cssref/index.php 8/25
10/10/24, 7:22 PM CSS Reference
font-size-adjust Preserves the readability and size of text when fallback font
occurs
font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts
(e.g Japanese and Chinese)
https://www.w3schools.com/cssref/index.php 9/25
10/10/24, 7:22 PM CSS Reference
font-variant-numeric
Tutorials
Controls the usage of alternate glyphs for numbers,
Exercises Services
fractions, and ordinal markers
Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
font-variant-position Controls the usage of alternate glyphs of smaller size
positioned as superscript or subscript regarding the
baseline of the font
G
gap A shorthand property for the row-gap and the column-gap
properties
grid-area Either specifies a name for the grid item, or this property is
a shorthand property for the grid-row-start, grid-column-
start, grid-row-end, and grid-column-end properties
https://www.w3schools.com/cssref/index.php 10/25
10/10/24, 7:22 PM CSS Reference
grid-template-areas
Tutorials Specifies how to display columns and rows, using named
Exercises Services
grid items
Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
grid-template-columns Specifies the size of the columns, and how many columns in
a grid layout
H
hanging-punctuation Specifies whether a punctuation character may be placed
outside the line box
I
image-rendering Specifies the type of algorithm to use for image scaling
@import Allows you to import a style sheet into another style sheet
https://www.w3schools.com/cssref/index.php 11/25
10/10/24, 7:22 PM CSS Reference
inset-block-start
Tutorials Specifies the distance between the start of an element and
Exercises Services
the parent element in the block direction
Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
inset-inline Specifies the distance between an element and the parent
element in the inline direction
J
justify-content Specifies the alignment between the items inside a flexible
container when the items do not use all available space
justify-self Is set on the grid item. Specifies the alignment of the grid
item in the inline direction
K
@keyframes Specifies the animation code
L
left Specifies the left position of a positioned element
https://www.w3schools.com/cssref/index.php 12/25
10/10/24, 7:22 PM CSS Reference
line-height
Tutorials Exercises
Sets the line height
Services Sign Up Log in
list-style Sets all the properties for a list in one declaration
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
list-style-image Specifies an image as the list-item marker
M
margin Sets all the margin properties in one declaration
https://www.w3schools.com/cssref/index.php 13/25
10/10/24, 7:22 PM CSS Reference
marker-start
Tutorials Points to a marker that will be drawn on the first vertex of
Exercises Services
an element's path
Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
mask A shorthand property for mask-image, mask-mode, mask-
repeat, mask-position, mask-clip, mask-origin, mask-size
and mask-composite
https://www.w3schools.com/cssref/index.php 14/25
10/10/24, 7:22 PM CSS Reference
min-width
Tutorials Exercises
Sets the minimum width of an element
Services Sign Up Log in
mix-blend-mode Specifies how an element's content should blend with its
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
direct parent background
O
object-fit Specifies how the contents of a replaced element should be
fitted to the box established by its used height and width
order Sets the order of the flexible item, relative to the rest
orphans Sets the minimum number of lines that must be left at the
bottom of a page or column
https://www.w3schools.com/cssref/index.php 15/25
10/10/24, 7:22 PM CSS Reference
outline-width
Tutorials Sets the width of an outline
Exercises Services Sign Up Log in
overflow Specifies what happens if content overflows an element's
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
box
overflow-wrap Specifies whether or not the browser can break lines with
long words, if they overflow the container
P
padding A shorthand property for all the padding-* properties
https://www.w3schools.com/cssref/index.php 16/25
10/10/24, 7:22 PM CSS Reference
padding-inline
Tutorials Exercises
Specifies the padding in the inline direction
Services Sign Up Log in
padding-inline-end Specifies the padding at the end in the inline direction
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
padding-inline-start Specifies the padding at the start in the inline direction
https://www.w3schools.com/cssref/index.php 17/25
10/10/24, 7:22 PM CSS Reference
Q
Tutorials Exercises Services Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
quotes Sets the type of quotation marks for embedded quotations
R
resize Defines if (and how) an element is resizable by the user
S
scale Specifies the size of an element by scaling up or down
scroll-margin Specifies the margin between the snap position and the
container
scroll-margin-block Specifies the margin between the snap position and the
container in the block direction
scroll-margin-block- Specifies the end margin between the snap position and the
end container in the block direction
scroll-margin-block- Specifies the start margin between the snap position and
start the container in the block direction
scroll-margin-inline Specifies the margin between the snap position and the
container in the inline direction
scroll-margin-inline- Specifies the end margin between the snap position and the
end container in the inline direction
https://www.w3schools.com/cssref/index.php 18/25
10/10/24, 7:22 PM CSS Reference
scroll-margin-inline-
start
Tutorials
Specifies the start margin between the snap position and
Exercises Services
the container in the inline direction
Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
scroll-margin-left Specifies the margin between the snap position on the left
side and the container
scroll-margin-right Specifies the margin between the snap position on the right
side and the container
scroll-margin-top Specifies the margin between the snap position on the top
side and the container
scroll-padding-block- Specifies the distance in block direction from the end of the
end container to the snap position on the child elements
scroll-padding-inline- Specifies the distance in inline direction from the end of the
end container to the snap position on the child elements
scroll-padding-left Specifies the distance from the left side of the container to
the snap position on the child elements
scroll-padding-right Specifies the distance from the right side of the container to
the snap position on the child elements
scroll-padding-top Specifies the distance from the top of the container to the
snap position on the child elements
https://www.w3schools.com/cssref/index.php 19/25
10/10/24, 7:22 PM CSS Reference
scroll-snap-align
Tutorials Specifies where to position elements when the user stops
Exercises Services
scrolling
Sign Up Log in
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
scroll-snap-stop Specifies scroll behaviour after fast swipe on trackpad or
touch screen
T
tab-size Specifies the width of a tab character
table-layout Defines the algorithm used to lay out table cells, rows, and
columns
text-align-last Describes how the last line of a block or a line right before
a forced line break is aligned when text-align is "justify"
https://www.w3schools.com/cssref/index.php 20/25
10/10/24, 7:22 PM CSS Reference
text-indent
Tutorials Specifies the indentation of the first line in a text-block
Exercises Services Sign Up Log in
text-justify Specifies the justification method used when text-align is
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
"justify"
transition-property Specifies the name of the CSS property the transition effect
is for
U
unicode-bidi Used together with the direction property to set or return
whether the text should be overridden to support multiple
https://www.w3schools.com/cssref/index.php 21/25
10/10/24, 7:22 PM CSS Reference
HTML
CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
V
vertical-align Sets the vertical alignment of an element
W
white-space Specifies how white-space inside an element is handled
widows Sets the minimum number of lines that must be left at the
top of a page or column
word-break Specifies how words should break when reaching the end of
a line
Z
z-index Sets the stack order of a positioned element
❮ Home Next ❯
https://www.w3schools.com/cssref/index.php 22/25