Line height

• line height is calculated from the middle – half the height is pushed above, half below
• can set line height to a number proportional to the font size
  • could also set a fixed px/rem/em value
• generally recommends a line-height: 1.6 on the body (default is 1.4)

Text-transform

• can use text-transform: uppercase; to make your text uppercase; this is better than modifying the text itself, because it can be changed with one line of CSS
• can also set text-transform: capitalize; to capitalize first letter of each word

Letter spacing

• all-caps text is a bit hard to read without some extra letter spacing
• can set letter-spacing: 1px; unlike line height, need to provide an actual unit (e.g. rem, em, px)
• generally recommends 1px
• since text-transform and letter-spacing are typography properties, they are inherited from the parent

Alpha channel

• can use rgba(X, Y, Z, W) to set an opacity (alpha channel) on your color property
  • the value of the alpha channel should be a number between 0 and 1
  • so e.g. rgba(255, 255, 255, 0.65) is a white color with slight transparency
• you can technically do this with hex values as well: the hex value #aaeeff00 provides values for red, green, blue, and alpha with each pair of digits

Background images

• use background images if you want to display something on top of your image
• style: background-image: url(path/to/file.jpg);
• by default, the image will tile to repeat
• other properties:
  • background-position: the starting coordinates for the picture (horizontal, then vertical)
    • can also use keywords like center, left (match left side of image with left side of container), bottom (match bottom of image with bottom of container), top, right
  • background-size: set the size of the image (width, then height)
    • can also use keywords like contain (ensures you can see the whole image, repeats as needed), cover (fills the space with the image, and crops as needed). reference here
  • background-repeat: no-repeat, repeat-x, repeat-y, repeat