CSS tutorial

Values

Value of css property can be represent by explicit numeric value, predefined names like inline-block, previously declared variable or via special functions.

Absolute length units

Absolute length units are not recommended for use on screen, because screen sizes vary so much.

unitsexplanationexample
px pixels
(1px = 1/96th of 1in)		 
div {
border-width: 1px;
width: 2in;
}
pt points
(1pt = 1/72 of 1in)
pc picas
(1pc = 12 pt)
in inches
(1in = 96px = 2.54cm)
cm centimeters
mm millimeters

Relative length units

Relative units uses for adaptive pages.

unitsexplanationexample
em font-size of the element 
div {
height: 40rem;
}
rem relative to font size of the root element. Use html or :root selectors for change font size. Default value of size is 16 pixels, in this case:
  • 1rem = 16px
  • 0.75rem = 12px
  • 1.5rem = 24px
  • 2rem = 32px
vw 1% of the width of the viewport
vh 1% of the height of the viewport
vmin 1% of viewport's smaller dimension
vmax 1% of viewport's larger dimension
% 1% of the parent element

Color values

Color value can be assigned by name, hex number, or via special functions.

explanationexample
#RRGGBB RR,GG,BB are hexadecimal numbers 
 div {
color: red;
/* green */
background-color: rgb(0,255,0);
/* blue */
border-color: #0000FF;
...
}
functions Some css functions like rgb (r,g,b)
predefined
name		 Names like
  • none
  • transparent
  • red
  • green
  • blue
  • white
  • coral