CSS Cribsheet

[Teaching resource created by the Humanities Computing and Media Centre. https://hcmc.uvic.ca/workshops/tei_intro/handouts/basic_css_cribsheet.htm. See also slides from HCMC presentation: https://hcmc.uvic.ca/workshops/xml_css/xml_and_css.pdf]

CSS (Cascading Stylesheet) code can be used in the new TEI @style attribute. It is a very effective way of describing the appearance and positioning of text in a formal, standardized language.

A CSS rule looks like this:

property: value;

For example:

font-style: italic;

CSS rules can be chained together, separated by semi-colons:

font-style: italic; font-weight: bold;

This is a very brief reference sheet rather than an exhaustive list of CSS terms: it is intended to provide you with a way to look up the information you’re most likely to need right away. For detailed information about CSS syntax, selectors, and properties, visit the W3C’s CSS tutorial pages at http://www.w3schools.com/css/.

Properties and values

Here’s a list of common properties and their most common kinds of values. Note that some properties (especially those that govern size) can be measured in several different ways. Some of the measurements are in absolute units such as pixels; others are relative to the font size (for instance, ems), and others are relative to the surrounding text (for instance, percentages or larger or smaller).

  • display: none | block | inline
  • margin-left, margin-right, margin-top, margin-bottom: 1em | 2ex
  • padding-left, padding-right, padding-top, padding-bottom: 1em | 2ex
  • border: thin solid blue;
  • text-align: left | right | center | justify
  • line-height: %
  • text-indent: 1em | 48px
  • text-decoration: underline | overline
  • font-size: xx-small | x-small | small | medium | large | x-large | xx-large
  • font-size: % | smaller | larger
  • font-style: normal | italic
  • font-weight: normal | bold
  • font-family: serif | sans-serif | cursive | fantasy | monospace
  • color: red | #99AABB
  • background-color: red | #99AABB
  • background-image: url(“./image.png”)
  • background-repeat: repeat | repeat-x | repeat-y | no-repeat
  • background-attachment: scroll | fixed
  • background-position: ( top | center | bottom ) ( left | center | right )
  • background-position: 20% 70%

For more detailed information on CSS colors, see http://www.w3schools.com/css/css_colornames.asp