Web Platform CSS

Styling Text

Colour

Use color and background-color. You can use any valid CSS colour for this.

body {
  color: grey;
  background-color: rgb(116, 237, 202);
}

Typeface

font-family is used to define an ordered list of typeface families that the browser should try to use to render the element. The browser will try to use the first typeface first, but if it isn't installed on the device, try the next one and so on:

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

Note that we use serif as the very last option, meaning that if all else fails, just load a serif typeface. We'll typically specify serif, sans-serif or monospace as last resort typeface families.

Also note that "Times New Roman" is wrapped in inverted commas because its name consists of multiple words.

Resources

Reference

Appearance

Type size can be set using the font-size property, and using a size unit.

html {
  font-size: 10px;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 120%;
}

In the above example, we set an absolute pixel-based size for the document, which in turn will regulate what 'em' and 'rem' units will mean. H1 is assigned '2rem' (twice the m-height of the body), while H2 is assigned a font size relative to its container.

Generally, 'rem' is the preferred way of setting font size. Use a percentage or em if you want your font size to relate to parent element's font size.

Setting font-style is how you can produce italic:

.poetry {
  font-style: italic;
}

And to change the weight of the typeface (most likely to make it bold), use font-weight:

.important {
  font-weight: bold;
  color: red;
}

Reference

Typesetting

line-height is roughly related to the idea of leading - setting the vertical spacing between lines of text. It's recommended to use a unitless line height, which means it will depend on the font size:

.intro {
  line-height: 1.1;
}

The margin and padding properties can be useful for typesetting. There are a few ways to set them.

You can set each margin/padding on its own:

.intro {
  margin-left: 1rem;
  margin-bottom: 1.1rem;
}

Or set them together, by listing the top, right, bottom, left margin/padding in order:

.intro {
  margin: 0 0 1.1rem 1rem;
  padding: 1.1rem 0.5rem 0.1rem 2rem;
}

Use 0 for margins you want to remove, or the word auto to let the browser figure it out. If you want to set all the margins/paddings to be the same, you can just provide a single length, for example: margin: 1rem

You can change the alignment of text with text-align, which allows you to set left, right, center and justify options, for example:

.intro {
  text-align:center;
}

More typesetting properties:

Tips

You can set a few different typeface parameters with the font property in one line:

.important {
  font: bold 2em "Courier New", monospace;
}

Read more

More properties

There are a lot of other CSS properties which affect how text is displayed: