Dimensions, Colors and Fonts
  1. CSS specifies sizes in several places. These need units. CSS has several units. The book discusses these on Page 431.
    1. Pixel, px. The size of this depends on the monitor, and makes sense on a screen.
    2. Point, pt. The point unit is often used to express the size of a font. It is 1/72 of an inch.
    3. Picas, pc. 12 points.
    4. Inches, in, Centimeters, cm, Millimeters mm. Useful on paper.
    5. Ems, em. This is equal to the width of the letter m in the current font. It's different from the others because it changes when the font size changes.
    6. Exs, ex. This is equal to the height of the letter x, which changes like em.
    7. Percent, %. When applied to a font, it is relative to the normal font size. When applied to anything else, it is relative to the container size.
    8. Display units, vh and vw each represent 1% of the viewport (browser window) height and width, respectively.
    [ Dimensions Source ]
  2. CSS Colors. CSS has many ways of specifying colors.
    1. CSS defines several hundred colors by name. Welcome to the Internet paint store: darkred, gold, midnightblue, sandybrown, etc.
    2. Colors on a computer screen:
      1. Represented by three numbers, indicating the amount of each primary color: red, green and blue.
      2. Conventionally, each amount is given by an unsigned byte. That means a range 0–255.
      3. In hexadecimal (base 16), that is 00–FF.
    3. Can specify a color by six hexadecimal digits run together, giving the amount for red, green and blue. #000000, #A34491, #1256AB, #55BB33, #BBBB55, #555555
    4. Can alternatively specify three digits, which are doubled. #888, #1F3, #2AF, #902
    5. Can specify the three values in decimal with the rgb notation. rgb(10,145,170), rgb(0,0,255) or rgb(150,250,0)
    6. Can specify the three values using percentages. rgb(4%,57%,67%), rgb(0%,0%,100%) or rgb(59%,98%,0%)
    #
    rgb(, , )
    rgb(%, %, %)
  3. CSS Fonts.
    1. Fonts have four basic paramaters: family, style, size and weight.
    2. Families have two flavors
      1. Actual fonts available on the system, such as Arial or Helvetica. If the name contains spaces, you must use quotes, like "Times New Roman"
      2. Generic fonts defined for all systems: serif, sans-serif, cursive, fantasy and monospace.
      3. Specify as a comma-separated list. Uses the first one available.
      4. Always end with a generic, since they are always available.
      5. font-family: Verdana, Arial, Helvetica, sans-serif;
    3. Styles are normal, italic or oblique
      font-style: italic;
    4. Sizes
      1. Can be given as a dimension, usually points.
      2. Can be given as a percentage of the default size.
      3. Several absolute names, small, medium, large, x-small, xx-small, x-large and xx-large.
      4. Relative sizes smaller and larger.
    5. The weight is the boldness of the font.
      1. Usually just bold or normal.
      2. Also takes percentages of the default.
    6. Can specify all at once, but usually separately.
  4. Text Properties
    1. text-decoration: underline, overline, line-through.
    2. alignment: left, right, center and justify.
    3. Several others to control spacing and indents.
    [ Really Ugly Source ]
  5. Google Fonts
    1. HTML 5 allows fonts to be loaded dynamically by a web page.
    2. Google provides a large collection of these for free.
    3. Google has instructions for using them.
      1. Header: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=family">
      2. You can request multiple families using &amp; to combine them.
      3. Use font or font-family to set the font in the family.
      4. If a font name has spaces, use a + in the link tag, and put the name in quotes within CSS.
      5. Using one of these in your we page means everytime it loads, a web request is sent to a Google server, which may have privacy implications. Google has this to say about that.
    [ Google Fonts Source ]