Check out the CFUNITED-06 ColdFusion conference news below. In this interview we talk with Sandra Clark about why CSS (Cascading Style Sheets) is important to ColdFusion developers, browser issues and how structural markup can help with section 508 disabled access to your websites.
- Michael Smith TeraTech TeraTech is hiring a senior developer to join our growing team http://www.teratech.com/index.cfm?go=About.JobDetail&JobID=7 Conference and training news **************************** * CFUNITED-06 is announced for 6/28/06 - 7/1/06 in the Washington DC area. * If you want to speak or want to suggest a topic for someone else to speak please complete the form at CFUNITED http://wwww.cfunited.com/ by Friday 11/18/05. We are looking forward to making CFUNITED-06 even better than last year! * CS201H Sandra Clark CSS Hands On Rockville MD 11/29/05 - 12/2/05 ******** Now back to the interview: Michael Smith: I am talking with Sandra Clark about her "CSS Hands On" class. Why should someone come to the class? Sandra Clark: Well, most of us learned CSS when it just came out and unfortunately, we learned it while "attempting to use" Netscape 4. Netscape 4's implementation of CSS is so buggy that most of us either dismissed CSS as "not ready for prime time" or tried to find workarounds for it. Either way, we really didn't understand or harness the power that CSS has. Now that Netscape 4 is officially dead (less than 0.4%) it really is a good time to learn how powerful CSS is and how it can help us create web pages much more easily. MS: What kind of power do the new browsers give you with CSS? SC: With CSS, we have the power to go much further than just using a font tag, size and color. CSS supports typography standards such as kerning, line spacing and indenting. CSS supports a box model which allows us to layout pages without resorting to tables or misusing tags. It supports more advanced ways of selecting elements so that our HTML isn't littered with a bunch of classes that no one remembers how to use correctly. MS: What is wrong with table tags, people have used them for years for complex layouts... SC: There is nothing wrong with using tables for layouts if you want to maintain the tangled mess that comes from nesting tables (along with a whole host of other problems). Hal Helms once said that simple code is elegant code and I agree. By separating my content from my presentation my HTML is simple and easy to both write and maintain. My pages are smaller, take up less bandwidth and load faster (giving a better user experience). We've gotten into the habit of taking a photoshop file, hacking it up and then presenting that as our page (heck Fireworks does that for us automatically). MS: Do pages built using tabled layouts present any other problems? SC: Yes they do! First off, by building pages the way we have done them, we decrease the accessibility of our sites for people who don't come at them using the popular browsers we are familiar with. Tabled layouts create difficulties for those who are blind and use screen readers to read web pages as well as for those people (and there are more everyday) who are checking out sites on PDA's and Mobile Phones. Yes we could write duplicate sites to support these devices, but why bother? Just get rid of the tables. When we separate content from presentation we make sure that our sites will run on devices now and in the future. The second problem with building tabled sites is that we focus so much on what the page looks like, we forget that the HTML behind the page has meaning. Creating content that is structured is important. I can't tell you how many times I have seen <td class="heading1">Heading </td> rather than <h1>Heading</h1>. By creating markup that means something (semantic markup) to the actual document, we create documents that are easily read and understood by machines (including search engines). Also (and a big coup from my point of view) Structural markup gives us many more hooks to style with CSS. It is much easier to select just H2 headings and style them a certain way then to have to go through my site and use a class for those items to style. MS: Makes sense. Do you have to code CSS for each browser differently? SC: For the most part, most modern browsers fully support the standards promulgated by the World Wide Web Consortium (http://www.w3c.org). So the beauty of that is that when you create a web page that is standard it will work across all browsers that also support that standard. So by writing to the standard, rather than the browser, we create web pages that work across the spectrum. This presupposes of course that you are writing your pages using the proper DocType so that browsers know to render your pages in a standards based way, rather than relying on the quirky way they render older pages. MS: I have heard that IE doesn't fully support CSS. What browsers support CSS in this way? SC: Actually IE does support CSS, however IE6 is 4 years old and Microsoft has stated that the next version will come out with Longhorn (Microsoft's newest operating system) sometime in 2006. There are some things that IE doesn't support, such as min- height, hovering on anything but an anchor element and some of the advanced selectors (as well as a heck of a lot of bugs which haven't been fixed). However, thanks to a man named Dean Edwards, a JavaScript file called "IE7" can be run before any style sheets are loaded which will allow Internet Explorer 5.x and 6 to be much more CSS compliant. MS: Are there any problems with using CSS in IE? SC: One of the biggest problems with Internet Explorer is that Microsoft has loaded it with non-standard features such as overflow on the HTML element (rather than supporting the standard CSS element correctly). If people use these items (which are very poorly documented) then they lock themselves and others seeing their site into IE only, which in today's market (with IE actually losing percentage points lately) is a poor choice. As for browsers which do support CSS pretty much fully, take your pick. There's Opera, Mozilla, Netscape, FireFox (my favorite), Camino, Safari and probably more that I don't know of. Most of the modern browsers are taking great pains to implement the standards. MS: Isn't learning CSS just knowing a list of what properties there are and using a smart editor with property completion? SC: Nope, would be nice though. But Cascading Stylesheets support Cascades, Inheritance and Specificity. All of these items work together, so properties can be overwritten through the Cascade, or Inheritance. Or two similar properties can apply to the same element but only one can be applied. Which one wins? For that you'll have to come to my class. Also there are very specific ways in which the box model is applied to either block level or inline elements and that isn't apparent from properties. There are also the different layout models and what properties they affect. Cascading Stylesheets are very powerful, but in order to use them well, you need to know the nitty gritty. It really is both an art and a science. MS: Do you need to know ColdFusion to come to the class? The registration form asks about ColdFusion skill level... SC: There is no ColdFusion skill required - it is just a standard question on the TeraTech class form! MS: Can you give us a sense about the level of this class? Will it dwell on the most basic aspects of CSS, or will it really delve into more of the complexities with an eye toward standards- based markup and accessibility? SC: I do spend time on the basics, but with an eye towards bringing both someone new to CSS up to speed on it as well as to make sure that people who have been coding in CSS understand the true basics as well (different types of selectors, what different absolute or relative values mean, etc). I go very deep into both the block and inline layout box models, floats, positioning, and typography. We also cover styling lists, forms and Cross Browser CSS. There are a few things not covered in this class, but I will probably end up offering a 1 day class on these items, they are: non screen media, tables, generating content and a few miscellaneous tags. These items are fairly advanced and with the exception of tables not well supported across browsers. I actually came into CSS from an interest in accessibility, however this class is not an accessibility class though I do touch on (and probably nag on) semantic structural markup. MS: The class is four days long - why so long for one subject? SC: There is so much to cover! I am a programmer, not a designer and frankly I structured the class from that point of view. While there are hands on sessions, they are designed to have you used what you learned, rather than just "follow along". I think that if I made the class one day I would be doing you a disservice. Far better to get into the subject fully and really understand the complexities so that when you leave the class you have a good basis for knowing and understanding what is going to happen. MS: How will the hands on part work? SC: Bring your own laptop, A week before the class I'll be sending out a list of free software to download to have with you. Each class is divided up into sections and each section consists of a lecture and then a hands on portion. I'll have sample files and worksheets to do. There will also be portions that are just labs where I take a real world example of a tabled layout and over the course of the class the students will work on turning it into a CSS enabled page using the things they have just learned. The first day basically turns it into a more structured layout, by the second day, they are working with typography and lists and after the third day, they are actually moving the tabled layout to a tableless one. I've structured it this way since I know that for a lot of people, the idea of converting a site they have already done into CSS is daunting and this way there is a structure they can follow. For the last part, well, the last half day is basically restyling the CSS Zen Garden page (http://www.csszengarden.com) which is an amazing site. People take the basic page and working only with the style sheet turn the page into a whole slew of different designs and layouts. It truly shows the power of CSS. MS: That sounds both cool and useful! See you there. ---- CS201H - "CSS Hands On" Training by Sandra Clark CS201H - CSS Hands On course - $1399 October 11th - 14th 2004. Registration/Sign-in 9:30am Class 10am - 5pm Assumes that you bring your own laptop. Laptop rental extra. Have you been hearing all the hype about Cascading Style Sheets and just don't get it? You know you should be using them more, but you just know you could be doing better? Learning CSS properties isn't enough, knowing when to apply them, how to select for them and the underlying rules which govern their behavior is critical to being able to pull yourself into the web standards age. In this 4 day, hands on class, Sandra Clark, will unlock the mysteries of CSS. This class is not a design class, rather it goes into the hows and whys of how selectors, properties and browser interact. You will learn what to do, but also why you do it. Hands on labs help you to explore your creativity, as well as how to design HTML and Style sheets that are easy to read and maintain. Syllabus * Day 1 o Section 1 - Introduction to Cascading Style Sheets + Benefits of CSS + Web Standards + HTML, XHTML & CSS + DocTypes and Web Standards + Associating Styles with Documents o Section 2 - Elements and Basic Values + Value Representations + Color Values + Length Values + Percentages + URI Values o Section 3 - Style Rules and Selectors + The Rule Structure + Selectors + Inheritance, Cascading and Specificity + Psuedo Classes + Elements + @ Rules o Lab - Cleaning up an older Web Page * Day 2 o Section 1 - Colors and Backgrounds + Setting Colors + Colors with Borders and Forms + Backgrounds + Background Images and Positioning o Section 2 - Lists + List Elements + List Types + List Properties + Styling Lists From Simple to Popup o Section 3 - Typography + History of Web Typography + Types of Fonts for Screen and Print + Which fonts are best? + Font Properties + Text Properties + Textual Content vs. Images o Lab - Applying Typography, Backgrounds, Color and List styling to an existing page. * Day 3 o Section 1 - The Box Model + The Box Model + The Inline Layout Model + Margins + Borders + Padding o Section 2 - Positioning and Layouts + Floating + Positioning + Overflow, Clipping and Visibility + Absolute Positioning + Tableless Layouts o Lab - Applying a Tableless Layout * Day 4 o Section 1 - Web Forms + Web Forms need Structure + Tableless Forms + Styling a Form for the Screen + Styling a Form for Print o Section 2 - Cross Browser CSS + Hiding Stylesheets from Older Browsers + Graceful Degradation + Browser Bugs + CSS Filters + IE 7 o Lab - Walking in the Garden, styling the CSS Zen Garden Registration at http://www.teratech.com/training/oc_classes.cfm##CS201H -- TeraTech is hiring a senior developer to join our growing team http://www.teratech.com/index.cfm?go=About.JobDetail&JobID=7 Due to TeraTech's growth we are seeking winning sales people to sell custom software. For more details: http://www.teratech.com/index.cfm?go=About.JobDetail&JobID=3 Michael Smith, TeraTech, Inc 405 E Gude Dr Ste 207, Rockville MD 20850 Voice: +1-301-424-3903 x110 Fax:301-762-8185 Web: http://www.teratech.com/sig/ Email: mailto:[EMAIL PROTECTED] ICQ: 66057682 Winner in CFDJ awards Best Consulting. Member Team Fusebox. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Find out how CFTicket can increase your company's customer support efficiency by 100% http://www.houseoffusion.com/banners/view.cfm?bannerid=49 Message: http://www.houseoffusion.com/lists.cfm/link=i:4:222995 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4 Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
