CSS

CSS - Programmer Sheet

Font
Property Values Example
font-style normal/italic/inherit/oblique font-style: normal
font-variant normal/inherit/small-caps font-variant: small-caps
font-weight normal/bold/bolder/lighter/100-900/inherit font-weight:bold
font-size ?px/?%/small/medium/large font-size: large font-size :5
font-family verdana/calibri.. etc… font-family: verdana;
Text
Property Values Example
text-align left/right/center/justify text-align: justify;
letter spacing normal/length/?% letter spacing : 3%;
Text-outline None/length/color Text-outline: red;
word-wrap normal/length word-wrap: normal;
direction ltr/rtl/inherit Direction: ltr;
text-wrap normal/unrestricted/none text-wrap: normal
text-indent ?%/?px text-indent: 2%;
word-spacing normal/?%/?px word-spacing: normal;
text-transform none/uppercase/lowercase/capitalize text-transform: lowercase
text-emphasis none/dot/open/filled/circle/triangle text-emphasis: filled
text-justify auto/distribute/inter-word text-justify:distribute
User Interface
Property Values Example
appearance – apply platform specific styling normal | inherit | [icon | window | desktop | work-space | document | tooltip | dialog | button | push-button | hyperlink | radio-button | checkbox | menu-item | tab | menu | menubar | pull-down-menu | pop-up-menu | list-menu | radio-group | checkbox-group | outline-tree | range | field | combo-box | signature | password] appearance: password;
cursor auto | crosshair | default | pointer | move | e-resize | neresize | nw-resize | n-resize | se-resize | sw-resize | swresize | s-resize | w-resize | text | wait | help .help { cursor: help; }
nav-index - specifies the sequential navigation order of current element. Similar to tab index in html. Values can be auto or a positive number representing the navigation order. First value is 1. auto | inherit number nav-index: 1;
nav-down auto | inherit <id> [current | root | <target-name>
nav-left auto | inherit <id> [current | root | <target-name> nav-left: #b1;
nav-right auto | inherit <id> [current | root | <target-name> nav-right: #b2;
resize none | both | horizontal | vertical | inherit resize: horizontal;
icon auto | inherit url icon: url(“like.png”);
Backgrounds
Property Values Example
background-size auto/cover/?px/?% background-size: cover
background-image url/none background-image: none
background-repeat no-repeat/repeat-x/repeat-y/repeat background-repeat: repeat
background-attachment fixed/scroll background-attachment: fixed
background-color color/transparent background-color: white
background-position can be any position from different combinations like top left, top right, top center. Same with bottom. can be mentioned in terms of position x-% and y-% background-position: top-left;
background-origin the starting point of the background background-origin: 0;
background-clip - lets you control how much of the background image should extend beyond the element’s content or padding content-box/padding-box/border-box/no-clip/?%/?px background-clip: no-clip
Borders
Property Values Example
border-width thin/thick/medium/?px border-width: medium border-width: 20px
border-style none/dashed/dotted/inset/double/solid border-style : dotted
border-color name of the color border-color: black
border-left: border-left-color border-left-width border-left-color: black border-left-width : 10px
border-right: border-right-color border-right-width border-right-color : black border-right-width : 15px
border-top: border-top-width border-top-color border-top-width : 10px border-top-color : blue
border-bottom: border-bottom-color border-bottom-width border-bottom-color : black border-bottom-width : 15px
border-decoration-break maintain consistent design amongst fragments of broken element slice/clone border-decoration-break: slice;
border-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius ?px border-top-left-radius : 20px
border-image ?%/stretch/repeat/round/none border-image : repeat border-image : 12px
Box Model
Property Values Example
float left | right | none float : right
height auto length % height : 10px
max-height none length % max-height : 10px
max-width none length % max-width : 120%
min-height none length % min-height : 50%
min-width auto % length min-width : 30px
Margin
Property Values Example
margin-bottom auto/length % margin-bottom : 20px
margin-left auto/height % margin-left : auto
margin-right auto/height % margin-right : 30%
margin-top auto/length % margin-top : 40mm
Padding
Property Values Example
padding-bottom length % padding-bottom : 20px
padding-top length % padding-top : 20px
padding-right length % padding-right : 20px
padding-left length % padding-left : 20px
display none/inline/block/inline-block/list-item/run-in/compact/table/inline-table/table-row-group/table-headergroup/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 display : inline
marquee-direction forward/reverse marquee-direction : forward
marquee-loop infinite/integer marquee-loop : 10
marquee-play-count infinite/integer marquee-play-count : 50
marquee-speed slow/normal/fast marquee-speed : slow
marquee-style scroll/slide/alternate marquee-style : scroll
overflow visible/hidden/scroll/auto/no-display/no-content/overflow-x/overflow-y overflow : visible
overflow-style auto/marquee-line/marquee-block overflow-style : auto
overflow-x visible/hidden/scroll/auto/no-display/no-content overflow-x : scroll
rotation angle rotation : 20deg
rotation-point position (paired value off-set) rotation-point : 50% 50%
visibility visible/hidden/collapse visibility: hidden
clear left/right/both/none clear: left
Template Layout
Property Values Example
box-align start/end/center/base box-align : start
box-direction normal/reverse box-direction : normal
box-flex normal box-flex : normal
box-flex-group integer box-flex-group : 2
box-lines single/multiple box-lines : single
box-orient horizontal/vertical/inline-axis/block-axis box-orient : inline
box-pack start/end/center/justify box-pack : justify
box-sizing content-box/padding-box/border-box/margin-box box-sizing : margin-box
tab-side top/bottom/left/right tab-side : left
Table
Property Possible values
border-collapse collapse/separate
empty-cells show/hide
border-spacing ?%/?px
table-layout auto/fixed
caption-side top/bottom/left/right
Columns
Property Values Example
column-count auto/number column-count : 10
column-fill auto/balance/balance-all column-fill : balance
column-gap normal/?px column-gap : 5px
column-rule-width thin/medium/thick/?px column-rule-width : medium column-rule-width : 2px
column-rule-style border-style – dotted/solid/hidden/double/ dashed/groove/hidden/inset/outset/inherit column-rule-style : dotted 
column-rule-color color column-rule-color : black
column-width auto/?px column-width : 10px
column-span 1/all column-span : all
Colors
Property Values Example
color inherit/color color : green
opacity inherit/number level opacity : 4
Grid Positioning
Property Values Example
grid-columns none/inherit/?px/?%/x%-y% grid-columns : 10px
grid-rows none/inherit/?px/?%/x%-y% grid-rows : 40%
List and Markers
Property Values
list-style-type none/asterisks/box/check/circle/diamond/disc/hyphen/square/decimal/decimal-leading-zero/lower-roman/upper-roman/lower-alpha/upper-alpha/lower-greek/lower-latin/upper-latin/hebrew/armenian/georgian/cjk-ideographic/hiragana/katakana/hiragana-iroha/katakana-iroha/footnotes

Example:

{ list-style-type : upper-roman}
list-style-position ?%/?px

Example:

list-style-position : 20px
list-style-image none/url

Example:

list-style-image : url(‘hackrhome.gif’);
marker-offset auto/?px

Example:

marker-offset : auto
Animations
Property Values Example
animation-name none/ID animation-name : myfirstanim
animation-duration time animation-duration : 5s
animation-timing-function ease/linear/ease-in/easeout/ease-in-out/cubic-Bezier(number, number, number, number) animation-timing-function : linear;
animation-delay time animation-delay : 5ms
animation-iteration-count inherit/number animation-iteration-count : 5
animation-direction normal/alternate animation-direction :  alternate
animation-play-state running/paused animation-play-state : running
animation-fill-mode None/backwards/ forwards/both/initial/inherit animation-fill-mode : both
Outline
Property Values Example
outline-color Color name outline-color : green
outline-style none/dotted/dashed/solid/double/groove/ridge/inset/outset outline-style : solid
outline-width thin/medium/thick/?px outline-width : medium outline-width : 20px
outline-offset inherit/?px outline-offset :  15px
Hyperlink
Property Values Example
target-name current/root/parent/new/modal/"string" target-name : parent
target-new tab/window/none target-new : window
target-position front/back/above/behind target-position : front
Paged Media
Property Values Example
fit fill/hidden/meet/slice fit : fill
fit-position top/center/bottom or left/center/right ?%/?px fit-position : top 35%
orphans integer orphans : 4
image-orientation auto/angle (deg/rad/turn/grad) image-orientation : 0grad
page auto/id page : auto
page-break-after auto/always/avoid/left/right page-break-after : always
page-break-before auto/always/avoid/left/right page-break-before: left
page-break-inside auto/avoid page-break-inside : avoid
size auto/landscape/portrait/?px Size : landscape
windows integer Windows : 4
Positioning
Property Values Example
bottom/right/top/left auto/%/length bottom: 20% top : auto left : 40px right : 25px
z-index auto/number z-index : 2
clip shape/auto clip : auto
position fixed/static/relative/absolute position : static
Transitions
Property Values Example
transitions-delay time (ms/s) transitions-delay : 20ms
transitions-duration time (ms/s) transitions-duration : 2s
transitions-property none/all transitions-property: none
transition-timing-function ease/linear/ease-in/ease-out/ease-in-out/cubicBezier(number, number, number, number) transition-timing-function: ease-in-out;
3D / 2D Transform
Property Values Example
backface-visibility visible/hidden backface-visibility : hidden
perspective length | none | initial | inherit perspective : 100px
perspective-origin [ [?%/?px/left/center/right ] [?%/?px/top/center/bottom ]] ?px ]/[ [ [ left/center/right ] or [ top/center/bottom ] ] ?px ] perspective-origin : 10px 30px perspective-origin : 10% 30% perspective-origin : left center;
transform none/matrix/matrix3d/translate3d/tranlateX/translateY/translateZ/scale/
scale3d/scaleX/scaleY/scaleZ/rotate/rotate3d/rotateX/rotateY/rotateZ/
skewX/skewY/skew/perspective		 transform: skewy(40deg); transform: scalex(10); transform: rotate(50deg);
transform-origin [ [ [ ?%/?px/left/center/right ] [ ?%/?px/top/center/bottom ]? ] <length> ]/[ [ [ left/center/right ] or [ top/center/bottom ] ] ?px ] transform-origin : 20% 50%; transform-origin : center; transform-origin : 20px 50px;
transform-style flat/preserve-3d transform-style : preserve-3d
Speech
Property Values Example
cue-before – play a sound file before an element url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit] .voice;
cue-after - play a sound file after an element url [ silent | x-soft | soft | medium | loud | x-loud | none | inherit] .voice;
pause Time pause: 25ms
pause-before <time> | none | x-weak | weak | medium | strong | x-strong pause-before : 25ms
pause-after <time> | none | x-weak | weak | medium | strong | x-strong pause-after : 25ms
phonemes – give a phonetic pronunciation to elements <string> #computer
voice-stress normal | strong | moderate | none | reduced voice-stress : moderate;
voice-pitch <frequency> && absolute | [[x-low | low | medium | high | x-high] || [<frequency> | <semitones> | <percentage>]] voice-pitch: high; voice-pitch: 350hz; voice-pitch: 45%
voice-duration auto | <time> voice-duration: auto; voice-duration: 60s;
voice-volume silent | [[x-soft | soft | medium | loud | x-loud] || <decibel>] voice-volume: 25db; voice-volume: silent; voice-volume: soft;
voice-family [[<name> | <generic-voice>],]* [<name> | <generic-voice>] | preserve <generic-voice> = [<age>? <gender> <integer>?] voice-family : “child”, “female”
voice-rate [normal | x-slow | slow | medium | fast | x-fast] || <percentage> voice-rate: slow; voice-rate: 30%;
speak none | normal | spell-out | digits | literal-punctuation | no-punctuation | inherit-number speak : none;
caption-side – position for table caption top | bottom | left | right | inherit caption-side: left;
rest-before <time> | none | x-weak | weak | medium | strong | x-strong rest-before: medium; rest-before: 20ms;
rest-after <time> | none | x-weak | weak | medium | strong | x-strong rest-after: medium; rest-after: 20ms;
Pseudo-class
Property Meaning
:active the active element
:focus Element in focus 
:link an unvisited link
:enabled an element when enabled
:disabled an element when disabled
:hover element when you mouse over 
:checked Checked element
:selection  an element currently selected or highlighted by the user
:lang allows the author to specify a language to use in a specified element
:nth-child(n) an element that is the nth sibling
:nth-last-child(n) an element that is the nth sibling counting from the last sibling
:first-child first sibling
:last-child last sibling
:only-child only child element
:nth-of-type(n) an element that is the n-th sibling of its type
:nth-last-of-type(n) n-th sibling of its type counting from the last sibling
:first-of-type first sibling of its type
:last-of-type an element that is the last sibling of its type
:only-of-type only child of its type
:empty Element with no children
:root Root element of the document
:target Target specified by a URL
:not(x) element not represented by the argument ‘x’
Pseudo-element
Property Meaning Example
::first-letter Adds special style to the first letter of a text p::first-letter {    font-size: 150%;   color: #FFF00; }
::first-line Adds special style to the first line of a text p::first-letter {    font-size: 150%;   color: black; }
::before Inserts some content before an element p::before {    content: "Welcome to hackr: "; }
::after Inserts some content after an element p::after {    content: "Thank you for watching"; }

Absolute Measurements

Symbol Representation
% percentage
ms millisecond
s second
in inches
mm millimetre
cm centimetre
pt point (1/72 inch)
pc pica (12 points)
Angles/Time/Frequency
Unit Representation
deg degree
grad gradient
rad radian
turn turns
ms millisecond
s second
Hz hertz
khz kilohertz
Relative measurement
Unit Representation
px pixel of the device
gd grid defined by layout-grid
em font size of current element
rem font size of root element
ex x-height of the element’s font
vh viewport height
vm viewport height or width (lower value)
vw viewport width
Selector types
Type Meaning Example
class multiple elements of various types .class
id single element #id
universal applicable to all elements *
group apply style to multiple elements p h1 h2
type element of the specified type p
tree descendant element that is below another (any level) # elementname h3
child element one below the parent element # elementname > h3
sibling  adjacent general adjacent share the same parent and in the same immediate sequence general share the same parent but can be in any sequence h2 + p h2 ~ p
Generated Content
Property Value Example
bookmark-label Content/attr/label string bookmark-label : “This is bookmark”
bookmark-level None/integer bookmark-level : 2;
bookmark-target Self/url/attr bookmark-target : url(http://hackr.io);
counter-reset None/number counter-reset : 5
crop Auto/shape Crop : auto
display none/inline/block/inline-block Display : block;
content normal | none | inhibit  url Content : normal
float-offset length  float-offset : 20px 20px
hyphenate-after auto/integer hyphenate-after : 15
hyphens none/auto/manual hyphens : manual
hyphenate-lines no-limit/integer hyphenate-lines : no-limit
hyphenate-resource none/url hyphenate-resource : url(http://hackr.io)
hyphenate-before auto/integer hyphenate-before : 10
hyphenate-character auto/string hyphenate-character : “\1234”
counter-increment none/number counter-increment : 10
marks crop | cross/none marks : crop
move-to normal/here/id move-to : normal
image-resolution auto/normal/dpi image-resolution : auto
page-policy start/first/last page-policy : last
quotes none/string quotes : “’” “’”
string-set [id string] [id string] string-set : header content();
text-replace none [string string] text-replace : “foo” “bar”
Line Box
Property Value Example
alignment-adjust auto | baseline | before-edge | text-before-edge | middle | central | after-edge | textafter-edge | ideographic | alphabetic | hanging | mathematical length | % alignment-adjust : middle
alignment-baseline baseline | ise-script | beforeedge | text-before-edge | afteredge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical alignment-baseline : hanging
drop-initial-after-align central | middle | after-edge | text-after-edge | ideographic | alphabetic | mathematical | % drop-initial-after-align : 30%
drop-initial-before-align caps-height | <alignment-baseline> drop-initial-before-align : central
drop-initial-before-adjust before-edge | text-before-edge | central | middle | hanging | mathematical | length | % drop-initial-before-adjust : 10px drop-initial-before-adjust : 10% drop-initial-before-adjust : middle
drop-initial-value initial integer drop-initial-value : 20
drop-initial-size auto integer % line drop-initial-size : 25%
baseline-shift sub | super | length % baseline-shift : super
dominant-baseline baseline/hanging/middle dominant-baseline : middle x=25 y = 50
line-stacking-shift consider-shifts | disregard-shifts line-stacking-shift : disregard-shifts
line-stacking-strategy inline-line-height | block-line-height | max-height | grid-height line-stacking-strategy: max-height
inline-box-align Initial | last| integer  inline-box-align : 2 inline-box-align : initial
line-height Normal/number/ length/ % line-height : 30%
text-height auto | font-size | text-size | max-size text-height : auto
vertical-align Baseline | sub | super | top | text-top | middle | bottom | text-bottom length | % vertical-align : middle