[Pro] Body and p and css menu

Freeway
1

Confused about styles! What do body and p exactly do and what are their differences? What is the function of setting textstyle in documentsettings? Do you use both p and body or do you set a p tag for the body style?

I changed my styles and my css menu now has the wrong typeface and changing it in the inspector does not help. It looks like changing the body typeface is the only way to change the typeface in my css menu. I thought changing it through the inspector would overrule the body typeface; but that does nothing. This css menu problem made me rethink about the p and body style, and now I do not understand their exact behaviour in my document.

I have chosen Helvetica and use it in my site with a 10, 11, 12 and 14 size. The latter I want to use in my css menu, and body is now set as 12px. Besides that I have used h1 to h5.
I have two masters: on one of them I now have applied the body style and it seems to me that this results in a css menu with helvetica 12 (as defined in my body style), On the other master it looks like another typeface in the css menu, but I do not understand where that one comes from!
I have also set a p style as helvetica 12; is this the one that defines my css menu style?
See… I am confused, but I am sure there is someone out there who can give me some guidance. For instance, what is the best way to set up a stylesheet with Helvetica and the sizes I use?

Http://www.appadvies.nl

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Hi,

body and p are html tags, so styles created for those elements
automatically apply to those tags in the html generated by Freeway Pro. In
other words, you don’t have to “apply” them in the application.

That said, you will notice in the Style Editor window that when selected,
the names of those styles appear in the left-side “Tag” input box at the
top of the window. Most of the styles you make (and FWP auto-generates)
have their names appear on the right-side “Name” input. Fundamentally, this
is how Freeway Pro separates CSS style definitions for tag elements from
CSS style definitions for class elements.

Now, classes and tags are a whole topic in and of themselves. Let me just
address your present font concern, but I trust you will explore this
subject on your own later. CSS Introduction

Freeway Pro let’s you set the font-family attribute on just about
everything. But smart use of CSS will allow you to set fonts in a far more
intelligent fashion.

Body Tag - An html page is made up of several code sections. The body
tag in html describes the section of the page we actually see in the
browser. When you set the font family on the body element, you are
setting the font for pretty much everything that appears in the browser
window. Setting it to helvetica there sets everything on the page, unless
contradicted by a different style definition. It also has the benefit of
working automatically, without having to be “applied” to every instance of
text.

p Tag - The p or “paragraph” tag only describes text that is not a
header, list, blockquote, etc. Most of us think of p tag text as the text
part of a page. Setting the font family on this tag will affect all plain
text and does not need to be applied in the traditional sense either. It
will also over-ride any font-family setting from the body tag.

Now, because CSS “cascades” or builds in stages - like a waterfall - you
can use the over-ride to your advantage. Styling the body tag with one
font and the p tag to another is a simple way to affect a whole lot of
code. This means header tags (h1, h2, etc.) can just focus on size. Or,
set the font on the body tag and forget the p tag… then setting font on
the headers will make sure only the headers are different.

I hope that sorts some things for you. But what happens when you style a
page with a font the end user doesn’t have?

CSS can be used to create “fallbacks” for just this case…
http://www.w3schools.com/cssref/pr_font_font-family.asp

In your example, the font set you’ve chosen starts with “arial” (similar to
helvetica, generally found on Windows machines) then if that isn’t found,
tries helvetica. If that’s not found either, it goes to whatever font the
user has set for “sans-serif” use. Something eventually gets used, there’s
no danger that your text won’t be readable - just not styled the way you
like.

You can edit Font Sets in Freeway Pro to control the order this process
follows, though if you want them to be available to all new documents you
must close all open FWP files first. I like helvetica too, so I made a set
in which it appears first - insuring that if users have it they will see my
work that way. If they don’t, then they are banished to the alternatives.

Sorry for the long post everyone - hope this is helpful and instructive.

–
Ernie Simpson

On Tue, Jan 22, 2013 at 12:13 PM, Wimdg email@hidden wrote:

Confused about styles! What do body and p exactly do and what are their
differences? What is the function of setting textstyle in documentsettings?
Do you use both p and body or do you set a p tag for the body style?

I changed my styles and my css menu now has the wrong typeface and
changing it in the inspector does not help. It looks like changing the body
typeface is the only way to change the typeface in my css menu. I thought
changing it through the inspector would overrule the body typeface; but
that does nothing. This css menu problem made me rethink about the p and
body style, and now I do not understand their exact behaviour in my
document.

I have chosen Helvetica and use it in my site with a 10, 11, 12 and 14
size. The latter I want to use in my css menu, and body is now set as 12px.
Besides that I have used h1 to h5.
I have two masters: on one of them I now have applied the body style and
it seems to me that this results in a css menu with helvetica 12 (as
defined in my body style), On the other master it looks like another
typeface in the css menu, but I do not understand where that one comes from!
I have also set a p style as helvetica 12; is this the one that defines my
css menu style?
See… I am confused, but I am sure there is someone out there who can
give me some guidance. For instance, what is the best way to set up a
stylesheet with Helvetica and the sizes I use?

Http://www.appadvies.nl

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thank you Ernie! This is helpful. Only thing is: does Freeway add the p tag automatically to a block of text? In the reference section on styles it says that its good to add the p tag to a style you name bodytext ( you enter this name in the right ‘name’ field).
But as stated, I read also that Freeway adds p automatically.
The reference also says that after defining this p tag to the bodytext, you can override this by applying other styles to a item, page, or textselection.

So… Do you suggest it is a good idea to use the body tag, forget about the p tag and use other styles like h1 and so on and styles for textsize?

And… What are your thoughts about styling my css menu? Should I normally be able to style it with any style I want? And are the troubles I am experiencing now due to my bad definitions of body and p tags?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

On Jan 22, 2013, at 2:08 PM, Wimdg wrote:

Thank you Ernie! This is helpful. Only thing is: does Freeway add the p tag automatically to a block of text? In the reference section on styles it says that its good to add the p tag to a style you name bodytext ( you enter this name in the right ‘name’ field).
But as stated, I read also that Freeway adds p automatically.

Freeway wraps all HTML text that doesn’t have a different container tag selected (like list items, headers, etc.) with a p tag. Normally, this tag is left un-styled, and any changes you make to text are added locally, either by wrapping a fragment of a paragraph with a span, strong, or em tag (say, to bold a word or two), or by adding a classname to the p tag, as in <p class="style42">...</p>.

The reference also says that after defining this p tag to the bodytext, you can override this by applying other styles to a item, page, or textselection.

Yes, CSS styles stack up like layered color filters on a light box – each one building on the ones below it.

So… Do you suggest it is a good idea to use the body tag, forget about the p tag and use other styles like h1 and so on and styles for text size?

First, you need to read a little bit about semantic styles. The H1-6 tags are not there to make things bold or large, they are there to provide machine-readers like Google or literal-minded humans with a sense of overall document structure. H1 is the most important tag on the page, and it should contain a single thought (mirrored in the page’s Title tag) that indicates the over-arching subject for your entire page. Ideally, you should only have one H1 per page. The next paragraph of text (in source order) is the most important paragraph on the page, developing the subject stated in the H1. The next header (to define a primary sub-topic) should be your H2. And so on down the hierarchy. You may have three primary sub-topics, so three H2 tags, with H3 and H4 sub-topics below each of those. Think of this as an outline, because that’s what it is.

There is no rule that says that H1 has to be big or bold. It could be tiny and gray if that’s how you want it to look. But in the deep space (where nobody can hear you scream) of Google’s sentient server farm, H1 (regardless how it looks) screams the loudest.

To answer your earlier question, you should do whatever causes you the least work. If you style the body to use a particular font, and you like that font for heads and paragraph text and list items, then you’re done – go to the pub and order a pint. If you want to style h1 in a particular font, then just add the font there. You won’t have to worry about it elsewhere, and you won’t have repetitive rules in your stylesheets that set the same defaults over and over. In addition to being lazy, you’re being very nice to your server, bandwidth bill, and visitors. Less is truly more!

Walter

And… What are your thoughts about styling my css menu? Should I normally be able to style it with any style I want? And are the troubles I am experiencing now due to my bad definitions of body and p tags?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Thanks Walter, I agree about Google and the headers. Used them as well as having same titles. Love less is more!

Only problem is that on my masters in the css menu box, the font used is not showing! All pages show the Helvetica font (both in Freeway and in the browser) but strangely my masters do not show Helvetica, but Times I think!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Here’s a trick that sometimes works for me when Freeway Pro doesn’t update
my font style while in the working view mode…

Select the problem text and make a note of what style(s) are applied to it
from the Style Palette. Then choose menu Style > Remove Styling.
Reapply the style(s) to it from the Style Palette.

This sometimes gets Freeway Pro to update the working display.

–
Ernie Simpson
aka The Big Erns

On Wed, Jan 23, 2013 at 10:18 AM, Wimdg email@hidden wrote:

Thanks Walter, I agree about Google and the headers. Used them as well as
having same titles. Love less is more!

Only problem is that on my masters in the css menu box, the font used is
not showing! All pages show the Helvetica font (both in Freeway and in the
browser) but strangely my masters do not show Helvetica, but Times I think!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Thanks! Will try that.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options