professional web authoring with xhtml & css

Professional Web Authoring With XHTML and CSS Roy Tennant California Digital Library escholarship.cdlib.org/rtennant/presentations/2003il/ Outline What You’re In For Why XHTML & CSS? XHTML CSS Making the Transition The Future What You’re In For A lecture on ditching bad habits: Unclosed tags: Formatting tags: , Browser extensions: <center> An introduction to the most essential elements of XHTML and CSS Why XHTML & CSS? Garbage code is…uh…garbage! Information encoded in XHTML can be more easily migrated as technology changes XHTML is a good step forward to learning XML You can easily make global changes to how your documents display (demo) There are user benefits to separating information from presentation (demo) XHTML Doc Information Web Server Presentation Cascading Style Sheet XHTML Doc Information Web Server Presentation Cascading Style Sheet User-defined Cascading Style Sheet XML Doc Information Web Server Transformation XSLT XHTML & CSS Presentation [...]... Strict//EN" "http://www.w3.org/TR /xhtml1 /DTD /xhtml1 -strict.dtd"> And add a namespace declaration to : The Most Important Tags Structure & Meta Information Miscellaneous Tables Forms Lists Style-Related Tags Structure & Meta Information = document type definition (DTD) = defines an XHTML doc = defines... align=“center”> XHTML: More Rules Attribute minimization is forbidden: becomes… You must use a document type declaration: Transitional: Strict: = embedded style rules: h1 { color: red; } = doc subset (block) = doc subset (inline) http://validator.w3.org/ Cascading Style Sheets Specifies how XHTML should be displayed to the user Replaces tags like: , , ... clicked on a:visited — traveled CSS Selectors: Psuedo Element :first-letter — first letter in a block element like or :first-line— first line in a block element like or See samples on the next screen CSS Selectors: Psuedo Element CSS Selectors: Contextual Selectors that only match under certain contexts; for example, the style: h1 em { color: red; } And this XHTML: This is header text,... font-family: Optima, Arial, sans-serif; } property/value separator begins and ends the declaration CSS Rule Example body { background: #FFFFFF; color: black; margin-left: 5%; margin-right: 5%; font-family: Tahoma, Optima, Arial, sans-serif; } CSS: Types of Selectors Simple Class Pseudo class Pseudo element Contextual CSS Selectors: Simple An HTML tag: , , etc Example: h1 { text-align: center; } Grouping... sans-serif; } CSS Selectors: Class An HTML element can be assigned a class: Which specifies a particular selector in the style sheet: h1.header { text-align: center; } Classes can apply to multiple elements: header { text-align: center; } will apply to , etc CSS Selectors: Psuedo Class Selectors that are inferred by the browser, not coded in the XHTML document... be displayed Can either be specified within the HTML file itself, or as a separate file Browser Support for CSS Varies between browsers (MSIE, Netscape, etc.), platforms (Windows v Mac), and versions Common points of failure: Font sizes Font names Complicated layouts Don’t bet the farm on support for a particular style Go easy! A little bit of style goes a long way CSS: Rule Structure selector declaration . (DTD) <html></html> = defines an XHTML doc <head></head> = defines doc header <title></title> = doc title <meta></meta> = metadata <body></body>. rule = emphasis = strong emphasis = superscript = subscripted text <pre></pre>. Tables <table></table> = defines a table <tr></tr> = table row <th></th> = table header <td></td> = table cell <caption></caption> =