Russ Weakley’s CSS Worshop

Russ Weakley of Listamatic fame gave a CSS workshop today in Singapore. It was organised by Pebble Road.

He started (tongue in cheek) with:

Today, I'm going to make you cry....

Wow - someone expecting (and designing for) some emotional response from learners! What a refreshing change... 🙂

Some thoughts on the session

• I enjoyed it and learned a lot.
• The audience was a mix of newbies and experienced CSS users. While it was advertised as an "Advanced CSS Workshop", I suspect many of the participants were overwhelmed. (All education is like this - there is never a homogeneous group.)
• Most of the day was not very learner-centred. Long periods of listening are rather hard to take, especially after lunch, even when you are into it. Some hands-on activities would have provided a good chance for participants to get their heads around what was going on. Even the people without laptops would have benefited from a chance to work on a few CSS examples, even if it was on paper. Most of the "exercises" were actually "demonstrations".
• Russ has a good sense of humour and I appreciated the passion he showed.
• His emphasis on accessibility was great. Apparently he does a lot of work with visually impaired people who use screen readers to read Web pages. Any problems with the page design shows up immediately in a screen reader.

What the workshop inspired me to do...

The things that I am going to work on (in my own sites) as a result of the workshop:

• Font sizes. This has been on my list for some time, but I am now fired up about the issue. I'm going to do it right with percent and em sizes.
• Reduce the use of classes. I will target elements using the document tree, rather than use so many classes.
• Organise style sheets. While I separate out the CSS for each part of my pages, it could be improved.
• Use fieldsets for form elements.

Following is a summary of what I found to be either interesting, a timely clarification, or brand new.

Basics

He started with some basics of block level and in-line HTML elements and then went on to talk about CSS tags and attributes.

He mentioned "alt", as in:

<img alt="my hairy dog" src="http://whatever.... />

Okay, I'm guilty - I've called it the "alt tag". (It should be called the "alt attribute".)

A class is used like:

<p class="bigBlue"> ...

Then in the style sheet, you put something like:

.bigBlue {
color: blue;
font-size: 8em;
}

He made a good point. He suggested to remove as many classes as you can and use the document tree instead. So you can point to a particular <a> using something like:

#content ul li a

* is the universal selector. It applies to every element on the page, but it is actually weak because it can be easily overwritten.

Child selectors point to the immediate child of an element.

p>em {
color: red;
}

Trouble is, child selectors don't work in (you guessed it) IE5, 5.5 and 6.

I have not used the adjacent sibling selector before:

h2+h3 (margin:-1em}

This selects the sibling immediately following an element. The above example targets h3 elements immediately following an h2 element.

A pseudo class only comes into existence when the user does something (eg hover).

I have not used focus before. For example:

a:focus { ... }

Focus is relevant when the user tabs across links in the page. The link gets "focus" and can be styled.

Hover can be used on anything (but IE only recognises hover on the "a" tag).

In shorthand rules, padding with 3 values applies to top; right-left; and bottom. For example:

p {padding: 3px 5px 7px;}

This will give padding of 3 px top, 5 px left and right, and 7 px bottom.

The stuff on specificity and concatenated number was confusing. This was in the section on cascading order of style sheets (browser → user → author). A weight is given for elements (like ID and CLASS) depending on which style sheet it occurs in. It would be better (as he said) if we used something like 1 - 5 - 5, rather than the concatenated 155. I will need to read more on this.

Bullets in lists are generated content, so they slip under a floated image and can disappear. His advice is what I mostly do - set the list-style-type to none and margin & padding to 0. Then there are no bullets to worry about.

All in all, a good day and I'm glad I went. Thanks, Russ.

See the 3 Comments below.