XHTML

• Difference between XML, XHTML and HTML
  • Well Formed XML documents: Look like XML document for some DTD
  • Valid XML document: is an instance of its specified DTD
  • What is that xmlns attribute? It is used to resolve element name conflicts when an XML document contains elements from multiple document types. See xmlns faq
• 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, thead)

CSS (Cascading Style Sheets) Introduction

• Examples:
  • csszengarden
  • See this example. Notice that it is responsive, that it has media queries for different screen widths. Compare to this.
• References: Specification is at the w3c , http://www.w3schools.com, css3 at w3schools, CSS tutorial
• css validator
• What are stylesheets for? Allows fine tuning of document appearance vs HTML which specifies document organization and appearance (HTML does netiher very well).
• 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.

CSS Basics

• 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 inline content, div denotes a separate block.
  • Properties: define aspects of an elements display
    • A list of all properties can be found here.
    • 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;
• 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 the layout example
• Which property rule applies to which element? That is, which style applies?
  • Later rules override earlier rules. That is, rules that appear later in an external sytle sheet, head, or style attribute override ones that appear earlier.
  • Closer rules override farther rules. That is, rules in the head override rules in an external style sheet.
  • An element inherits the style of its container.
  • More specific rules override more general rules. style is more specific than id is more specific than class is more specific than element.
  How do you work with these? Keep it simple easy to understand. It is actually more complex than described above! An example rules.html with its associated rulesStyle.css.

CSS Box Model

CSS 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 */

• Position is everything
• A screencast on position
• Floating elements

CSS z-index

Links