A lot of folks are whining and moaning because Dreamweaver CS4 now enforces the use of CSS styles rather than HTML attributes for formatting. One of the things this means is no more font tag (and its related attributes).
That’s a good thing in my book. No more code like this:
<p><font color=”#003399″ size=”5″ face=”Tahoma, Geneva, sans-serif”>paragraph 1…</font></p>
<p><font color=”#003399″ size=”5″ face=”Tahoma, Geneva, sans-serif”>paragraph 2…</font></p>
<p><font color=”#003399″ size=”5″ face=”Tahoma, Geneva, sans-serif”>paragraph 3…</font></p>
Well you get the idea!
But CS4 has a dirty little secret and , against my better judgement, I’m going to reveal it:
IT’S STILL POSSIBLE TO USE THE DREADED FONT TAG!
The secret is CS4′s Wrap Tag… and Edit Tag… commands, both of which are accessed from a pop-up menu that appears when you right+click on a selection in the Design window. Here’s how it works:
- In the Design window select some text.
- Right+click on your selection and select Wrap Tag… from the pop-up menu.
- In the Tag Editor dialog type in <font> (or choose it from the tag list) and press the Enter key twice (once to “set” th tag and once to dismiss the dialog). The text will remain selected.
- Right+click once again on your selection and select Edit Tag <font>… from the pop-up menu
- In the Tag Editor – font dialog, make your selections for Face, Size and Color and click OK.
If you look at your code you’ll see something like this (shudder):
<font color=”#FF0000″ size=”+2″ face=”Tahoma, Geneva, sans-serif”>content</font>
That’s all there is to it.
To edit an existing font (or some other HTML) tag:
- Select the entire tag by clicking within the tag in the Design window AND then selecting the tag from the tag listing in the status bar at the bottom of the Document window..
- Right+click on your selection and select Edit Tag <selected tag>… from the pop-up menu.
- Edit the tag attributes in the Tag Editor dialog and click OK.
Just don’t tell anyone I told you how to do it.
As always, feel free to comment here or email me with your questions, comments and suggestions. And please follow me on Twitter (DWcourse) for additional Dreamweaver news and tips.
{ 10 comments… read them below or add one }
OK – i am a graphic designer turned – apparently by demand – an html email designer! I am struggling with inline styles. I THOUGHT i just created an email in dreamweaver with inline styles and they tell me now its css. How DO YOU EXACTLY create an inline style for fonts? Everything i search shows you css (which i pretty much get BTW) but cant use for email campaigns. Do I try the workaround you mentioned at the top post? Thanks so much – Amy
Inline styles (an example is
are CSS but you CAN use them in emails. You can set other font properties the same way. If use the font-family property, limit yourself to the core set of fonts found on most computers.
BTW, this article has some more tips for creating HTML emails: http://groundwire.org/support/articles/css-and-email-newsletters
Teaching people how to continue using DEPRECATED MARKUP, is not a good idea… mho… and I’m not a CSS expert, (just a hobbyist struggling and wrestling with BUILDING websites). But CSS CAN be learnt. I did so, by just googling and finding kazillions of CSS tuts on interent. Also picked up a book or 2. I highly reccommend the following books: Russ Weakley’s “Sams Teach Yourself CSS in 10 Minutes”and e.g.: : Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition”by: By Ian Lloyd. And to be honest: CSS is realy fun (sort of a puzzle).
I don’t recommend using deprecated markup but there are situations (making updates to old pages, etc.) where iit can be justified. When I’m teaching I always stress using CSS which, I admit, can be fun in a geeky sort of way. Still it takes a lot of time and effort (much more than 10 minutes) to master. I’ve been using it for years and I’m still learning!
Alas, emails (like used by online email marketing) don’t all support CSS. I just got CS4 and was stuck trying to find the ‘old’ way. And then had to try and remember how to do the ‘old’ way. sigh.
but thanks for posting this solution, it is still needed.
It’s unfortunate that email programs aren’t keeping up with browsers.
I have a bit of a red face here…I’ve just read the online manual for Emma, the email service I’ve started using, and here’s what they say:
“To ensure your styles carry through when viewed in someone’s inbox, it’s best to write inline styles within the or tags. Here are a couple of examples:
(div styles and td styles shown here)
Font tags are quickly being phased out by the email environment, so it’s best to avoid them altogether. Web browsers and email clients are moving to CSS and inline styles like the examples above.”
so there ya go; maybe I don’t have to retro-learn any more after all.
Good news! And don’t be embarassed, I learn stuff everyday that’s old news to everyone else. BTW, CS4 makes the creation of inline style relatively easy.
Thanks JCook. I’m going to try your workaround for using the font tag. I just moved from DW8 to DW CS4 and was thinking I was crazy because for the life of me I couldn’t figure out how to change font size in CS4. I understand CSS somewhat, but it doesn’t make sense (to me, anyway) to have to create a new CSS class or ID every time I just want to change the size of one word.
I’d still encourage you to continue learning CSS. I know it seems like a lot of effort to change just one word but consider that if you create a style (say .special) and apply it to that one word, it also becomes available for future use. Then, say you use it on 10 words throughout your site. To change them all only requires changing one line of code in your style sheet (no searching for all the instances, no updating all the pages).
In addition, well constructed CSS-based sites are much easier to make design changes to.
Bottom line is there’s little harm in “cheating” with a font tag occasionally with the font tag but it is poor practice and eventually may cause problems.
{ 1 trackback }