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

April 2006 Technology Notebook
Introduction      
Goals
Next
   

Saturday, April 22 2006 6:30 am

Notes for "CSS in 10 Minutes"

Lesson 1

"In this lesson, you will learn about Cascading Style Sheets and why you should use them." [p. 3]

Lesson 2

"In this lesson, you will learn the syntax and rules of the Cascading Style Sheet (CSS) language. You will learn the components of CSS rules, including selectors, declarations, properties, and values. You will learn how to style a series of simple HTML elements. You will learn how to use shorthand properties." [p. 6]

Lesson 3

"In this lesson, you will learn about the different types of selectors and how to use them." [p. 20]

 

The opening paragraph for each lesson provides a short summary of the goals of the lesson. This can provide an excellent checklist for whether I understand the material for the lesson.

By restating the goals for all previous lessons as I proceed through the book I will have an opportunity to quickly review any areas that are weak.

I have had a quick look at Lesson 3. While I understand the basic idea of a selector, I am seeing a few HTML tags that are new to me. The idea of a type selector (e.g. <body>, <h1>, <p>, <ul>, <li>, <a> ) is familiar to me.

However the ideas of a class or id attribute is new to me. Both may be used to give additional information about the nature of an element, and then can be used in a stylesheet to select only those elements that have that attribute.


Lesson 3 continued

The remainder of the lesson describes additional ways in which one can select more specific subsets of an element by specifying the descendants of an element.

At the other end of the continuum, using the * allows one to select all elements within another element.


I feel I understand the basic idea as well as the syntax. However I am not yet sure of when I would utilize this. I suspect that I would first create my data file and then add additional attributes as I found that I needed to tailor a display for a particular purpose. We shall see ...

I keep wanting to apply what I am learning to my specific situation. For example, I have a simple XML file that contains information on the Australian birds that we have seen while visiting here. I want to set up a style sheet file for this data file and then begin using what I am learning about CSS to play with the display.

This leads me away from CSS and this book and into a question of what software to use to create the stylesheet. The three choices are:

  • Dreamweaver 8
  • Stylevision
  • Stylus Studio.

However I will wait a bit and see what happens in the next few lessons.


Lesson 4

"In this lesson, you will learn the three different locations where you can place CSS code, including inline, header, and external style sheets. You will also learn how to target a style sheet to a specific device such as a cell phone, televisioin, or PDA by using media types. You will also learn methods that can be used to hide advanced styles from older browsers using media types." [p. 28]


This looks promising. I am familiar with the general idea of the three different locations from previous readings a few months ago. I definitely feel that the idea of an external style sheet is the one of interest to me.


Lesson 4 continued

  • "... external style sheets are the preferred option ..." [p. 29]
  • "... header styles might be the preferred option in specific instances, such as a CSS rule that is specific to one page within a large website." [p. 30]
  • "External style sheets are the most appropriate method for styling documents. If styles need to be changed, the modification can take place in one CSS file rather than all HTML pages." [p. 30 - 31]

Use the link element in the data HTML file to specify the specific stylesheet that should be used to display the data.

So far, so good. But I still do not know how to actually create the data file, the stylesheet file, and have the two work together via the link element. A further glance at "CSS in 10 Minutes" indicates that this falls outside the topic of this book. This book is about understanding how to create the code for the stylesheet.

I am back to the critical decision point of whether to stay with the book or take a detour and see if I can get this all working using one of the three packages I identified earlier today.

I am going to give this a try. I recall getting started with Stylus Studio a few months ago and will see if I can get on top of this again, at least to handle the basics of creating a data file in XML and then creating a simple stylesheet file in XML as well.

Walking away from this to refill my coffee cup helped. I now thhink it makes more sense to try to create a very simple stylesheet file using Dreamweaver and then see if I can add the appropriate link element to the XML data file that I created some time ago.

This is turning out to be more difficult than I hoped. I can open an XML file in Dreamweaver but I don't know what to do next. I can also create a CSS file in Dreamweaver and link it to an HTML file. I think what I need is some way to convert my XML file to an XHTML file. I am in over my head on this at the moment. The problem is not with the XML file, but with how I set this up with a stylesheet. Let me think about this for a bit.

8:20 am

3:10 PM

I am going to play with this a bit. My task is to see if I can determine the sequence of steps within Stylus Studio to go from a data XML file (which I know how to create) to subsequent files that permit me to display the data on a web page. Clearly I need to create a stylesheet file as well as an XHTML file and I need to determine how to set up the links between them. It would also be nice if I could determine how to do this within Dreamweaver (given the existence of a data XML file). I think that a "schema" file is a special case of a file that allows me to check a data file for validity.

The Stylus Studio documentation has within chapter 4 a section on "Creating Stylesheets that Generate HTML".

From the documentation:

"The Extensible Stylesheet Language (XSL) is the World Wide Web Consortium's (W3C) language for manipulating XML data. XSLT is the component of XSL that allows you to write a stylesheet that you can apply to XML documents. The result of applying a stylesheet is that the XSLT processor creates a new XML, HTML, or text document based on the source document. "

I have Stylus Studio XML Professional Edition 2006. There is an updated version called Build 501i which became available on March 14. I must remember to get this when I return to Lethbridge and have access to a high speed line.


Nope. I am running into problems with this. I am unable to match the screen displays with what the documentation says I should be seeing. Better to leave this for the moment until I am back in Canada and have downloaded the latest version.

4:05 PM