> pictools > doc > stylesoverview
> pictools > doc > stylesoverview
Pictools: Building Sites and Pages
V3.3 (342)
Styles Overview
Styles: Where are they set? How do they override

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 #DFF light blue text
   background-color #FF6 yellow background
   border 1pt solid #0F0 border of solid green line 1pt wide
   font-family "Lucida Console", Monaco, "Courier New", Courier, monospace
   font-size 110%
   font-style italic
   font-weight bold
   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
   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

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;

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 doc/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/style.css
  5. In style.css in a parent of dir (up to SRCROOT)
  6. In /GeneralStyles.css
Copyright © 2016 ZweiBieren, All rights reserved. Jul 4, 2016 21:35 GMT Page maintained by ZweiBieren