CSS values, units, lists, links

Dr. Greg Bernstein

August 18, 2020


  1. CSS values and units. Important.

  2. Styling Lists. Just a bit.

  3. Styling Links. The section on links as buttons.

CSS Values and Units

Length and Size

Absolute Units

  • Pixels (px) are referred to as absolute units because they will always be the same size regardless of any other related settings.

  • mm, cm, in: Millimeters, centimeters, or inches.

  • pt, pc: Points (1/72 of an inch) or picas (12 points.)

Length and Size

Relative Units

  • em: 1em is the same as the font-size of the current element
  • rem: The rem (root em) works in exactly the same way as the em, except that it will always equal the size of the default base font-size
  • vw, vh: Respectively these are 1/100th of the width of the viewport, and 1/100th of the height of the viewport.


You can also use percentage values to specify most things that can be specified by specific numeric values. This allows us to create, for example, boxes whose width will always shift to be a certain percentage of their parent container’s width.

body {
    width: 70%


  • Keywords such as red, green there are a ton
  • Hex codes such as #e0b0ff. Your browser dev tools can help with these.
  • RGB values such as rgb(255,0,0)
  • HSL values such as hsl(0,100%,50%)

Colors with Transparency

  • RGBA codes such as rgba(255,0,0,0.5)
  • HSLA codes such as hsla(240,100%,50%,0.5)
  • via the separate opacity property

Styling Lists

List Specific Properties

  • list-style-type: Sets the type of bullets to use for the list, for example square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.
  • list-style-position: Sets whether the bullets appear inside the list items, or outside them before the start of each item.
  • list-style-image: Allows use a custom image for the bullet, rather than a simple square or circle.

Can use other properties!

  • line-height is very usefull.
  • Box model properties such as padding, margin, etc…

Controlling List Counting

  • start: Just what you think…
  • reversed: Just what you think…
  • value: Allows you to set specific numbers to <li>s.

For Examples…

See Styling links as buttons

// reveal.js plugins