A "job aid" for using CSS (Cascading Style Sheets)

[David Gillaspey]

Check it out, if you wish, here:

http://www.discovergraphicdesign.com/CSS_job_aid.html

but it's still a work in progress and is incomplete at the moment. It will be substantially complete in a few days, however.

Hi all,

This semester I am enrolled in a course on instructional design online through San Diego State University. "Instructional design," a/k/a educational technology, is the discipline of preparing educational or training materials through a rigorous, systematic process of analysis and design.

Anyway, for my final project in this course, I am creating an online "job aid" (URL above) that lists CSS style rules, demonstrated with extensive examples. The value of an online job aid for CSS is that by viewing the page in different browsers, you see immediately how each browser supports CSS rules.

What is a "job aid"? A job aid is a cheat sheet or reference guide that a person uses in his or her work, that helps that person do something in their job at the exact moment that such knowledge is needed.

Why are job aids valuable? Companies know that training people is very expensive. Any knowledge or procedures that can be written down in the form of a job aid and made available to employees do not have to be taught to employees, which saves money.

Job aids are great for those things that people need to now or use only on occasion, rather than all of the time.

I'm still working on this job aid (as I write this), so — as stated above — it's not complete. However, if you find it useful as you work on projects, please respond with a comment. Any feedback will be appreciated.

(Jack, it validates!)

[JackWolfgang]

(Jack, it validates!)

I don't have time to say any more than "The HTML does!" (which is usually the problem for most sites):

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.discovergraphicdesign.com%2FCSS_job_aid.html

[David Gillaspey]

Hi Jack,

Uh? You were too cryptic even for me.

Try:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.discovergraphicdesign.com%2FCSS_job_aid.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Are you saying there's another validator that my job aid page doesn't pass muster with? (Not unhappy, just looking for clarification.)

[JackWolfgang]

Hi Jack,

Uh? You were too cryptic even for me.

Try:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.discovergraphicdesign.com%2FCSS_job_aid.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Are you saying there's another validator that my job aid page doesn't pass muster with? (Not unhappy, just looking for clarification.)

I needed to get to bed, so I was brief. Your HTML passes muster, but your CSS does not:

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.discovergraphicdesign.com%2FCSS_job_aid.html

[Faithhb_lutheran]

David,

You only missed a couple of things in your CSS. The first error is only technical, it displays properly in all major browsers, it seems that the validators only accepts color names for the primary colors (white, black, blue, red and green).

[flutem3]

David,

You only missed a couple of things in your CSS. The first error is only technical, it displays properly in all major browsers, it seems that the validators only accepts color names for the primary colors (white, black, blue, red and green).

Hi, Kyle,

I have a question about colors and CSS. I use the hex numbers for the varieties of colors I use. The seems much faster and very accurate. The RBG numbers take longer to type in. What has become the "correct" thing to use with the current standards? :)

Carol

[David Gillaspey]

Hi Carol,

The textbook in front of me (Visual Quickstart Guide: HTML, XHTML & CSS, by Elizabeth Castro) lists 16 colors that can be specified by name. Apparently, CSS standards (as opposed to HTML standards) allow fewer named colors.

Those are the easiest to specify. Just about as easy to specify are colors by hex values.

Specifying colors by RGB values is the most difficult way to specify colors.

All three can be used. Use the method that works best for you.

[JackWolfgang]

David,

You only missed a couple of things in your CSS. The first error is only technical, it displays properly in all major browsers, it seems that the validators only accepts color names for the primary colors (white, black, blue, red and green).

Not just primary colors.

The textbook in front of me (Visual Quickstart Guide: HTML, XHTML & CSS, by Elizabeth Castro) lists 16 colors that can be specified by name. Apparently, CSS standards (as opposed to HTML standards) allow fewer named colors.

Apparently Ms. Castro made an error. W3C lists (http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-color)* the following 16 as valid names for colors:


aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow


W3C states that the colors are common to CSS2 and HTML 4.0. The HTML 4.0 specification (http://www.w3.org/TR/REC-html40/types.html#h-6.5) lists these colors and their hex RGB equivalents and displays them.

Those are the easiest to specify. Just about as easy to specify are colors by hex values.

Specifying colors by RGB values is the most difficult way to specify colors.

All three can be used. Use the method that works best for you.

I'll note that the colors can be displayed in hex, but it's still RGB. The first two hexadecimal digits represent red, the second two represent green, and the third two represent blue. However, because most image processing and drawing programs do not display the hex equivalents, it may be easier to use the CSS RGB Decimal construct as shown in the following example:

.RedText { color: rgb(255,0,0) }

* Note: W3C lists this data in a sentence, but to my way of thinking, it would have been better to mark up the list with the <ul><li></li></ul> construct (which indicates unordered list). I marked it up as a numbered list only for the purposes of demonstrating there are 16.

[JackWolfgang]

Two of the other errors (which are more critical than warnings) deal with trying to bold text. David used the font-size property, which as its name implies deals with the size of the text. Since David used the value "bold", I assume he meant to use the font-weight property. The correct construct is as follows:

div#LineHeight p[class="description"] {font-weight: bold}

I will add to David's discussion to indicate that there are four valid font-weight text values:


normal
bold
bolder
lighter


I may set up a test with them later, or David may wish to add them to his test along with the numerical values.

However, I did also see this on the W3C discussion of font-weight:

normal
Same as '400'.
bold
Same as '700'.
bolder
Specifies the next weight that is assigned to a font that is darker than the inherited one. If there is no such weight, it simply results in the next darker numerical value (and the font remains unchanged), unless the inherited value was '900', in which case the resulting weight is also '900'.
lighter
Specifies the next weight that is assigned to a font that is lighter than the inherited one. If there is no such weight, it simply results in the next lighter numerical value (and the font remains unchanged), unless the inherited value was '100', in which case the resulting weight is also '100'.

The fourth error that the validator returned was barking at David's use of progress for a cursor type, which works in Firefox, Internet Explorer, and Safari for Windows. However, W3C defines the proper value as "wait".

[flutem3]

Hi, Jack et. al.,

I hate to say this, but these things drive me nuts despite my thinking they are important.

Whoever decided that the way you described font weight was better than what was done before? I would need a cheat sheet just for font weight!!! And that's the truth unfortunately.

What is the WYSIWYG product that puts out a product which comes the closest to meeting standards? I understand that I handicap myself to a certain extent by choosing WYSIWYG. I looked at Trellian which made little sense to me.

People saw that we can make websites by using WordPress, but I have worked a bit with WordPress, and I don't understand how a person would make a website using it. So far I have been unable to change the size of the heading. I want it to be smaller. I have not the foggiest notion of how to make it smaller. I have punched every button on the thing. And so it goes. :confused: I think they need to have a smiley like that one which is standing on its head as well. :D

I am open to suggestions and ideas about everything...more or less. LOL

Carol

[David Gillaspey]

Hi Jack and Kyle,

The CSS style sheet now validates, though there are a bunch of warnings I'll deal with later when the job aid itself is done.

Apparently Ms. Castro made an error.

The colors you list are the colors she lists, which are the colors I used. I don't know why the validator complained, therefore. I've changed the colors (in the CSS) to the hex values, so it's a mute point now.

I didn't change the "progress" cursor to "wait" yet the CSS now validates. Why's that, I wonder?

But anyway, aside from whether the HTML or the CSS validates, what about the actual job aid? Any suggestions?

[JackWolfgang]

I hate to say this, but these things drive me nuts despite my thinking they are important.

You aren't the only one. David used a reference book thinking it was correct, only to find that the standard was not in agreement with the reference book. I've done the same thing before.

Whoever decided that the way you described font weight was better than what was done before? I would need a cheat sheet just for font weight!!! And that's the truth unfortunately.

It's about options. However, we'll never use all the options (nor should we in a single site). That was about 40% of what was wrong with Front Page sites: the people using Front Page would say "Ohh! Swiss Army knife! Let's use all the blades!", and then the site would look like a mish-mash. The only font-weight options I have used are: bold and normal. However, they are there if we need them. Cheat sheets are fine. I often use the ones at http://htmlhelp.com.

What is the WYSIWYG product that puts out a product which comes the closest to meeting standards? I understand that I handicap myself to a certain extent by choosing WYSIWYG. I looked at Trellian which made little sense to me.

I saw an open-source WYSIWYG product the other day that promised valid code (HTML 4.0 and possibly XHTML 1.0), but I have not tried it. It's called KompoZer (http://kompozer.net/).

People saw that we can make websites by using WordPress, but I have worked a bit with WordPress, and I don't understand how a person would make a website using it. So far I have been unable to change the size of the heading. I want it to be smaller. I have not the foggiest notion of how to make it smaller. I have punched every button on the thing. And so it goes. :confused: I think they need to have a smiley like that one which is standing on its head as well. :D

Think big picture, Carole. With the CSS and HTML the goal is consistency. Think about your newspaper: You know what a headline looks like because the font, font size, and weight are the same as a lot of the other headlines. You know what a byline looks like because it looks like the other bylines in the newspaper. With web pages, we want the same thing. Classes/types of objects looking the same so that people know what they are looking at. When we are trying to tweak one headline, we are being control freaks, and we need to let go.

I am open to suggestions and ideas about everything...more or less. LOL

Hope this helps....

[JackWolfgang]

The CSS style sheet now validates, though there are a bunch of warnings I'll deal with later when the job aid itself is done.

Great! Warnings are OK. The Validator can't handle all the combinations we can through at it. For example, we might specify a color, and it warns us to specify a background which is specified elsewhere.

Apparently Ms. Castro made an error.

The colors you list are the colors she lists, which are the colors I used. I don't know why the validator complained, therefore. I've changed the colors (in the CSS) to the hex values, so it's a mute point now.

It barked at orange, and I don't see orange on the list. However, orange seems more sensible than some of the esoteric colors they list there (green vs. lime?).

I didn't change the "progress" cursor to "wait" yet the CSS now validates. Why's that, I wonder?

According to the link, the HTML is now not validating. For one, STRICT doctypes do not support the target attribute.

According to W3C, CSS is still not validating due to Orange and the Progress cursor type. (Line 40 and 153 of http://www.discovergraphicdesign.com/jobaid.css)

But anyway, aside from whether the HTML or the CSS validates, what about the actual job aid? Any suggestions?

OK, disregarding the validation errors (which I think need to be fixed because personally, I find it difficult to learn from someone making mistakes).

Borders look great!

Cursor types are not as important unless you are writing AJAX applications or something like that, so I would move them down the page.

Font-family:

Explain the difference between serif and sans-serif. Expand your basic description of the generic families (monospace is done, do the rest!).
I would give the list of what fonts exist on the computers. (I found this reference: http://web.mit.edu/jmorzins/www/fonts.html)


For the font sizes, the thing to remember is that proportional sizes are best (percentages and keywords as opposed to pixel sizes) because they re-size appropriately when people use that function in their browsers.

Font-style looks good; font-weight looks good.

Font-variant is listed in your shorthand, but you do not discuss what it does. Discuss!

[flutem3]

When we are trying to tweak one headline, we are being control freaks, and we need to let go.

Thank you, Jack. There is one problem about that one headline. It is the only one. I think I should be able to choose the size of the thing. If that be controlling, I guess it is. I would guess that you want to have control over the size of h1, h2, h3, etc. and not have the durn machine just pick one. :D

Have you seen websites made with WordPress? I would like to see several so I can get an idea of what people can do with it.

Thanks again.

Carol

PS How frequently do they change the standards? By reading this forum for this period of time, it seems to me standards change frequently.

[JackWolfgang]

When we are trying to tweak one headline, we are being control freaks, and we need to let go.

Thank you, Jack. There is one problem about that one headline. It is the only one. I think I should be able to choose the size of the thing. If that be controlling, I guess it is. I would guess that you want to have control over the size of h1, h2, h3, etc. and not have the durn machine just pick one. :D

With stylesheets, you can have control over each level of heading (h1 through h6) not only on a global scale, but in different circumstances.

For example, on First Christian Church of Tallahassee's home page (http://fcctlh.org/) (yes, I know I am using my own work as an example, but as the designer, I am intimately familiar with it), there are 3 heading levels (h1, h2, and h3).

There is only 1 h1 on the page. It's the logo at the top left, which is a special construct to overlay the image over the text (the church's name: First Christian Church of Tallahassee, Florida). We won't dive into details there, but there really should only be 1 or 2 h1 headings on a page. If you feel you need more, you probably need to break your pages up more.

Level 2 headings: The following visible headings are marked up with h2: "When & Where", "Podcast", "Recent News", and "Recent Lessons". (There is a hidden "FCC-Tallahassee Menu" h2 based on a recommendation (http://cita.rehab.uiuc.edu/html-best-practices/nav/menus.php) from the University of Illinois-Urbana Champaign.) As you can see, I have the ones in the right column styled differently than the one on the left column.

Level 3 headings:

Sunday Morning
Wednesday Evenings
Location & Directions


The point of using the different levels of headings to create an outline that makes sense. For example the following page has the following outline:

First Christian Church of Tallahassee, Florida

FCC -Tallahassee Menu
When & Where

Sunday Morning
Wednesday Evenings
Location & Directions

Podcast
Recent News
Recent Lessons


Have you seen websites made with WordPress? I would like to see several so I can get an idea of what people can do with it.

If you clicked the link to the FCC-Tallahassee page, you just looked at one! :)

Mr Belfry also built one for his church (http://www.lighthousecc.co.uk/).

David also lists the following sites in the CMS Example Sites (http://www.greatchurchwebsites.org/forums/showthread.php?t=654) thread:

Wordpress sites:

http://www.htlcto.org
http://www.saylorvillebaptist.com
http://www.firstlutherandecorah.org
http://www.fbccrowley.com
http://www.calvarysac.org

PS How frequently do they change the standards? By reading this forum for this period of time, it seems to me standards change frequently.

Actually, they're fairly slow:

HTML 3.2--Specification approved 14 January 1997
HTML 4.0--Specification approved 18 December 1997
HTML 4.01--Specification approved 24 December 1999
XHTML 1.0--Specification approved 26 January 2000; revised 1 August 2002
XHTML 1.1--Specification approved 31 May 2001
XHTML 2.0--Draft in Progress
HTML 5/XHTML 5--Draft in Progress

So nothing has been approved in 6 years!! Meanwhile, technology rolls on.

[Faithhb_lutheran]

PS How frequently do they change the standards? By reading this forum for this period of time, it seems to me standards change frequently.

Actually, they're fairly slow:

HTML 3.2--Specification approved 14 January 1997
HTML 4.0--Specification approved 18 December 1997
HTML 4.01--Specification approved 24 December 1999
XHTML 1.0--Specification approved 26 January 2000; revised 1 August 2002
XHTML 1.1--Specification approved 31 May 2001
XHTML 2.0--Draft in Progress
HTML 5/XHTML 5--Draft in Progress

So nothing has been approved in 6 years!! Meanwhile, technology rolls on.

Jack while html hasn't had an update in five and a half years, other technologies have been progressing, CSS2.1 came out just 2.5 years ago and they have the CSS3 draft in progress, along with sublangauges for mobile, print, and tv medias. and the latest javascript 1.7 was released sometime in early 2006 I think. So there still is a lot of new stuff to learn.

[flutem3]

Oh my goodness, you guys. Those websites made with WordPress are quite nice. But how on earth do they go from blog to website. I understand how the blog works. What I don't understand at all is how that it turned into a website.

Yes, I am asking for a specific reason. I have been asked to make a website for an organization. I am not going to make it with Homestead which ought to make everyone happy. :D

That is one reason I am looking at WordPress. Any number of people recommend using it. I have also heard that the standards used on it are reasonable as well, and I seem to have heard something about that.

My question then is how do you get from blog to website with the same software. That was really the question, Jack, when I said I couldn't even control the font size on the banner. A website, as you pointed out, needs a bit more than that. My point was that if I cannot change the font size on the banner, how on earth will I make a website using that particular software?

I am listening to The Messiah. I don't know how well anyone on here likes it, but this is a superb version with is conducted by Sir Georg Solti.

Carol

[JackWolfgang]

PS How frequently do they change the standards? By reading this forum for this period of time, it seems to me standards change frequently.

Actually, they're fairly slow:

HTML 3.2--Specification approved 14 January 1997
HTML 4.0--Specification approved 18 December 1997
HTML 4.01--Specification approved 24 December 1999
XHTML 1.0--Specification approved 26 January 2000; revised 1 August 2002
XHTML 1.1--Specification approved 31 May 2001
XHTML 2.0--Draft in Progress
HTML 5/XHTML 5--Draft in Progress

So nothing has been approved in 6 years!! Meanwhile, technology rolls on.

Jack while html hasn't had an update in five and a half years, other technologies have been progressing, CSS2.1 came out just 2.5 years ago and they have the CSS3 draft in progress, along with sublangauges for mobile, print, and tv medias. and the latest javascript 1.7 was released sometime in early 2006 I think. So there still is a lot of new stuff to learn.

This is true, but with the speed of the information age, 6 years since a standards update on HTML is huge. Consider that in that time, YouTube has been launched (February 2005), Flickr (February 2004), MySpace (August 2003), and Facebook (February 2004). These are some of the largest sites on the internet.

Granted, I prefer standards that are not half-baked, but I was trying to show that the progress of updating standards is slow work.

[JackWolfgang]

Oh my goodness, you guys. Those websites made with WordPress are quite nice. But how on earth do they go from blog to website. I understand how the blog works. What I don't understand at all is how that it turned into a website.

Thanks, Carol.

Yes, I am asking for a specific reason. I have been asked to make a website for an organization. I am not going to make it with Homestead which ought to make everyone happy. :D

Here maybe the confusion. Wordpress refers to two things: WordPress.com and WordPress the software. WordPress.com allows you to use WordPress without having to install it. However, some of the features available to people installing the software are not available in WordPress.com (or cost money in WordPress.com). However, I think it's possible to create a good looking site in WordPress.com, but I will qualify with saying that I haven't given it a big try.

That is one reason I am looking at WordPress. Any number of people recommend using it. I have also heard that the standards used on it are reasonable as well, and I seem to have heard something about that.

One of WordPress' big selling points over other software packages is it's standards compliance.

My question then is how do you get from blog to website with the same software. That was really the question, Jack, when I said I couldn't even control the font size on the banner. A website, as you pointed out, needs a bit more than that. My point was that if I cannot change the font size on the banner, how on earth will I make a website using that particular software?

You need to browse the themes and find one that works for you. With the self-hosted WordPress software (not WordPress.com), you can customize themes, but that requires knowledge of (X)HTML, CSS, and PHP. That's how we got the FCC-Tallahassee site was that I built a custom theme (although I couldn't export it to another site since it is a non-standard WordPress theme).

Here is a good discussion of the differences between WordPress.com and WordPress the software: http://faq.wordpress.com/2006/05/07/wordpresscom-vs-wordpressorg/

I am listening to The Messiah. I don't know how well anyone on here likes it, but this is a superb version with is conducted by Sir Georg Solti.

I like Handel's Messiah, but I am not in the mood for any music this evening. I went to bed around 9 PM (unusually early for me) and then workup for some reason around 12:30 AM. I am going back to sleep. G'Night all!