{"id":539,"date":"2007-02-08T10:44:28","date_gmt":"2007-02-08T10:44:28","guid":{"rendered":"http:\/\/www.intmath.com\/blog\/?p=539"},"modified":"2019-09-19T19:59:38","modified_gmt":"2019-09-19T11:59:38","slug":"russ-weakleys-css-worshop","status":"publish","type":"post","link":"https:\/\/www.intmath.com\/blog\/computers\/russ-weakleys-css-worshop-539","title":{"rendered":"Russ Weakley&#8217;s CSS Worshop"},"content":{"rendered":"<p>Russ Weakley of <a href=\"http:\/\/css.maxdesign.com.au\/listamatic\/\">Listamatic<\/a> fame gave a CSS workshop today in Singapore.  It was organised by <a href=\"http:\/\/www.pebbleroad.com\/\">Pebble Road<\/a>.<\/p>\n<p>He started (tongue in cheek) with: <\/p>\n<blockquote>\n<p>Today, I'm going to make you cry....<\/p>\n<\/blockquote>\n<p>Wow - someone expecting (and designing for) some emotional response from learners! What a refreshing change... \ud83d\ude42<\/p>\n<h2>Some thoughts on the session<\/h2>\n<ul>\n<li>I enjoyed it and learned a lot.<\/li>\n<li>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.)<\/li>\n<li>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\".<\/li>\n<li>Russ has a good sense of humour and I appreciated the passion he showed.<\/li>\n<li>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.<\/li>\n<\/ul>\n<h2>What the workshop inspired me to do...<\/h2>\n<p>The things that I am going to work on (in my own sites) as a result of the workshop:<\/p>\n<ul>\n<li><strong>Font sizes.<\/strong> 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.<\/li>\n<li><strong>Reduce the use of classes<\/strong>. I will target elements using the document tree, rather than use so many classes.<\/li>\n<li><strong>Organise style sheets<\/strong>. While I separate out the CSS for each part of my pages, it could be improved.<\/li>\n<li>Use <b>fieldset<\/b>s for form elements.<\/li>\n<\/ul>\n<p>Following is a summary of what I found to be either interesting, a timely clarification, or brand new.<\/p>\n<h2>Basics<\/h2>\n<p>He started with some basics of block level and in-line HTML elements and then went on to talk about CSS tags and attributes. <\/p>\n<p>He mentioned \"alt\", as in:<\/p>\n<pre>&lt;img alt=\"my hairy dog\" src=\"http:\/\/whatever.... \/><\/pre>\n<p>Okay, I'm guilty - I've called it the \"alt tag\". (It should be called the \"alt attribute\".)<\/p>\n<p>A <strong>class<\/strong> is used like:<\/p>\n<pre>&lt;p class=\"bigBlue\"> ...<\/pre>\n<p>Then in the style sheet, you put something like:<\/p>\n<pre>.bigBlue {\r\ncolor: blue;\r\nfont-size: 8em;\r\n}<\/pre>\n<p>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 &lt;a> using something like:<\/p>\n<pre>#content ul li a<\/pre>\n<p>* is the <strong>universal selector<\/strong>. It applies to every element on the page, but it is actually weak because it can be easily overwritten.<\/p>\n<p><strong>Child selectors<\/strong> point to the immediate child of an element.<\/p>\n<pre>p>em {\r\ncolor: red;\r\n}<\/pre>\n<p>Trouble is, child selectors don't work in (you guessed it) IE5, 5.5 and 6.<\/p>\n<p>I have not used the <b>adjacent sibling selector<\/b> before:<\/p>\n<pre>h2+h3 (margin:-1em}<\/pre>\n<p>This selects the sibling immediately following an element. The above example targets h3 elements immediately following an h2 element.<\/p>\n<p>A <strong>pseudo class<\/strong> only comes into existence when the user does something (eg hover).<\/p>\n<p>I have not used <strong>focus<\/strong> before. For example:<\/p>\n<pre>a:focus { ... }<\/pre>\n<p>Focus is relevant when the user tabs across links in the page. The link gets \"focus\" and can be styled.<\/p>\n<p><strong>Hover<\/strong> can be used on anything (but IE only recognises hover on the \"a\" tag).<\/p>\n<p>In shorthand rules, <strong>padding with 3 values <\/strong> applies to top; right-left; and bottom. For example:<\/p>\n<pre>p {padding: 3px 5px 7px;}<\/pre>\n<p>This will give padding of 3 px top, 5 px left and right, and 7 px bottom.<\/p>\n<p>The stuff on <strong>specificity and concatenated number<\/strong> was confusing. This was in the section on cascading order of style sheets (browser &rarr; user &rarr; 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. <\/p>\n<p><strong>Bullets<\/strong> 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.<\/p>\n<p>All in all, a good day and I'm glad I went. Thanks, Russ.<\/p>\n<p class=\"alt\">See the <a href=\"https:\/\/www.intmath.com\/blog\/computers\/russ-weakleys-css-worshop-539#comments\" id=\"comms\">3 Comments<\/a> below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Russ Weakley ran an interesting CSS workshop in Singapore today.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mo_disable_npp":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/posts\/539"}],"collection":[{"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/comments?post=539"}],"version-history":[{"count":1,"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/posts\/539\/revisions"}],"predecessor-version":[{"id":12126,"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/posts\/539\/revisions\/12126"}],"wp:attachment":[{"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/media?parent=539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/categories?post=539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.intmath.com\/blog\/wp-json\/wp\/v2\/tags?post=539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}