Styling Text - jpjohnsonjr/learning-notes GitHub Wiki

Common styling commands

font-family

Start with the desired specific font, then a common generic version, followed by the characteristic. For example:

p {
  font-family: "Times New Roman", Times, serif;
}

This means: "Prefer 'Times New Roman"; if not available, use something from the Times family; if that's not available, at least use a serif font.

color

While most of the examples in the course so far use literal names, may be better to use hexidecimal values, i.e.:

color: #0000ff

List of color codes is available on CSS References page.

font-style

Most commonly, this is whether the font is italic or normal, i.e.,

font-style: italic;

font-weight

Used to make the text bold or not. Can be specified w/ weights of 0-900, but is most commonly just expressed as:

font-weight: bold;

font-size

Specifies font size in pixels. For example:

font-size: 24px;

Default size for most browsers is about 16px. Don't confuse with points. Points are for print. Pixels for on-screen. Pixels are considered absolute, but they do have a relative component related to the device. High-resolution displays display a sharper image by providing higher dpi; for low DPI devices, one pixel is one device pixel dot, for higher resolution, multiple.

text-transform

Using:

text-transform: capitalize;

... will transform every word to start with capital letter.

Others:

text-transform: lowercase;

... forces all letters to be lowercase.

text-transform: uppercase;

... forces everything into capital letters.

text-align

Attributes:

  • center
  • left
  • right
  • justify

Relative font sizing

Two covered:

  • Percent
  • ems

Relative sizing has a cumulative effect. So, specifying a percent size increase followed by an em increase will measure the ems in terms of the already-increased size. Specifying 2em and then 2em again in a child element will make the result actually 4em. Going back to 2em on the next child requires .5em.(!)

The advantage of using relative font-sizes is that relative sizes stay the same when zoomed.

Percent

Usage:

body {
  font-size: 120%;
}

Increase the font size to 120% of the default. (For most browsers, calculates to a little over 19px.)

ems

An em is a unit of measurement equivalent to the width of the letter m in the given font. Usage:

font-size: 2em;