Css Display Cheat Sheet



CSS Cheat Sheets These cheat sheets are for helping you with the different aspects of CSS and are available to download in a variety of different file formats. Comprehensive CSS Cheat Sheet (PDF) If you want to learn CSS and utilize it in a proper way, then this amazing cheat sheet will help you to remember all the elements and CSS tags. OverAPI.com is a site collecting all the cheatsheets,all!

A

align-contentPacks text lines to the left of the flex container
align-itemsSpecifies the default alignment for items inside a specific flex container
align-selfSpecifies the alignment for a selected item in a flex container
allResets all the properties to either inherited or initial value
animationA shorthand for the eight properties used for animation
animation-delaySpecifies the delay before an animation starts playing
animation-directionDefines if the animation plays in reverse or alternate cycles
animation-durationSets the duration of an animation cycle
animation-fill-modeSets the style for an element while the animation is not active (finished or delayed)
animation-iteration-countDefines the number of times an animation should normally repeat
animation-nameSpecifies the name of the animation
animation-timing-functionSpecifies the duration of time for an element to transition from one set of styles to another

B

backface-visibilityDefines if the element’s back is visible when it is not facing the screen
backgroundA shorthand for the eight properties used for background
background-clipSpecifies the area to which a background should extend
background-colorSets a background color
background-imageSets a background image for an element
background-originSpecifies where to position the background image
background-positionSpecifies the initial position of the background image
background-sizeDefines the size of the background image
borderA shorthand for the three properties used for borders
border-bottom-left-radiusDefines the rounded corners for an element
border-imageSpecifies the image to be used instead of a regular border
border-image-outsetSpecifies how much of the border image goes outside of the border box
border-image-repeatSpecifies if the border image is rounded, repeated or stretched
border-image-sliceSpecifies how a border image should be sliced
border-image-sourceSpecifies the path to access the image that you want to use as a border
border-image-widthSpecifies the border image width
border-radiusA shorthand for the four properties used for border radius
border-styleDefines the style of the border lines
border-top-left-radiusDefines the shape of the top left corner border
border-top-right-radiusDefines the shape of the top right corner border
border-bottom-left-radiusDefines the shape of the bottom left corner border
border-bottom-right-radiusDefines the shape of the bottom right corner border
box-shadowAdds a shadow to a box element
box-sizingSpecifies whether the height and width values represent the content box or the border box

C

colorSets the color of text
column-countSpecifies the number of columns an element should be divided into
column-gapDefines the gap between columns
column-ruleA shorthand for the three properties used for column rules
column-rule-colorSpecifies the color of the column rule
column-rule-styleSpecifies the style of the column rule
column-rule-widthSpecifies the width of of the column rule
column-spanSpecifies how many columns an element should span across
column-widthSpecifies the optimal width of a column
columnsA shorthand for column-width and column-count

D

displaySpecifies what kind of container the element will use

F

filterDefines visual effects for elements
flexA shorthand for flex-grow, flex-shrink and flex-basis
flex-basisSets the initial length of a flex item
flex-directionSpecifies the placement of flex items
flex-flowA shorthand for flex-direction and flex-wrap
flex-growSpecifies how much a flex item should grow when there's too much space in a flex container
flex-shrinkSpecifies how much a flex item should shrink when there's too little space in a flex container
fontA shorthand for the seven properties used for fonts
font-familyDefines what font an element will use when it has text in it
font-sizeSets the default size of text characters
font-size-adjustControls the sizing of lowercase letters
font-stretchDefines how wide or narrow the characters should be
font-styleDefines the text font style
font-weightDefines how thick or thin the characters should be

H

Css Display Cheat Sheet Download

hanging-punctuationDefines if punctuation marks should be displayed outside of the lines to keep them properly aligned

J

Css style cheat sheet

Css And Html Cheat Sheet

justify-contentAligns flex items along the horizontal axis of the container

L

line-heightDefines the line height

M

marginAdds space around an element

N

nav-downDefines where the web page will navigate when the downwards arrow navigation key is pressed
nav-indexSets the sequence of navigation, or tabbing, order for elements
nav-leftDefines where the web page will navigate when the left arrow navigation key is pressed
nav-rightDefines where the web page will navigate when the right arrow navigation key is pressed
nav-upDefines where the web page will navigate when the upwards arrow navigation key is pressed

O

opacitySets the opacity level for an element
orderDefines the position of a specific flex item in the order of items in the same container
outlineDraws a line outside the element
outline-offsetAdds space between the outline and the border of the element
overflowDefines how the element behaves when the content cannot fit within its borders
overflow-xDefines how left and right sides of a container react to overflowing content
overflow-yDefines how top and bottom sides of a container react to overflowing content
Sheet

P

paddingAdds space around an element
perspectiveDefines how far away an object is to create a 3D perspective
perspective-originSpecifies where a 3D element originates from on the x– and y– axis
positionSpecifies how an element is positioned

R

resizeSpecifies whether a user can resize the element

Css Display Cheat Sheet Printable

T

Css Cheat Sheet 2020

tab-sizeDefines how much space the tab character is going to take up in the text
text-alignDefines the horizontal text alignment inside of an element
text-align-lastDefines the horizontal alignment for the last line of text
text-decorationA shorthand for the three properties used for text decoration lines
text-decoration-colorSets the color for all text decoration lines
text-decoration-lineSpecifies where text decoration line is displayed (below, above or through the text)
text-decoration-styleDefines the style of text decoration line
text-emphasisA shorthand for text-emphasis-style and text-emphasis-color
text-overflowDefines how the presence of overflowed content that is not displayed will be shown to the user
text-shadowAdds a shadow to the text
text-transformControls the capitalization of the text
transformApplies various transformations to an element
transitionA shorthand for the four properties used for transition
transition-delaySpecifies the transition starting point in time
transition-durationSpecifies how long a transition takes to finish
transition-propertyDefines the CSS property that is affected by the transition effect
transition-timing-functionSpecifies the speed curve of a transition

V

Css Style Cheat Sheet Pdf

vertical-alignSpecifies the vertical alignment for items inside an element

W

word-breakDefines the line breaking rules for words when they reach the end of the line
word-wrapAllows breaking long words and wrapping them in the next line

Z

Css Code Cheat Sheet

z-indexDefines a position of an element on the z-axis

:@

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