The style of a tagged document segment dictates its apearance: font color, paragraph width, line spacing, etc. In the Cascading Style Sheets (CSS) standard, a style is described as a semi-colon-separated list of property-colon-value pairs. Red text, larger than normal, with hanging indentation could have these properties

color: red; font-size: 110%; margin-left: 12pt; text-indent: -12pt;

Many values have a unit specifier like cm for centimeters, pt for points, and em for em-width. There are 72 points per inch and 28.3 per centimeter. On a screen with 96 pixels per inch, one point is 4/3 pixels. 

Here are some common properties and typical values.

	property	sample value	notes
Color
	color	#DFF	light blue text
	background-color	#FF6	yellow background
	border	1pt solid #0F0	border of solid green line 1pt wide
Font
	font-family	"Lucida Console", Monaco, "Courier New", Courier, monospace
	font-size	110%
	font-style	italic
	font-weight	bold
Position
	margin	0pt 0pt 3pt 6pt	top right bottom left
	text-indent	-18pt;	1/4 inch outdent of first line;       relative to padding
	text-align	center
	vertical-align	middle
Size
	width	55pt	<div> size
	height	35pt	<div> size

See /GeneralStyles.css for more examples. That file is the default styles for Pictools documents.

The first and most direct route to associate a list of style properties with a tagged segment is to add a style attribute to the tag. The value of the attribute is the list itself, as in

<span style="background-color: #99FFCC;">
        text on green</span>

which produces text on green.

All other routes to define styles associate a selectorwith a list of style properties. The the property list is bracketed after the selector as in

.pdoc-dent {
      margin-left: 24pt;
      padding:  0pt;
}

Common selector syntaxes are

tagname

Applies to all elements with the given tag name. Example: h1

. classname

Applies to all elements having the given class. Example: .pdoc-dent

# id

Applies to the one element having the given id. Example: #top-title

The second route to defining styles applies to styles within a single document. The selector-styles list is the conents oe a <style> tag within the document's "HeadAdditions" section, as in

<style type="text/css">
    .pdoc-dent {
         margin-left: 24pt;
         padding:  0pt;
    }
    pre {
         font-family: "Lucida Console", monospace;
    }
</style>

The third route to defining styles is to place them in a .css file. The file contents are the selector-styles list, without the <style> tag. Usually the file is invoked for a Pictools document with a link in the "HeadAdditions" area, as in

<link href="style-file.css"  
   rel="stylesheet" type="text/css"/>

However, the Pictools template always links in /GeneralStyles.css and styles.css from the current and parent directories, so no <link> to these style files is needed.

In CSS, the last encountered definition for a given style property overrides prior definitions. For Pictools, this means that styles for dir/file have priority in this order.

1. Inline within an element's tag
2. Within a <style> element in file's "HeadAdditions" area
3. In a separate file linked from the"HeadAdditions" (and preceding the <style> element)
4. In dir/styles.css
5. In styles.css in a parent of dir (up to SRCROOT)
6. In /GeneralStyles.css