• What is XHTML?
    • Case sensitive tags, attributes must be quoted, properly nested tags (with end tags)
    • Specification is http://www.w3.org/TR/2002/REC-xhtml1-20020801/ or locally
    • example
    • A good resource is http://www.w3schools.com/xhtml/xhtml_reference.asp
    • An HTML document which also conforms to an XML dtd for 'HTML' documents.
    • HTML came first, then XML, then dtd for HTML type documents (XHTML).
    • Some elements you have not seen (but are part of the XHTML spec. iframe (or locally, thead)
  • CSS (Cascading Style Sheets)
    • References: Specification is http://www.w3.org/TR/REC-CSS2/ (or locally), w3schools notes, CSS tutorial, http://www.w3schools.com
    • What are stylesheets for? Allows fine tuning of document appearance vs HTML which specifies document organization and appearance (HTML does neither very well).
    • What is cascading about them? You can apply styles to
      • Single element (style attribute of an element) <h2 style="text-align:center;" >CSC309 Programming on the Web</h2>
      • Whole document (specified in the HEAD tag) (see a calendar with and without css)
      • Collection of documents (specify the URL of an External stylesheet). See cssStyle.css and associated web page example.html.
      Single element (style attribute) overrides Whole Document (head tag) overrides External style.
    • Inheritance: Some aspects of your style are inherited from your containing element.
    • Rules look like selector { property:value; property:value; } A Stylesheet typically contains many rules.
      • Selector: determines which elements to apply the style to
        • Syntax for various operations... e { property:value; property:value; } /* apply to elements with name e */ .c { property:value; property:value; } /* apply to elements which have class=c */ e.c { property:value; property:value; } /* apply to elements named e which have class=c */ #i { property:value; property:value; } /* apply to elements which have id=i */ e#i { property:value; property:value; } /* apply to elements named e with id=i */ below, s1, s2 and s3 can be any of the above selector types s1 s2 { property:value; property:value; } /* apply to s2 descendents of s1 */ s1>s2 { property:value; property:value; } /* apply to s2 children of s1 */ s1, s2, s3 { property:value; property:value; } /* apply to s1 and s2 and s3 */
        • class vs id: use class selector to apply the same style to many elements, use id selector to apply a style to a specific (single!) element.
        • span vs div: span is in-line content, div denotes a separate block.
      • Properties: define aspects of an elements display
        • A list of all properties can be found here (or locally).
        • CSS approach: specify a collection of property:value; pairs to define the appearance of a particular element.
        • Properties fall into the following categories: fonts, colors and backgrounds, text, boxes and layouts, lists, tags
      • Values: Depends on the property, some typical value types follow
        • Sizes can be [ xx-small | x-small | small | medium | large | x-large | xx-large ] [ larger | smaller ] percentage px: pixels, relative to the viewing device in: inches cm: centimeters mm: millimeters pt: point pc: 12 points em: the 'font-size' of the relevant font (height of a character box) ex: the 'x-height' of the relevant font (height of the letter x)
        • Fonts
          • font-family: Verdana, "Comic Sans MS", sans-serif, Trebuchet;
          • Generic font names: serif, sans-serif, cursive, fantasy, monospace.
          • font-size: small;
    • Box Model: each element has a box surrounding it with tunable attributes...
    • Position
      • position: static; /* where the element would normally be */
      • position: relative; /* top, bottom, left, right relative to default position also used to set a frame of reference. */
      • position: absolute; /* top, bottom, left, right relative to current frame of reference */
      • position: fixed; /* top, bottom, left, right relative to the browser window */
    • Can apply CSS to any XML document (including XHTML). So why not just use CSS with XML instead of XHTML? Answer: XHTML gives you a collection of elements with default appearance. It is easier to build on this default rather than start from scratch. Tables and lists are a good example.