Tutorials Playground Articles Collective CSS Reference

      

CSS Reference
An extensive CSS reference with all the important properties and info to learn CSS from the basics

Pseudo-class Property

Function Data Type

Concept @rule

Pseudo-class
::after ::before ::first-letter

::first-line ::placeholder ::selection

:active :blank :checked

:default :dir() :disabled

:empty :enabled :first

:first-child :first-of-type :focus

:fullscreen :hover :in-range

:indeterminate :invalid :lang()

:last-child :last-of-type :left

:link :not() :nth-child()

:nth-last-child() :nth-last-of-type() :nth-of-type()

:only-child :only-of-type :optional

:out-of-range :read-only :read-write

:required :right :root

:scope :target :valid

:visited content


Property
all animation animation-delay

animation-direction animation-duration animation-fill-mode

animation-iteration-count animation-name animation-play-state

animation-timing-function appearance backdrop-filter

backface-visibility background background-attachment

background-blend-mode background-clip background-color

background-image background-origin background-position

background-repeat background-size border

border-bottom border-bottom-color border-bottom-left-radius

border-bottom-right-radius border-bottom-style border-bottom-width

border-collapse border-color border-image

border-image-outset border-image-repeat border-image-slice

border-image-source border-image-width border-left

border-left-color border-left-style border-left-width

 y

border-radius border-right border-right-color

border-right-style border-right-width border-spacing

border-style border-top border-top-color

border-top-left-radius border-top-right-radius border-top-style

border-top-width border-width bottom

box-shadow box-sizing break-after

break-before break-inside caption-side

clear clip clip-path

color column-count column-fill

column-gap column-rule column-rule-color

column-rule-style column-rule-width column-span

column-width columns counter-increment

counter-reset cursor direction

display empty-cells filter

float font font-family

font-size font-size-adjust font-stretch

font-style font-synthesis font-variant

font-weight hanging-punctuation height

hyphens isolation left

letter-spacing line-height list-style

list-style-image list-style-position list-style-type

margin margin-bottom margin-left

margin-right margin-top mask

mask-border mask-border-mode mask-border-outset

mask-border-repeat mask-border-slice mask-border-source

mask-border-width mask-clip mask-composite

mask-image mask-mode mask-origin

mask-position mask-repeat mask-size

mask-type max-height max-width

min-height min-width mix-blend-mode

object-fit object-position opacity

orphans outline outline-color

outline-offset outline-style outline-width

overflow overflow-x overflow-y

padding padding-bottom padding-left

padding-right padding-top page-break-after

page-break-before page-break-inside perspective

perspective-origin pointer-events position

quotes resize right

shape-image-threshold shape-margin shape-outside

tab-size table-layout text-align

text-align-last text-decoration text-decoration-color

text-decoration-line text-decoration-style text-indent

text-justify text-orientation text-overflow

text-rendering text-shadow text-transform

top touch-action transform

transform-origin transform-style transition

transition-delay transition-duration transition-property

transition-timing-function unicode-bidi vertical-align

visibility white-space widows

width will-change word-break

word-spacing word-wrap writing-mode

z-index


Function
attr() calc() circle()

ellipse() hsl() hsla()

inset() linear-gradient() matrix()

matrix3d() polygon() radial-gradient()

repeating-linear-gradient() repeating-radial-gradient() rgb()

rgba() rotate() rotate3d()

rotateX() rotateY() rotateZ()

scale() scale3d() scaleX()

scaleY() scaleZ() skew()

skewX() skewY() translate()

translate3d() translateX() translateY()

translateZ()
 
Data Type
<angle> <basic-shape> <blend-mode>

<color> <frequency> <gradient>

<image> <integer> <length>

<number> <percentage> <position>

<ratio> <resolution> <string>

<time> <timing-function> <url>

<user-ident> inherit initial

revert unset


Concept
Attribute Selectors Combinators Counters

Custom Properties Flexbox Grid

Media Queries Subgrid


@rule
@charset @document @font-face

@import @keyframes @media

@namespace @page @supports


Over 800 pre-made website layouts
come packaged right inside of Divi for
free. Jumpstart your design!

Advertise Here
Tutorials Articles Playground Blueprints CSS Reference News Freebies Collective About

Contact Newsletter Deals Advertise Privacy Policy License Archives

Content delivered by StackPath

© Codrops 2020