Dimensions, Colors and Fonts
Mississippi College
Computer Science
Dr. Bennet
  1. CSS specifies sizes in several places. These need units, of which CSS has many. Just a few:
    1. Absolute units are allowed on a screen, but really only meaningful when a page is printed.
      1. Pixel, px. Being called pixel, one would expect some relation to the little colored dots on the screen, but the standard says it's just 1/96 of an inch. Go figure.
      2. Point, pt. It is 1/72 of an inch, a traditional unit in printing.
      3. in, cm, mm and several others.
    2. Font-relative units
      1. em, ex, the width of the letter m or x in the current font, so they adjust with context (current font size).
      2. rem, rex, the same, for the font size at the root element.
      3. lh, rlh, the line height at the current location, or for the root element.
    3. Display-relative units
      1. vh and vw each represent 1% of the viewport (browser window) height and width, respectively.
      2. vmin and vmax are the smaller and larger of vh and vw.
      3. There are several other versions to deal with optimizaions used for phone screens and other things. We'll skip that, I'm afraid.
    4. Percent, %.
      1. When applied to a font, it is relative to the normal font size.
      2. When applied to anything else, it is relative to the same dimsion of its container.
      3. If your only container is the page, you are much better off using vh and vw. Percentage sizes work for boxes which are inside others.
    [ Dimensions Source ]
  2. CSS Colors. CSS has many ways of specifying them.
    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.
      4. 00 = 0, 01 = 1, …, 09 = 9, 0A = 10, … 0F = 15, 10 = 16, … 1E = 30, 1F = 31, 20 = 32, …, 7F = 127, 80 = 128, …, FF = 255.
    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 the font this way does mean your page will contact Google whenever it loads.
      6. Google also permits you to download the font definition and host it yourself, avoiding this repeated connection.
    [ Google Fonts Source ]