Learning:
The Journey of a Lifetime
A Cloud Chamber of the Mind

January 2006 Technology Notebook
Introduction      
Goals
   

Thursday, January 05 2006 6:50 am

This morning I plan to work on CSS using "Beginning CSS: Cascading Style Sheets for Web Design". Although I have read the first three chapters, I have yet to make any notes on this.

Chapter 1 Introducing Cascading Style Sheets [p. 9 - 15]

Key ideas:

  • The W3C is an organization that oversees the development of standards for the Web.
  • CSS provide control over presentation of content, which should be stored in an XML file.
  • CSS are easier to maintain that HTML code
  • CSS are faster and use less disk space than HTML code.

Chapter 2 Document Standards

Key ideas:

  • Internet Explorer provides less support for CSS standards than Firefox.
  • Here are a few key terms:
    Term
    Description
    Example
    tag a word enclosed in angle brackets. <heading>
    element a pair of tags: a start tag and an end tag <heading></heading>
    attribute an element annotation conveyed by means of a name-value pair. The attribute name is a word, followed by an = symbol, followed by a "symbol, followed by the value, followed by a " symbol. <book> author="Jones" </book>
    selector a target element to which the CSS rule is applied. A group of selectors are separated by commas.  
    declaration a property and a value, separated by a colon color: blue
    CSS rule a selector followed by a rule block consisting of a set of declarations. A group of declarations are separated by semicolons. h1 {font-style: italic;
    color: blue}
  • XML follows a more rigorous set of rules than HTML (e.g. all tags must be in lowercase) (all tags must have both an opening and a closing tag).
  • CSS are used to create an XHTML file (which follows the rules of XML)
  • All XHTML files begin with a Document Type Declaration statement which specifies the type of file that follows (e.g. XHTML 1.0 Strict)

Chapter 3 The Basics of CSS Anatomy and Syntax

  • A CSS rule is a selector followed by a declaration block.
  • CSS files can be a stand-alone file that is "linked" to a specific XML or XHTML file using the <link> element. This is the recommended approach. 7:55 am

8:00 am I am going to try opening up Stylus Studio and see if I can follow the steps described in chapters 2 and 3 using Stylus Studio. I hope to copy the files that accompany the book into Stylus Studio.I was unable to figure this out. 8:20 am

2:30 PM I am now beginning a look at chap. 4 of "Beginning CSS". Fascinating. I can read the HTML files in Dreamweaver and can then play with them, but I am unable to open the files with Stylus Studio.

Playing a bit further with Stylus Studio. I am able to open an HTML file using File -> Document Wizards... -> HTML to XML which will convert the HTML file to an XML file. It is able to verify that the resulting file is well-formed, but is not able to validate the file as there is no schema file.

Then using XML -> Create Schema from XML content... -> Generate DTD internal -> seems to work, but when I try to check that the resulting file is well-formed, I receive an error message saying that "Untitled3.xml:5,25: FATAL ERROR: 'style' is a mixed content model that is not terminated properly." . HMMM! Now what? I tried altering line 5 and soon had a file that was well-formed and valid. [ I changed line 5 from "<!ELEMENT style (#PCDATA, #PCDATA)> " to "<!ELEMENT style (#PCDATA)>"]

To open this file in the XSLT editor (which is the stylesheet editor), use File -> Document Wizards... -> XSLT Editor tab -> HTML to XSLT -> all files (to work with the XML file that I have saved in the previous paragraph). I am now able to alter the code in the file and immediately see the effect in the WYSIWIG window. Fantastic!!

I still have a long way to go with fully understanding the significance of all the code, but I do seem to have the basic steps identified for using either Dreamweaver or Stylus Studio to read an HTML file and make changes. Dreamweaver stays within HTML, whereas Stylus Studio does some sophisticated analysis to create an valid XML file from the original HTML file. This valid XML file also contains the appropriate DTD statements that essential gives me an internal stylesheet. 3:50 PM