CSS Cheat sheet Dimension (block) Fonts & texts (inline) @keyframes

width font @keyframes myanimation {

Selectors 0%{margin-left: 0px;}
height font-family 50%{margin-left: 30px;}
* div + span 100%{margin-left: 0px;}
div div ~ span min-width font-size }
div * a[attr] p{
max-width font-style
animation: myanimation 4s infinite;
.class a[attr="value"]
min-height font-weight }
#itemid a[attr$="value"]
div#itemid a[attr^="value"]
div.class a[attr*="value"]
max-height font-variant @supports
div span a[class~="mot"] margin color
@supports (display:flex) {
div, span a[lang|="fr"] div {display: flex; }
padding text-align
div > span }
box-sizing text-decoration
Pseudo-classes & -elements
text-indent Functions
Appearence (block)
:lang(var) :root text-shadow attr() Attribute value of selector
:first-child :link border [-style], [-color], [-width]
text-transform calc() Calculate - ex. calc(100vw-30px)
:nth-child(n) :visited
linear-gradient() Linear gradient
:last-child :hover border-radius
vertical-align radial-gradient()
Classes

Radial gradient
:nth-last-child(n) :active
border-image repeat() Reapeat values
:first-of-type :focus line-height
reapeating-linear-gradient()
:nth-of-type(n) :checked outline
white-space reapeating-radial-gradient()
:only-of-type :enabled
outline-style rgb() | rgba() RGB color and opacity
:last-of-type :disabled letter-spacing var() Variable
:nth-last-of-type(n) :empty outline-color
:not(selecteur) :target word-spacing
::first-line ::before outline-width Display
word-break
Elements

::first-letter ::after
background block
::selection word-wrap
background-color
direction
Units of measurement T
background-image
unicode-bidi
Ecran (fixe & relatif) Viewport background-repeat
quotes inline
px vw
background-position Current text in a paragraph
% vh hyphens
em vmin background-attachment list-item
rem vmax
background-origin Lists List item
Grille
List item
fr background-clip list-style
Impression inline-block
background-size list-style-type
cm pt Text
mm pc box-shadow list-style-image
flex none
in list-style-position grid table-row-group
table table-colum
Browser’s prefix T (background)
counter-increment
inline-table table-column-group
height table-row
width counter-reset table-header-group
-webkit- Chrome, Safari table-cell table-footer-group
padding
-moz- Firefox table-caption
-ms- Internet Explorer Display & visibility (object)
-o- Opera outline-offset border outline margin
display Flex (display:flex)
@font-face Content (block) visibility
Container Item

flex-direction order
@font-face { overflow opacity
font-family: 'MaPolice'; flex-flow
src: url('fonts/webfontbold.woff'); content
font-weight: bold; Animation (object) flex-wrap
font-style: normal; clip
font-stretch: normal; animation flex
} resize
p { font-family: 'MaPolice'; } animation-name flex-grow
columns
animation-duration flex-shrink
column-width
@media (media queries) flex-basis
animation-iteration-count
column-count
@media screen and (min-width:800px)
{ column-span transition Grid (display:grid | inline-grid | subgrid)
/* Reponsive CSS */
} column-gap transition-property Container Item

Medias column-rule [-style], [-color], [-width] transition-duration grid

all braille transition-timing-function grid-template-columns grid-column
screen embossed Position
handheld projection transition-delay grid-template-rows grid-row
print tty position static, absolute, relative, fixed transition-origin grid-area
grid-template-areas
CSS Cheat sheet | v. 1.3 | dec. ‘17 | Olivier Dommange

aural / speech tv
top matrix, translate, rotate,
Fonctions transform scale, skew, perspective grid-gap

color height right grid-column-gap

color-index monochrome
Print & cursor
bottom grid-row-gap
aspect-ratio orientation
device-aspect-ratio resolution left page-break-inside
device-height scan page-break-before
Alignements (grid & flex)
z-index
device-width width
grid float page-break-after align-items align-self

heritage top, right, bottom, left clear cursor justify-content