I’ve written a fair old bit about CSS, and continue to do so. The time honoured method of starting a CSS article or book for beginners, is to start out with a comparison between font tags and CSS for simple text styling. I have a bunch of CSS books on my shelves, including my own, and all start out from this point.
My question then is whether this is still a valid and useful starting point. Are there still people using the HTML font element to style text, and who need this comparison? Or is it just going to serve to confuse beginners who have never encountered a font tag in their lives and just want to know how to style text?
Let me know your thoughts or experiences by adding a comment to this post. I’d be really interested to know.
20 Comments
That’s a great question. I’m running into a lot of people these days who get what CSS is and can use it for styling, but get lost on doing anything beyond simple font styles. I’m not so sure the font tag is the only place to start but may still be the best way for those who ARE just beginning with CSS. But for those who have some very basic experience in working with font styles, the best place to start may be simple id/class conversation and basic semantic markup (excluding all talk of actual CSS code in the beginning). Wow, lots to think about! 🙂
Yep, still seeing stacks of font tags & tables in new sites. I was lucky enough to start with CSS and keep going with it so have never used font tags myself but its a good illustration of the differences and one to keep newbies like I was from using them by mistake. Also, I’d say a good plain English description of the differences between class and id is always another good starting point as I pesonally found this one of the most confusing issues early on.
I use the FontMustDie Greasemonkey script, which tells me each time it strips a font tag from a page. And, oh boy, do they still use font tags.
Even sites that should be all-CSS (i.e. Flickr) are still using them.
When I first starting building real websites, about 3-4 years ago, I started with CSS from the off. That said, I was friends with Simon, so not much choice!
I did find it quite confusing that everyone compared everything to these font tag things I’d never used, so I would definitely have appreciated a start from scratch, not from comparison, approach.
These days when I explain what I’m doing to people I build websites for, I don’t tend to talk about the “other” way of doing it at all. I just explain the content-presentation separation, etc etc and it seems to make sense to them.
Meri makes a great point. A boss of mine once told me he preferred to hire younger less experienced people because they were more trainable than more experienced people who were often stuck in a rute doing things the way they were taught. It was easier to train people without that influence. So, it makes sense to tell CSS students to toss out everything they know about web design and start with a clean slate, adding back basic (necessary) html code as they go. It seems they’d be less likely to say, “but wait, I like the font tag.”
I think starting from the font tag is historically linked with the worries about browser support people had a few years back. Designers were wary of going full CSS but saw the benefit of using it for styling fonts. This isn’t a valid issue anymore, so I think a clean start is a better approach.
Talking about general concepts is far easier for a wider audience to understand – a lot of people I talk to now are print designers wanting to get an intro into web design and font tags would mean little to them. Information on styling text should ideally start from a more general standpoint, and make a side note about the dreaded font tag as a warning to those users who have used it in the past.
Are you thinking of writing a new book on web design with CSS?
Just look at the amount of ms generated web stuff from word and frontpage etc and you’ll see the amount of font stuff going on.
Personally i like the font stuff as it’s quicker to type in font face=arial than trying to remember what the name of the style was (especially if there are a lot of styles)
For me, the break-away from font tags and table-based layout came when I left an in-house intranet design environment that was totally old school – the volume of code far exceeded the content it contained and I knew there had to be a better way.
In an effort to learn CSS design, I made the decision never to use tables for anything other than tabular data and to look and learn how others did it.
I picked up one good book on the subject (which happened to be yours) and have never looked back – although I still class myself as a beginner with a lot to learn.
It’s not been an easy ride; particularly catering for varying browser support, which IE7 has not made any easier. So for me an understanding of positioning has to be key, also margin, padding and float rules.
I never got hung up on <font> tags and don’t think they are that relevant as a starting point. I guess it depends a lot on your past experience and your learning style, but for me it’s become important not to use CSS to try and replicate table-based layouts but to start from scratch and design within the CSS framework. In addition to ‘Tips, Tricks & Hacks’, I found exploring the Zen Garden one of the best learning experiences. Once you understand the design potential, font style and colour – and tables – become fairly insignificant. Which reminds me – I must get a copy of your latest…
“Just look at the amount of ms generated web stuff from word and frontpage etc and you’ll see the amount of font stuff going on.”
I think the point with that is that it’s GENERATED, not hand-coded. Admittedly, many people will choose to build a website like that (WYSIWYG is a low barrier to entry), but then they’re probably not the target audience for a new CSS book 😉
I think there’s a separate argument that generators like Frontpage and Word should produce better code, but Microsoft have only just managed to release a new version of IE, so let’s not hope for too much at once, eh?
I agree that the font comparison is an historic way of doing things in many texts. I would think that after an introduction to the different parts of CSS that a good approach would impress upon the reader the importance of semantic markup, and then maybe using CSS for layout rather than table elements.
In my opinion we should stop comparing the two now because people should have stopped the transition and the font tag should be history. I could understand a chapter at the end of a book outlining the history of html, so the newer designers/developers understand some of the older code they come across…
I suspect this will prompt a shudder amongst many, but I think the box model is the perfect starting point. Probably the most complex component to get one’s head around, it’s easy to “rehabilitate” the manual html coder or to educate the novice by demonstrating the power of boxes and divs. For an immediate visceral effect, it allows a site-builder to change colors, fonts, sizes, and page organisation in one hit.
Class and id follow naturally.
Lists immediately after.
Tables can be reserved for implementing real tables.
This approach puts the emphasis on the separation of content and presentation, and brings the novice straight to the most important part of page construction: Design. It also mirrors word processor use, showing useful things like header/footer/margin/justification concepts which so many are familiar with. My tuppence …
Isn’t it about the target audience for the book? if you were writing for existing designers who wanted to use CSS then the starting point would be different to a book for beginners to design.
is the book for complete newbies or switchers?
I’ve carved out a niche business just from building pages for designers using CSS and (x)html and most of them tell me they’re okay with using CSS for styling, but not for layout (probably due to all those books that focus on styling) If I were writing a book on CSS for the market that I observer it would be based on how to mark up a PSD using semantic html and CSS and getting it to work cross browser. So my starting point for “about CSS” would be how to use it for layout.
Hmm, not quite what you meant really, but hopefully it’s a helpful comment ;o)
I’ve been trying to educate those new to creating web pages (not necessarily designers, but people doing personal stuff and even
ackmyspace).I noticed my 12-year-old replying to a myspace comment and she used the font tag (I bit my tongue). I wish she could’ve learned CSS from the start instead of font tags and made it a habit. It’s going to be hard to get her to change at this point.
I think it’s time to teach inline CSS for stuff like this. Most CSS focus has been on external CSS and internal CSS. Maybe people need to learn inline just like they learned font tag.
I really have my doubts whether this is an appropriate starting point. May be this is more important for those who have been coding only with html for many years. Those who work with wysiwyg programmes may be don´t care about it too much. Nonetheless I think it is useful to mention the difference between the font tag and the css-text style approach at some point in the book.
I am a great fan of “The CSS Anthology” and I would like to buy a book which teaches CSS offering still more information on how to position elements and which includes a practical part about how to design your own WordPress Theme.
teaching webdesign – I found it quite tricky to find what would be a suitable starting point, mainly though when I have people in my class who have already dabbled in webdesign using DW, for example. In this case it’s a matter of dropping bad habits and adopting the new clean working method with CSS. It can be very confusing for people entirely new if I talk about things like the font tags etc – it becomes almost too much information to handle…
When I have only newcomers to webdesign in my class – this becomes an easier topic to approach and I start with the bascis of coding and discuss the box model as soon as my students understand the basic syntax. This then becomes a more digestable content to understand 😉
I think the starting points should be:
writing good markup
understanding the separation between content and presentation
understanding document flow and the difference between block and inline elements
Grok all this and you’re off to a very good start!
I published a website a few years ago for a local charity at http://www.crocusministries.org.uk using FrontPage Express and didn’t know anything about CSS. Now I’m having a life-changing experience and learning CSS from the ground up. For me, the comparison with etc. is useful but now I’m trying to remember body {font-family: Arial sans serif;} et al.
In my opinion, the natural way to teach webdisign is showing html and css as a team, as partners. The one is nothing without the other. Then differences between the usage of font tags and css only will confuse new students but maybe is a good help for old school who needs to leave bad habits
Most places that provide syntax highlighting for code, it seems, still use for colours. I’ve noticed Dean Edwards is an exception (uses span with inline styles) and the PHP manual (spans with no inline styles). Gmail uses , which I thought was a bit odd, since their layout is tableless.