• 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.