<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="../../_utils/stylesheets/admin-tei.css"?>
<?oxygen RNGSchema="../schema/handout.rnc" type="compact"?>
<!-- To generate XHTML for browsing use the stylesheet at
  ../../_utils/stylesheets/admin.xslt. The command would be
  $ saxon css_cribsheet.xml ../../_utils/stylesheets/admin.xslt > css_cribsheet.xhtml
  presuming you have a "saxon" front-end that does the right thing.
  Could also add
  out-SystemLiteral=/Applications/oxygen/frameworks/xhtml/dtd/xhtml1-strict.dtd
  if desired.
-->
<TEI xml:lang="en-US" xmlns="http://www.tei-c.org/ns/1.0" version="P5.1.0.1">
  <teiHeader>
    <fileDesc>
      <titleStmt>
        <title>XSLT Workshop: Basic CSS Crib Sheet</title>
        <author xml:id="jf">Julia Flanders</author>
        <author xml:id="sb">Syd Bauman</author>
        <author xml:id="mholmes">Martin Holmes</author>
      </titleStmt>
      <publicationStmt>
        <p>An unpublished document used for training.</p>
        <p>Available under GFDL, no invariant sections</p>
        <p>Copyleft 2011 Martin Holmes, Syd Bauman &amp; Julia Flanders</p>
      </publicationStmt>
      <sourceDesc>
        <p>Content adapted from <name type="filePath">css_cribsheet.xml</name>.</p>
      </sourceDesc>
    </fileDesc>
    <revisionDesc>
      <change when="2011-03-07" who="#mholmes">
	<list>
	  <item>Created the document</item>
	</list>
      </change>
    </revisionDesc>
  </teiHeader>
  <text>
    <body>
      <p>This is a very brief reference sheet 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 <ref target="http://www.w3schools.com/css/">http://www.w3schools.com/css/</ref>.</p>

      <div type="section">
        <head>CSS Rulesets</head>
        <figure>
          <graphic url="../../_utils/gfx/css_ruleset_06.png" mimeType="image/png" width="780px" height="610px" />
          <figDesc>The components of a ruleset.</figDesc>
        </figure>
        <p>A CSS stylesheet is essentially a group of rulesets. Rulesets are made up of three
          things: <list type="gloss">
            <label rend="CSS( font-weight: bold; )">selectors </label><item>These are how you select which elements or groups of elements in your
              document will be affected by the style information.</item>
            <label rend="CSS( font-weight: bold; )">properties </label><item>These identify the style properties (such as size or color) that are
              being controlled.</item>
            <label rend="CSS( font-weight: bold; )">values </label><item>Each property has a specific value indicating the size, color, margin, or other style information that is being applied.</item>
          </list>
	  <p>See next page for more detailed discussion of each</p>
        </p>
      </div>

      <div type="section">
        <head>Selectors</head>

        <p>A selector is the way you identify the elements or groups of elements that will be affected
          by your style information. A selector may be simply the name of an element, or they may
          take into account the nesting of the element, or a specific attribute value. </p>
        <p>Here’s a list of the most common selectors and their syntax. 
        <list type="gloss">
          <label rend="CSS( font-weight: bold; )">element:</label> <item>h1{font-size: 125%;}</item>
          <label rend="CSS( font-weight: bold; )">element descendant-element:</label> <item>p strong{font-style: italic;}</item>
          <label rend="CSS( font-weight: bold; )">element.class:</label> <item>span.speakerName{font-weight: bold;}</item>
          <label rend="CSS( font-weight: bold; )">element #id:</label> <item>div#menu{background-color: grey;}</item>
        </list>
        </p>
      </div>
      <div type="section">
        <head>Properties and values </head>
        <p>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 <q>larger</q> or <q> smaller</q>).
          <list type="unordered">
            <item>display: none | block | inline</item>
            <item>margin-left, margin-right, margin-top, margin-bottom: 1em | 2ex</item>
            <item>padding-left, padding-right, padding-top, padding-bottom: 1em | 2ex</item>
            <item>border: thin solid blue;</item>
            <item>text-align: left | right | center | justify</item>
            <item>line-height: %</item>
            <item>text-indent: 1em | 48px</item>
            <item>text-decoration: underline | overline</item>
            <item>font-size: xx-small | x-small | small | medium | large | x-large | xx-large</item>
            <item>font-size: % | smaller | larger</item>
            <item>font-style: normal | italic</item>
            <item>font-weight: normal | bold</item>
            <item>font-family: serif | sans-serif | cursive | fantasy | monospace</item>
            <item>color: red | #99AABB</item>
            <item>background-color: red | #99AABB</item>
            <item>background-image: url("./image.png")</item>
            <item>background-repeat: repeat | repeat-x | repeat-y | no-repeat</item>
            <item>background-attachment: scroll | fixed</item>
            <item>background-position: ( top | center | bottom ) ( left | center | right )</item>
            <item>background-position: 20% 70%</item>
          </list>
          For more detailed information on CSS colors, see <ref target="http://www.w3schools.com/css/css_colornames.asp">http://www.w3schools.com/css/css_colornames.asp</ref>.
        </p>

      </div>
    </body>
  </text>
</TEI>
