HOME

Teaching Online Journalism

Tips for HTML5, part 6: A look at CSS3

Although I hear there are still some journalism programs where CSS is not taught, I’m going to assume that all those Luddites are working on bringing their design and presentation curriculum into the 21st century.

CSS is essential to design and presentation for the Internet. In this post I’m just going to provide a few links and try to summarize what students probably ought to know.

Students should have a basic understanding of how HTML and CSS work, and how they work together. When some journalists challenge me on this, I point out that in my undergraduate print journalism program back in the Dark Ages (before the Web), every single student was required to pass an editing course in which we learned to draw page layouts, spec headlines, crop photos, and use design tools such as a pica stick and a proportion wheel. Presentation has ALWAYS been an important part of journalism — and today’s presentation uses HTML and CSS.

Basic CSS does not change for HTML5. We will continue to use CSS to specify font families, the size of headings, colors for backgrounds and fonts and borders, spacing for margins and padding, and so on. We use CSS to position elements relative to other elements on the screen. We use CSS to create visual effects for navigation links.

One very useful resource for CSS is the Comparison of layout engines at Wikipedia. With simple color coding (green for yes, and salmon-pink for no), it shows us which Web browsers currently support which CSS2 and/or CSS3 selectors (such as id and class) and properties (such as margin, padding, width, and height). Selectors or properties that are mostly pink are not widely supported yet, so beginners do not need to worry about those yet.

Last week, Smashing Magazine published CSS Three — Connecting the Dots, which says:

Just because a property isn’t widely supported by browsers or fully documented at the moment, it doesn’t mean that we shouldn’t be working with it. In fact, I’d argue the opposite.

I am not disputing that — I’m only saying beginners should not try to learn everything all at once. In the Smashing article, author and Web designer Trent Walton shows us a bunch of cool experiments using several of the new CSS3 capabilities, such as:

Yup, CSS3 can do a lot of amazing new things. But you can get along just fine without them.

Another resource I’ll recommend is Advanced Selectors, at HTML Source. Author Ross Shannon introduces some advanced CSS3 techniques (again, not necessary for beginners to learn) such as combinators (h1 + h2; p > em) and new uses for the pseudo-classes (such as :hover).

As far as I’ve been able to ascertain, the CSS we have been using for the past few years will not change — that is, most of what we have been doing, we can continue doing. The big exception will be in the use of DIVs (see my previous “Tips” post for an illustration of this).

Ross Shannon at HTML Source has a streamlined introduction to CSS that is suitable for beginners. I have a short list of what I consider to be the essential CSS selectors.

I think journalism students should start with a simple HTML/CSS file that has already been styled according to correct Web standards. Their assignment should be to change specific properties and values — for example, change the red border to blue; change the heading font families. This is hardly rocket science, and it should fit in with any first design course in a journalism program.

For related posts, check out the “code” category here in this blog.


Categories: design, teaching


3 Comments

  1. Andy Mabbett says:

    “simple color coding (green for yes, and salmon-pink for no)” – tough luck if you’re colour-blind. I hope your students will avoid such as basic error.

  2. [...] Tips for HTML5, part 6: A look at CSS3 [...]

  3. [...] – I'll be reading these in the next few days: Part 1, Part 2, Part 3, Part 4, Part 5, Part 6. I'm not sure if she's finished with the series yet, so check for future [...]

Leave a Reply