HTML authoring - specifying a font

63 views
Skip to first unread message

Nori Muster

unread,
Mar 15, 2018, 9:14:13 PM3/15/18
to BBEdit Talk
I know how to set a typeface using <font face=“helvetica”> </font>
But is there a way to change the whole document at the same time, like to put helvetica in the <body> line?

Rick Gordon

unread,
Mar 15, 2018, 9:32:22 PM3/15/18
to bbe...@googlegroups.com
Technically, you could, but it's considered very bad practice in any to
use any font tags in HTML. And font tags have been deprecated for
years. You should always assign fonts (and, as much as possible, any
code affecting presentation) in CSS, and you can assign them to the body
element there.

The one possible consideration where it might be considered acceptable
is in HTML email, but even there, you should assign it as CSS (using
font-face or font-family).

Don't do it!

Rick Gordon

--------------------
On March 15, 2018 at 6:25:38 PM [-0700],
Nori Muster wrote in an email entitled
"HTML authoring - specifying a font":
> I know how to set a typeface using <font face=“helvetica”> </font>
> But is there a way to change the whole document at the same time, like
> to put helvetica in the <body> line?
___________________________________________
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___________________________________________
WWW: http://www.shelterpub.com

Jean-Christophe Helary

unread,
Mar 15, 2018, 9:43:55 PM3/15/18
to bbe...@googlegroups.com

On Mar 16, 2018, at 9:53, Nori Muster <norim...@gmail.com> wrote:

I know how to set a typeface using <font face=“helvetica”> </font>
But is there a way to change the whole document at the same time, like to put helvetica in the <body> line?

Yes, it is a technology that's called CSS (cascading style sheets) and it's been around for a very long time.

You may want to check the W3schools tutorials to get up to speed:


Jean-Christophe Helary
-----------------------------------------------
http://mac4translators.blogspot.com @brandelune


DavidWeinberger

unread,
Mar 16, 2018, 10:20:20 AM3/16/18
to BBEdit Talk
To save a click:

To put style info into the HTML doc itself, in the <head> section you'd add something like this:

<style>
  body{
     font-family: Helvetica, sans-serif;
  }
</style>

(The san-serif provides an alternative for browsers that don't have the Helvetica font installed, which will be approximately 0% of browsers, I believe.)

David W.

Nori Muster

unread,
Mar 16, 2018, 11:34:49 AM3/16/18
to BBEdit Talk
Thanks David - this may be a good alternative to learning CSS like everyone else recommended, but maybe it's about time I learn CSS anyway. 
Oh computers - why do you challenge me all the time?
Thank you for the code, Ill try it. Does <style> go up there above or below <body>? I'm guessing just below <body>.
Nori

Nori Muster

unread,
Mar 16, 2018, 11:34:55 AM3/16/18
to BBEdit Talk
Okay, that's what Rick said too. I guess it's time for me to put on my thinking cap and go learn CSS.
I feel like I'm too old to learn more tricks, but here's a good reason to do it. I'll go to W3schools and find out what it's all about.
Nori

Nori Muster

unread,
Mar 16, 2018, 11:35:03 AM3/16/18
to BBEdit Talk
Hi Rick - I don't do CSS!!!
How difficult/easy is it to set up a CSS style sheet?
I'm fluent in html but don't read or write CSS and don't understand it.
My host has CSS files set up but I don't use them.
Nori

David Weinberger

unread,
Mar 16, 2018, 12:50:22 PM3/16/18
to bbe...@googlegroups.com
Nori,

If you want to include it in the *.html file, you could put it after <body> -- that'll work at least in Chrome, Firefox, and Safari (I didn't try that Windows browser) -- but it should go between the <head> and the </head> tags.

I feel odd using the word "should" since part of my reaction to your original question is: if you're more comfortable inserting formatting commands directly into HTML tags, go ahead; it's likely that browsers are going to continue to support deprecated markup because they don't want the pages they display to look broken compared to how they look in other browsers.

But since you seem interested in learning CSS, I'd encourage you to do so.
  • It makes it easier to change your mind: alter the definition of "p" once in your CSS and all instances will update. (Put a page's CSS definitions into its own file and by altering that file you can alter the look of multiple pages all at once.)  

  • It is intellectually elegant for it makes clear the distinctions between content, structure, and format.  

  • It's modern, so you don't have to worry (as much) about your code breaking once the syntax of your font stylings goes the way of the <blink> tag.

Once you get started with CSS, you'll discover all the ways it's inelegant, or at least a pain in the butt, or at least counter-intuitive. But that's why we have search engines and friendly conversational forums.

Enjoy your exploration!

David W.


--
This is the BBEdit Talk public discussion group. If you have a
feature request or would like to report a problem, please email
"sup...@barebones.com" rather than posting to the group.
Follow @bbedit on Twitter: <http://www.twitter.com/bbedit>
---
You received this message because you are subscribed to a topic in the Google Groups "BBEdit Talk" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/bbedit/3jt3x6QXuJg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to bbedit+unsubscribe@googlegroups.com.
To post to this group, send email to bbe...@googlegroups.com.
Visit this group at https://groups.google.com/group/bbedit.

Nori Muster

unread,
Mar 16, 2018, 3:54:33 PM3/16/18
to BBEdit Talk
Something like this?


<HEAD>
<TITLE>Sandcastle Condo Community</TITLE>
</HEAD>

<style>

  body{

     font-family: Helvetica, sans-serif;

  }

</style>

<BODY bgcolor="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF0000" ALINK="#000088">


. . . . and yeah, thank god for bulletin board forums.



To unsubscribe from this group and all its topics, send an email to bbedit+un...@googlegroups.com.

David Weinberger

unread,
Mar 16, 2018, 4:52:20 PM3/16/18
to bbe...@googlegroups.com
Well, _something_ like that :)

Here's something closer to what you want, if you want to embed the CSS in the html page itself.
----------------

<!DOCTYPE html>
<html>
<HEAD>
<TITLE>Sandcastle Condo Community</TITLE>

<style>

  body{

     font-family: Helvetica, sans-serif;

     background-color: #FFFFFF;

     color: #000000;

  }

  a:visited{

    color: #FF0000;

  }

  a:link{

    color: #0000FF;

  }

  a:active{

    color: #000088;

 }

</style>


</HEAD>


<body>

   <p>Some sample text</p>

</body>

</html>

--------------


Differences to note:


1. Since you have defined the format of BODY in the <STYLE> section, you don't have to specify it in the BODY tag itself. In fact: Don't.


2. The ALINK and VLINK tags are officially not supported in the latest version of HTML (HTML 5). Instead, you should define the various states of a link (i.e., the <A> tag) with a colon and then the keywords as shown (I think).


3. The <STYLE> ... </STYLE> tags should be nested within the <HEAD> tag, which means both <STYLE> tags come *before* the closing of the HEAD tag (</HEAD>).


4. I added a standard document type declaration as the first line.


Note that I'm no expert in CSS, and undoubtedly more knowledgeable people on this list are going to want to correct and polish this. Also, I've never posted anything without making at least one embarrassing mistake.


Good luck.


David



To unsubscribe from this group and all its topics, send an email to bbedit+unsubscribe@googlegroups.com.

Rick Gordon

unread,
Mar 16, 2018, 5:28:25 PM3/16/18
to bbe...@googlegroups.com
Global style definitions go more commonly in the <head section>, though
styles can be added in the body section.

It's most common though to have the style sheet (or sometimes multiple
style sheets) as separate documents which are linked with a line such as:

<link rel="stylesheet" href="path-to-your-css-file.css" type="text/css" />
(Other attributes, such as id and media can also be included.)

Rick Gordon

--------------------
On March 16, 2018 at 2:22:52 PM [-0700],
Nori Muster wrote in an email entitled
"Re: HTML authoring - specifying a font":
> Thanks David - this may be a good alternative to learning CSS like
> everyone else recommended, but maybe it's about time I learn CSS anyway.
> Oh computers - why do you challenge me all the time?
> Thank you for the code, Ill try it. Does <style> go up there above or
> below <body>? I'm guessing just below <body>.

Rick Gordon

unread,
Mar 16, 2018, 5:38:22 PM3/16/18
to bbe...@googlegroups.com
The essential strategy, which has been the key factor in the improvement
of our web experience in recent years (along with more
standards-compliant browsers) is this:

You should not clutter up your HTML with any code affecting the way it
looks, except to add classes or id's to the HTML elements which are
defined in your CSS document(s) — ideally, not even to use inline CSS.

Rick Gordon

--------------------
On March 16, 2018 at 2:29:55 PM [-0700],
Rick Gordon wrote in an email entitled
"Re: HTML authoring - specifying a font":
> Technically, you could, but it's considered very bad practice in any
> to use any font tags in HTML. And font tags have been deprecated for
> years. You should always assign fonts (and, as much as possible, any
> code affecting presentation) in CSS, and you can assign them to the
> body element there.
>
> The one possible consideration where it might be considered acceptable
> is in HTML email, but even there, you should assign it as CSS (using
> font-face or font-family).
>
> Don't do it!

Rick Gordon

unread,
Mar 16, 2018, 5:50:31 PM3/16/18
to bbe...@googlegroups.com
I just saw a mistake in my initial post, so this is just to acknowledge
the correction.

Where I said "using font-face or font-family," I should have said "using
font or font-family." (The font attribute is just a composite attribute
by which you can define font-family along with other attributes such as
font-size, etc..)

Rick Gordon

--------------------
On March 16, 2018 at 2:46:35 PM [-0700],
Rick Gordon wrote in an email entitled
"Re: HTML authoring - specifying a font":
> The one possible consideration where it might be considered acceptable
> is in HTML email, but even there, you should assign it as CSS (using
> font-face or font-family).

Jean-Christophe Helary

unread,
Mar 16, 2018, 7:33:28 PM3/16/18
to bbe...@googlegroups.com

On Mar 16, 2018, at 23:37, Nori Muster <norim...@gmail.com> wrote:

Thanks David - this may be a good alternative to learning CSS like everyone else recommended, but maybe it's about time I learn CSS anyway. 

What David sent is CSS.

If you check the link I sent you'll see that there are a few basic things that you have to know to do most of what you want. And no need to remember. Anytime you need CSS, just check the reference page.

Oh computers - why do you challenge me all the time?
Thank you for the code, Ill try it. Does <style> go up there above or below <body>? I'm guessing just below <body>.

The <style> tag defines an "internal style sheet" and comes *inside* the <head> tag (which is above the <body> tag).


Jean-Christophe 

Nori

On Friday, March 16, 2018 at 7:20:20 AM UTC-7, DavidWeinberger wrote:
To save a click:

To put style info into the HTML doc itself, in the <head> section you'd add something like this:

<style>
  body{
     font-family: Helvetica, sans-serif;
  }
</style>

(The san-serif provides an alternative for browsers that don't have the Helvetica font installed, which will be approximately 0% of browsers, I believe.)

David W.


On Thursday, March 15, 2018 at 9:43:55 PM UTC-4, Jean-Christophe Helary wrote:


On Mar 16, 2018, at 9:53, Nori Muster <norim...@gmail.com> wrote:

I know how to set a typeface using <font face=“helvetica”> </font>
But is there a way to change the whole document at the same time, like to put helvetica in the <body> line?

Yes, it is a technology that's called CSS (cascading style sheets) and it's been around for a very long time.

You may want to check the W3schools tutorials to get up to speed:


Jean-Christophe Helary
-----------------------------------------------
http://mac4translators.blogspot.com @brandelune



--
This is the BBEdit Talk public discussion group. If you have a
feature request or would like to report a problem, please email
"sup...@barebones.com" rather than posting to the group.
Follow @bbedit on Twitter: <http://www.twitter.com/bbedit>
---
You received this message because you are subscribed to the Google Groups "BBEdit Talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to bbedit+un...@googlegroups.com.

To post to this group, send email to bbe...@googlegroups.com.
Visit this group at https://groups.google.com/group/bbedit.

Robyn Peterson

unread,
Apr 10, 2018, 4:45:16 PM4/10/18
to BBEdit Talk
Hi David, 

I am also new to code editing and am just starting to learn CSS. I wondered if you had any specific sites or user forums you've found that have been especially helpful in programming new Cascading Style Sheets?

Thanks!

Robyn P. 
To unsubscribe from this group and all its topics, send an email to bbedit+un...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages