Whether you are a seasoned web developer or a rookie part-timer, having a CSS cheat sheet closeby always helpful. CSS can be used to build some of the most visually pleasing websites that you will find.
In this article, we are going to include some of the most useful CSS3 tags/divs that you would need. While it is by no means a complete CSS reference manual, it would certainly make your job much easier.
Background
background – All the background properties in one declaration
background-image background-position background-size background-repeat background-attachment background-origin background-clip background-color
background-size – The background image size
length % auto | cover | contain
background-repeat – The way the background image is repeated
repeat | repeat-x | repeat-y | no-repeat
background-image – The background image
url gradients none
background-position – The starting position of the background image
top left | top center | top right | center left | center center | center right | bottom left | bottom center | bottom right
background-attachment – The background image fixed or scrolls
scroll | fixed | local
background-origin – Where the background image is positioned
border-box | padding-box | content-box
background-clip – Painting area of the background
border-box | padding-box | content-box
Animation
animations – All the animation properties in one declaration
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
animation-timing-function – Speed curve of an animation
ease | linear | ease-in | easeout | ease-in-out | cubic-Bezier (number, number, number, number)
animation-delay – Delays animation start
time
animation-iteration-count – Number of an animation replays
inherit number
animation-direction – Reverse animation or in alternate cycles
normal | alternate
animation-play-state – The animation is running or paused
running | paused
Font
font-size-adjust – controls font size if the first declared option is not available
none | inherit number
font-family – Font of the element
serif | sans-serif | Font Name
font-style – The specific style of the font
normal | italic | oblique | inherit
font-variant – Set small-caps
normal | small-caps | inherit
font-size – Size of the used font
xx-small | x-small | small | medium | large | x-large | xxlarge | smaller | larger |
font-weight – Use bold or thin characters
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Text
direction – The writing direction, Arabic is using rtl
ltr | rtl | inherit
hanging-punctuation – Can a punctuation mark be placed outside the line box?
none | [ start | end | endedge ]
letter-spacing – The spacing between characters
normal length %
unicode-bidi – Should the text be overridden to support more languages?
normal | embed | bidi-override
white-space – How are white-spaces handled
normal | pre | nowrap | pre-wrap | pre-line
text-align – Horizontal alignment of text
start | end | left | right | center | justify
text-align-last – Horizontal alignment of the last line of text
start | end | left | right | center | justify
text-decoration – Overline, underline, or line-through the text
none | underline | overline | line-through | blink
text-shadow – Should the text cast shadow?
none color length
word-break – Text breaking rules when the text reaches the end of the container
normal | keep-all | loose | break-strict | break-all
word-wrap – Break long words and wrap onto the next line
normal nowrap
text-emphasis
none | [ [ accent | dot | circle | disc | [ before | after ]?]
3D / 2D Transform
backface-visibility – Is element visible when not facing the screen?
visible | hidden
perspective – How many pixels the 3D element is placed from the view
none number
perspective-origin – Where is the 3D element based on the x- and y-axis?
[ [ percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] <length> ] | [ [ [ left | center | right ] || [ top | center | bottom ] ] <length> ]
transform – 2D-3D transformation
none | matrix | matrix3d | translate3d | tranlateX | translateY | translateZ | scale | scale3d | scaleX | scaleY | scaleZ | rotate | rotate3d | rotateX | rotateY | rotateZ | skewX | skewY | skew | perspective
transform-origin – Changes the position of transformed elements
[ [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] <length> ] | [ [ [ left | center | right ] || [ top | center | bottom ] ] <length> ]
transform-style – Render nested elements in 3D
flat | preserve-3d
Box Model
float – Float elements left or right
left | right | none
height – Height of the element
auto length %
max-height – Maximum height of the element
none length %
max-width – Maximum width of element
none length %
min-height – Minimum height of the element
none length %
width – Minimum width of the element
auto % length
margin – Set the top, right, bottom, and left margins in one line
margin-top margin-right margin-bottom margin-left
margin-bottom – Bottom margin
auto length %
margin-left – Left margin
auto height %
margin-right – Right margin
auto height %
margin-top – Top margin
auto length %
padding – Padding between the element border and content
padding-top padding-right padding-bottom padding-left
padding-bottom – Bottom padding
length %
padding-left – Left padding
length %
padding-right – Right padding
length %
padding-top – Top padding
length %
display – Box display type
none | inline | block | inline-block | flex | inline-flex | grid | inline-grid | contents | list-item |run-in | compact | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group
overflow – Hide, display or scroll if the content overflows its container
visible | hidden | scroll | auto | no-display | no-content overflow-x overflow-y
overflow-x – Horizontal overflow
visible | hidden | scroll | auto | no-display | no-content
visibility – Visibility: hidden elements leave a gap
visible | hidden | collapse
clear – Deny floating of an element
left | right | both | none
