Shorthand CSS Rule Reference

Im having trouble understanding and memorizing short-hand rule so I thought I made myself a quick reference.

background: (color) (image: use url()) (repeat: repeat-x,y,no-repeat) (attachment: scroll,fixed,local,initial,inherit) (position(x,y): in pixels or left top right bottom combination of 2s, or center)

border: (width) (style) (color | initial | inherit)

border-radius: (top-left-radius) (top-right-radius) (bottom-right-radius) (bottom-left-radius)

columns: (width | auto) (column count | initial | inherit)

flex: (grow: 0 - N) (shrink: 0 do not shrink) (basis: this is the width, auto | initial | inherit | value px %)

flex-flow: (direction: row,row-reverse,column,column-reverse,initial,inherit) (wrap: wrap, nowrap, wrap-reverse, initial, inherit)

font: (font-style) (font-variant font-weight) (font-size/line-height) (font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit)

@font-face: (font-name) (url)
Note: use any font-name and reference them to your css eg. .my-container{ font-family: font-name }
position: No shorthand for position use SASS mixin.

transition: (transition-property) (transition-duration) (transition-timing-function) (transition-delay)

Leave a Reply

Your email address will not be published. Required fields are marked *