Cascading Style Sheets (CSS)

CSS Basic
HTML was originally designed as a document description language that was device independent. Then it added more tags such as font for typography. HTML 4.0 is back to its origin and uses Cascading Style Sheets (CSS) for its presentation. New CSS web pages clarify the document structure and presentation. Snaml prompts to use CSS to control web content as new browsers have implemented all CSS functions.
- Cascading Style Sheets (CSS)
  CSS is defined by rules. In Snaml the rule command has the format:
```
rule selector {property: value; ...}
```
  The first argument is called selector. Usually it is an element name of HTML. There are four kinds of selectors: type, attribute, contextual, and pseudo. The second argument in a curly brace is called declaration. It is a list of property and value pairs separated by ';'. Each pair is represented as 'property: value'. Note rule is a special block command with two arguments. It has no end command and content. You can think of it as an empty command with the start command representation.
```
rule p {color: blue; font-size: 12pt;
  font-family: sans-serif; background: white}
```
  where 'p' is an XHTML element; 'color' is a property of a pargraph; and blue is the value of the 'color'.
  
  One way to add rules into an XHTML document is to use _style command in a document.
```
_head
  _title; _quote {CSS Demo}; title_
  _style {type='text/css'}
  _comment
    rule body {color: black; background: white;}
    rule h1 {color: green}
  comment_
  style_
head_
```
  The type value 'text/css' of the _style command is also a default value. A browser that is unknown the CSS rules will ignore all the _rule commands as the content of the _comment command.
  
  Another method uses _link command.
```
__link {rel='stylesheet' type='text/css'
  href='http://neatware.com/file.css'}
```
  A browser will get a CSS specification from file.css. The 'rel' attribute value 'stylesheet' specifies that the URL is a CSS file. Simply refering to another CSS file, you can change the presentation of a HTML document dramatically.
- Hierarchy and Inheritance
  A XHTML document has a hierarchy. The XHTML element is the root of an XHTML document. Both HEAD and BODY are elements inside the XHTML and they are children of XHTML. Therefore XHTML is the parent of them. Other elements may be embedded into an XHTML document in the same way. There are no overlap for two block elements. Explicitly, for Snaml, if one start command is inside the content of a block command but its end command is outside the content, this document is illegal.
  
  The hierarchy of XHTML document makes sense to the inheritance of CSS. Child elements will inherit the CSS properties from their parents. If a child and a parent share the same property but with different values, the child's value will override the parent's value in the scope of the child. It is called attribute inheritance.
```
rule body {font-family: arial, sans-serif;}
rule h1 {font-family: times, serif;}
```
  The h1 will use times font in its context. Note the background property does not inherit. It is a global presentation property for a document.
  
  Generally a browser provides a default CSS setting for XHTML document. It is the environment for document presentation. The CSS declaration of an XHTML document will override the same properties in the default setting.
- Grouping
  Selectors can be grouped with comma-separated lists.
```
rule {h1, h2, h3} { font-family: arial }
```
  Declarations can also be grouped by ';' as well.
```
rule  h1 { 
  font-weight: bold; 
  font-size: 12pt;
  line-height: 14pt;
  font-family: arial; 
  font-style: normal;}
```
  In addition, font, color, and margin properties have their own grouping syntax. Following example is equivalent to the previous one
```
rule h1 { font: bold 12pt/14pt arial }
```
Selectors
- Type Selectors
  Type selector may be any one of XHTML element such as h1.
```
rule h1 {color: blue}
```
- Attribute Selectors
  There are CLASS, ID, and Style attributes.
  - CLASS Attribute
    You may add class attribute into an XHTML command. It classifies a group of elements and makes them easy to change. Class name must be a character string without special symbols except hyphens and underscores. The selector starts with a dot '.' prefix in a rule command. A selector can only declare one class attribute.
```
_ol
  _li {class='deep'};  quote "red";   li_
  _li {class='light'}; quote "green"; li_
  _li {class='deep'};  quote "blue";  li_
ol_
```
    .deep is a class selector. A rule is
```
rule .deep {font-weight: bold}
```
  - ID Attribute
    ID attribute specifies a unique value over an XHTML document. The selector starts with the #.
```
rule #ProductID {font-family: times}

_h1 {id='ProductID'}
  quote {Product Information}
h1_
_em {id='ProductID'}
  quote {Web Builder}
em_
```
  - Style Attribute
    Style attribute may embed into an XHTML element. In the following example, the selector is the element command name that the style attribute is embedded. Since this method mixed the document structure and its presentation, it is discouraged to use CSS in this way
```
_h1 {style='color: black; font-weight: bold'}
  quote {Style Attribute}
h1_
```
- Contextual Selectors
  This selector allows you to apply rules on the context of an XHTML document. The selector elements are separated by whitespace. The preceding element is the parent of the later elements. In the following example, the last rule expresses that if em is inside the h1 then it has the weight italic, otherwise it is bold. This makes em distinguish even if it is in the context of h1.
```
rule h1 {font-weight: bold}
rule em {font-weight: bold}
rule {h1 em} {font-weight: italic}
```
- Pseudo Selectors
  - Anchor pseudo-classes
    Pseudo selector has the format element:attribute . For example, psedo-classes selector displays newly visited anchors differently from older ones for an _a command is, All the '_a' command with an 'href' attribute will belong to one of the above group.
    
    unvisited link rule {a:link} {color: blue}
    
    visited links rule {a:visited} {color: yellow}
    
    active links rule {a:active} {color: lime}
  - The 'first-line' pseudo-element
    The 'first-line' pseudo-element applies special styles to the first line of a paragraph.
```
_head
  _style type='text/css'
    rule {p:first-line} {font-style: small-caps}
  style_
head_
_body
  _p 
    quote {News report from New York.}
  p_
body_
```
  - The 'first-letter' pseudo-element
    To generate typographical effects on the first letter with drop caps, the 'first-letter' pseudo-element is used in the CSS.
```
_html "xmlns='http://www.w3.org/1999/xhtml' 
  xml:lang='en' lang='en'"
_head
  _title; quote {First Letter}; title_
  _style {type='text/css'}
    rule p {font-size: 12pt; line-height: 12pt}
    rule p:first-letter {font-size: 200%; 
                         float: left}
    rule span {text-transform: uppercase}
  style_
head_
_body
  _p
    _span
      quote {This is}
    span_
    quote {a word of ant research.}
  p_
body_
html_
```
Formatting
CSS1 assumes each element is bounded in one or more bounding box. Content is the core. A padding area surrounds the core; a border area surrounds the padding area; and a margin area surrounds the border. From inner to outer order they are core, padding, border, and margin area. The box size is the sum of content, padding, border, and margin size. However, the padding and margin properties are not inherited.
- Block Elements
  Block elements have vertical and horizontal formatting.
  - Vertical Formatting
    The margin width specifies the minimum distance to the edges of surrounding boxes. Two or more adjoining vertical margins are collapse to use the maximum of the margin values.
  - Horizontal Formatting
    Seven properties, 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' and 'margin-right', determines the horizontal position and the size of a block element. Their sum is equal to the 'width' of their parent element.
- List Item Elements
  It presents list item. The first rule shows the list marker is outside the list box. The second rule shows the list marker is inside the list box.
```
rule ul         { list-style: outside }
rule ul.compact { list-style: inside } 
```
- Floating Elements
  By setting the 'float' property to left, a box is moved to the left until it reaches to the margin, border, padding, or border of another block-level element. The normal text flow will wrap around on right side of the box.
```
_html "xmlns='http://www.w3.org/1999/xhtml' 
  xml:lang='en' lang='en'"
_head
  _style {type='text/css'}
    _comment
      rule img { float: left }
      rule {body, p, img} { margin: 2em }
    comment_
  style_
head_
_body
  _p
    __img {src=image.gif}
    quote {Explain the image.}
  p_
body_
html_
```
- Inline Elements
  'em' and 'strong' are typical inline elements. They share space with other box elements.
- Replaced Elements
  'img' is a replaced element. Its position and size will be replaced by the src attribute.
Property
- Font Property
  Font is a specific size and variation of a typeface. Usually, it is measured in point. One point (pt) is equal to 1/72 inch in the CSS; an em unit of width is equal to 12pt; and an ex unit is equal to the x-height of a font.
  
  A font belongs to one of five generic family: serif, sans-serif, monospaced, cursive, and fantasy. Firstly, Serif means decorative cross stroke. Time New Roman is a default serif font on Windows. Secondly, Sans-serif is a font without serifs. Arial and Helvetica are sans-serif font on Windows and Mac respectively. Thirdly, Monospaced font occupies the fixed width space. Courier is this kind of font. Other fonts have the variation width space. Furthermore, Cursive is the handwritten font. It is useful for headlines and decorative letters. The examples include Brush Script, Vivaldi, and Comic Sans. Finally, Fantasy is decorative font for text effection. There are Engraver, Impact, and Revue.
  
  There are a group of font properties. 'font-family' specifies font name and generic family; 'font-weight' may be normal (default), bold, and bolder, it may also be one of a number value of 100, 200, 300, 400, 500, 600, 700, 800, and 900 where smaller number is lighter; and 'font-style' may have the value normal (default), italic, and oblique. To render lowercase letters as a small version of the uppercase letters, you can declare the 'font-variant' property with the value small-caps. Its default value is normal.
  
  Finally, 'font-size' specifies the size of a font, its value may be absolute, relative, lenght, and percentage. The absolute size may be one of a value xx-small, x-small, small, medium, large, x-large, and xx-large. The relative size may be the value smaller or larger. They are relative to the parent size. The length size is the exact value with unit point (pt), inch (in), millimeter (mm), or centimeter (cm). Percentage size is represented as the n% where n is a number.
  
  Sometimes it is convenient to select all the font property in a rule. For example:
```
{font-family: arial, helvetica, sans-serif}
{font-weight: bold}
{font-style: oblique}
{font-variant: small-caps}
{font-size: 12pt}

{font: arial, helvetica, sans-serif, 
       bold, oblique, small-caps, 12pt}
```
- Color Property
  You can set color to be name such as red or RGB value. To background, 'background-color' may be a color value or 'transparent' (default); 'background-image' may be a url pointer to an image file or a value 'none'; 'background-repeat' specifies how to repeat the background image, it may be a value 'repeat' (default), 'repeat-x', 'repeat-y', and 'no-repeat'. In addition, 'background-attachment' determines whether a background image is 'fixed' or 'scroll' along with the content. Finally, 'background-position' specifies the initial position of a background image where '0% 0%' is the default value. It maybe a percentage or length pair. The combination from top, center, bottom and left, center, right may also construct a pair. The 'background' property is a shorthand that specifies a group of background properties.
```
{color: red} 
{color: rgb(255,128,64)}
{background-color: #FF00FF}
{background-image: url(mosaic.gif)}
{background-repeat: repeat-y}
{background-attachment: fixed}
{background-position: 0% 0%}

{background: url(abc.png) gray 50% repeat fixed}
```
- Text Property
  Text property describes a text. 'text-decoration' property specifies a text line with value 'underline', 'overline', 'line-through', and 'blink'. To convert letters to uppercase or lowercase, you can set the 'text-transform' to be 'uppercase' or 'lowercase'. The value 'capitalize' will set first letter to be uppercase and the value 'none' (default) does nothing. To control text alignment, 'text-align' specifies alignment of text with one of a value 'left', 'right', 'center', and 'justify'. 'vertical-align' specifies text position with the value 'baseline' (defult), 'sub', 'super', 'top', 'text-top', 'middle', 'bottom', 'text-bottom', and 'percentage'. In addition, 'text-indent' is the indent of text with the value of length or percentage. Finally, 'letter-spacing', also known as kerning, is the width between two letters with value 'normal' (default) or a value 'length'; 'letter-height', also called leading, is the spacing between lines and may be the value normal (default), number, length, and percentage.
```
{text-decoration: line-through}
{text-transform: capitalize}
{text-align: justify}
{text-indent: 0.2em}
{vertical-align: middle}
{letter-spacing: normal}
{letter-height: 20%}
```
- Box Property
  Any element is in a bounding box. An element's content area is surrounded by padding, border, and margin areas in order. The box width is the sum of the content width and two times padding, border, and margin widths.
  - Margin
    
    Margin maybe the value of length, percentage, and auto (default). The properties of 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' specify the top, righ, bottom, and left margin respectively. The 'margin' property is a shorthand for all of them.
```
{margin-top: 2em}
{margin-right: 33.3%}
{margin-bottom: 2px}
{margin-left: 1in}
{margin: 2em}
{margin: 1em 2em}
{margin: 1em 2em 3em 4em}
```
  - Border
    Border may have the value 'thin', 'medium', and 'thick'. The properties of 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' specify the corresponding border with a value 'thin', 'medium', 'thick', and 'length'. The 'border-width' property is a shorthand of above declaration.
    
    'border-color' property specifies the color of a border. 'border-style' specifies border style. It may be one of the following values 'solid', 'dashed', 'dotted', 'ridge', 'double', 'outset', 'inset', 'groove', and 'none' (default). The properties of 'border-top', 'border-right', 'border-bottom', and 'border-left' are shorthand of 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' with the 'border-style' and 'border-color'. The 'border' property is the shorthand of 'border-width', 'border-style', and 'border-color'.
```
{border-top-width: 0.1em}
{border-right-width: medium}
{border-bottom-width: thin}
{border-left-width: thick}
{border-width: thin}

{border-style: dotted}
{border-color: black}

{border-top: thick solid red}
{border-right: thin dotted blue}
{border-bottom: medium double green}
{border-left: thin, ridge, yellow}
{border: solid red}
```
  - Padding
    Padding may have the value of length or percentage. The properties of 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' specify the top, right, bottom, and left padding respectively. The 'padding' property is a shorthand of above declaration. It is similar to the margin declaration.
```
{padding-top: 0.3em}
{padding-right: 10px}
{padding-bottom: 2em}
{padding-left: 25%}

{padding: 1em}
{padding: 1em 2em}
{padding: 1em 2em 3em 4em}
```
- Float Property
  It is a layout property. 'float' maybe one of a value 'none' (default), 'left', and 'right'. 'left' sets an element to the leftmost of its parent. 'right' sets an element to the rightmost of its parent.
```
{float: left}
```
  'clear' specefies if a floating element is allowed on its side. It may be one of a value 'left', 'right', 'both', and 'none' (default). The value 'none' allows floating element on its sides.
```
{clear: right}
```
- Position Property
  The properties 'width' and 'height' are usually applied to img element to set the display width and height of an image. The 'position' property maybe absolute or relative position.
```
{width: 50%}
{height: 10px}
{position: absolute; left: 20 top: 30}
```
- Classification Property
  'display' property describes how to show an element on the canvas. It maybe one of the value 'block', 'inline', 'list-item', and 'none'. 'white-space' property specifies how to handle whitespace. Its value 'pre' will keep all the whitespace; 'normal' value ignores extra whitespace and return character; 'nowrap' value will not wrap on the end of a line.
  
  'list-style-type' property describes the appearance of a list marker. It may be one of a value 'disc' (default), 'circle', 'square', 'decimal', 'lower-roman', 'upper-roman', 'lower-alpha', 'upper-alpha', and 'none'. 'list-style-image' property sets the list marker as an image. To specify the position of the list marker, 'list-style-position' maybe set the value inside or outside. Finally, 'list-style' is a shorthand of list-style-type, list-style-image, and list-style-position.
```
{display: block}
{whitespace: pre}

{list-style-type: decimal}
{list-style-image: ellipse.gif}
{list-style-position: inside}
{list-style: lower-alpha ellipse.gif inside}
```
Reference
For more details about CSS1 you can read the article on the web

W3 CSS1 Document

Snaml/Tcl
Index
Introduction
Syntax
Control
Types
Module
Status

XHTML
XHTML
Core
Text
Font
Link
List
Object
Table
Frame
Form
CSS
Script
EBNF