473,378 Members | 1,309 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,378 software developers and data experts.

Where's the proper place for font attributes?

Hello all,

It stinks being a newbie! One thing that I'm not sure about with CSS
is: where is the "proper" place to put font attibutes? This has me a
little confused. Take the below style sheet (which is a work in
progress) as an example. If I don't put the font attributes in the
<body> <p> and <td> tags, the font will not appear the way I want (when
I work in FrontPage, anyway). It doesn't seem to be enough to put the
font attributes in the <body> tag, I have to put it everywhere if I
want my page to look uniform. Is this correct, or am I missing
something?
body { background-color: black; margin: 5 5 5 5 }

p { font-family: Arial; font-size: 13pt; color: white; line-height:
125%; margin-top: 5px; margin-bottom: 5px}

table {width: 100%; align:top; border-collapse: collapse; padding: 5px}

tr { vertical-align: top; text-align: left}

td { font-family: arial; font-size: 13pt; color: white; line-height:
125%; padding: 7px }

#tdfaq { font-family: arial; font-size: 13pt; font-weight: bold; color:
black; line-height: 125%; padding: 7px }

h1 { font-family: arial; color: white; font-size: 24pt; font-weight:
bold; font-style: italic; text-decoration: underline; text-align:center
}

..faq { background-image:url('images/background_faq.gif'); font-color:
black}

Thanks in advance for any replies. I ahev more questions that I will
post soon :>)

Viken K.

Jul 21 '05 #1
14 2634
On 21 Mar 2005 11:13:32 -0800, Viken Karaguesian <vi****@aol.com> wrote:
It stinks being a newbie! One thing that I'm not sure about with CSS
is: where is the "proper" place to put font attibutes? This has me a
little confused. Take the below style sheet (which is a work in
progress) as an example. If I don't put the font attributes in the
<body> <p> and <td> tags, the font will not appear the way I want (when
I work in FrontPage, anyway).
For starters: Download some (free of shareware) browsers to test your pages in.
Like Opera, Mozilla and FireFox. Don't rely on what FrontPage shows you. There
is no such thing as WYSIWYG.
It doesn't seem to be enough to put the
font attributes in the <body> tag, I have to put it everywhere if I
want my page to look uniform. Is this correct, or am I missing
something?

It should be enough. If you set a font-family as a property for the body
selector and do not specify it for other elements, the font-family will be
inherited by elements you don't set another font-family for. In your example I
don't see you setting a font-family for the body. body { background-color: black; margin: 5 5 5 5 }

Where is it at?

Also: the 5 5 5 5 won't do. If you set a length other then 0, zero, you need to
specify what it is. Is it em, en, ex, inch, cm, px, sheep, distance to the moon
and back? What is that 5?

Other comments (for now):
- you use a lot of fixed sized values. That is not such a good idea. Google voor
liquid or fluid design <http://www.google.com/search?q=liquid+OR+fluid+design>
- you use point for your font-size. Not a good idea either. Point is for paper.
For screen there are other, more useful lengths, such as 'em' or '%'. Google
this group and find out why a fixed size for fonts is not good design.
- you use font-color:black; there is no such property in CSS, you mean
color:black; Get used to working very exact and validate your work to find just
these strange anomalities at
<http://jigsaw.w3.org/css-validator/validator-uri.html> for your CSS and at
<http://validator.w3.org/> for your markup.
- you use table {width:100%;} and other styles that make me think you use tables
for you layout. Google for tableless design to find out why not to do that
<http://www.google.com/search?q=%20tableless design%20> and
<http://groups.google.com/groups?q=tableless+design&as_ugroup=alt.html%2C+co mp.infosystems.www.authoring.%2A>

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
Jul 21 '05 #2
Viken Karaguesian wrote:
It stinks being a newbie! One thing that I'm not sure about with CSS
is: where is the "proper" place to put font attibutes?
There are no attributes in CSS. CSS has properties. And "font" is generally
best avoided, short hand properties have a tendency to reset some
unspecified values unexpectedly.
This has me a
little confused. Take the below style sheet (which is a work in
progress) as an example. If I don't put the font attributes in the
<body> <p> and <td> tags,
Internet Explorer has certain issues with inheriting some properties into
tables, so you need to respecify some of them on table elements (e.g. table
{ font-size: 100%; } to use the same font size as the parent element.

It doesn't have a problem with elements other then table though, at least as
far as I'm aware.
the font will not appear the way I want (when
I work in FrontPage, anyway).
FrontPage is not a very good piece of software.
body { background-color: black; margin: 5 5 5 5 }
Its always a good idea to specify a foreground colour when you specify a
background colour. You might have a user who has a default scheme of black
on white (in fact, that's very common!) so they will get black text on a
black background.

Also, for lengths other then zero, units are required. (e.g. margin: 5ex; ).
The validator would have told you this: http://jigsaw.w3.org/css-validator/
p { font-family: Arial; font-size: 13pt;
Points are highly unsuitable units for use of screen.
http://css-discuss.incutio.com/?page=UsingPoints
table {width: 100%; align:top;
There is no align property in CSS (again - validator!)
.faq { background-image:url('images/background_faq.gif');


Internet Explorer for Mac has a bug in which is can't recognise urls of the
form: url('foo'), stick to url(foo) or url("foo") instead.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 21 '05 #3
Els
Viken Karaguesian wrote:
Hello all,
Hi you,
It stinks being a newbie!
No it doesn't -- it's the starting point of every professional ;-)
One thing that I'm not sure about with CSS
is: where is the "proper" place to put font attibutes?
Whereever you need them. Start with the <body> element, and where you
want it differently, you set it to that element.
This has me a
little confused. Take the below style sheet (which is a work in
progress) as an example. If I don't put the font attributes in the
<body> <p> and <td> tags, the font will not appear the way I want (when
I work in FrontPage, anyway).
As far as I know, <p> should take it from <body>, but <td> doesn't in
some browsers.
It doesn't seem to be enough to put the
font attributes in the <body> tag, I have to put it everywhere if I
want my page to look uniform. Is this correct, or am I missing
something?
Really, afaik only TD (and form elements like input and textarea)
sometimes doesn't take the styles from <body>.
body { background-color: black; margin: 5 5 5 5 }
margin: 5 what? Hobnobs? I reckon you mean 5px, as 5em seems a bit
wide as a margin. Or maybe you mean 5%, that's a good possibility too.
The browser isn't good at guessing though.
p { font-family: Arial; font-size: 13pt; color: white; line-height:
125%; margin-top: 5px; margin-bottom: 5px}
You do realize that you didn't set any font styles in the body in this
stylesheet, right?
table {width: 100%; align:top; border-collapse: collapse; padding: 5px}
align isn't a valid property, I think you mean vertical-align.
tr { vertical-align: top; text-align: left}
Those 2 properties should be set to the TD.
td { font-family: arial; font-size: 13pt; color: white; line-height:
125%; padding: 7px } #tdfaq { font-family: arial; font-size: 13pt; font-weight: bold; color:
black; line-height: 125%; padding: 7px }

h1 { font-family: arial; color: white; font-size: 24pt; font-weight:
bold; font-style: italic; text-decoration: underline; text-align:center
}

.faq { background-image:url('images/background_faq.gif'); font-color:
black}


font-color should be color.

And to all of the above: don't use pt for screen font sizes. Use %
instead.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Jul 21 '05 #4
Els wrote:
Viken Karaguesian wrote:
This has me a
little confused. Take the below style sheet (which is a work in
progress) as an example. If I don't put the font attributes in the
<body> <p> and <td> tags, the font will not appear the way I want (when
I work in FrontPage, anyway).


As far as I know, <p> should take it from <body>, but <td> doesn't in
some browsers.

IIRC this (that the font style is not inherited to <td> tags) only applies
when the browser is in quirks mode. (This behaviour probably dates back to
NS4 that doesn't works as expected in cases like
<font face="..."><table>....</table></font>
e.g. you had to insert the <font> tag into every <td>. These times where
really ugly...)
Using the correct doctype declaration to trigger strict mode should fix it
in IE (6 at least).

--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://www.odahoda.de/
Jul 21 '05 #5
me
"Viken Karaguesian" <vi****@aol.com> wrote in message
news:11**********************@l41g2000cwc.googlegr oups.com...
Hello all,

It stinks being a newbie! One thing that I'm not sure about with CSS
is: where is the "proper" place to put font attibutes? This has me a
little confused. Take the below style sheet (which is a work in
progress) as an example. If I don't put the font attributes in the
<body> <p> and <td> tags, the font will not appear the way I want (when
I work in FrontPage, anyway). It doesn't seem to be enough to put the
font attributes in the <body> tag, I have to put it everywhere if I
want my page to look uniform. Is this correct, or am I missing
something?
body { background-color: black; margin: 5 5 5 5 }

p { font-family: Arial; font-size: 13pt; color: white; line-height:
125%; margin-top: 5px; margin-bottom: 5px}

table {width: 100%; align:top; border-collapse: collapse; padding: 5px}

tr { vertical-align: top; text-align: left}

td { font-family: arial; font-size: 13pt; color: white; line-height:
125%; padding: 7px }

#tdfaq { font-family: arial; font-size: 13pt; font-weight: bold; color:
black; line-height: 125%; padding: 7px }

h1 { font-family: arial; color: white; font-size: 24pt; font-weight:
bold; font-style: italic; text-decoration: underline; text-align:center
}

.faq { background-image:url('images/background_faq.gif'); font-color:
black}

Thanks in advance for any replies. I ahev more questions that I will
post soon :>)

Viken K.


My experience is that in IE you should apply font attributes in your style
sheet to any elements you want to have that effect on. I therefore will
apply font attributes to <p> <td> <body> <div> <h1> <ul> etc. If I have a
piece of text I want to look different I will use a span tag (overidding or
in addition to the parent style) for that particular item. I recommend you
use pixels instead of points to indicate font size.
Signed,
me
Jul 21 '05 #6
> My experience is that in IE you should apply font attributes in your style
sheet to any elements you want to have that effect on. I therefore will
apply font attributes to <p> <td> <body> <div> <h1> <ul> etc. If I have a
piece of text I want to look different I will use a span tag (overidding
or
in addition to the parent style) for that particular item. I recommend you
use pixels instead of points to indicate font size.
Signed,
me


The funny thing is: when I used pixels as the font size, it didn't seem to
work very well. When I changed to points, the font seemed to look OK.
Jul 21 '05 #7
me wrote:
[...] I recommend you
use pixels instead of points to indicate font size.

There's a bad bit of advice. Use % or ems.
You've been hanging around here for a while. Why would you suggest such
a poor idea?

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 21 '05 #8
OK...I know that nobody likes Frontpage and everyone hates Microsoft,
but
that's what I have to work with for now :>) I do have Opera and
Firefox and
test things out on those browsers as well.

So if I put the font-size and type in the body tag, it should generally
work
within the other tags?

Thanks for all the replies.

I just need to keep experimenting until I find out how things work...

Viken

Jul 21 '05 #9
me
"Jim Moe" <jm***************@sohnen-moe.com> wrote in message
news:T7********************@giganews.com...
me wrote:
[...] I recommend you
use pixels instead of points to indicate font size.

There's a bad bit of advice. Use % or ems.
You've been hanging around here for a while. Why would you suggest such
a poor idea?


I suggested it because it work in IE on Windows. You're intilted to your
opinion but you didn't say why my advice is bad or my idea poor. Also see
this from my previous post in another thread:

This may be OT: Please excuse me but I'm going to throw a hand grenade. IMO
it's time to wake up and smell the coffee folks. It seems to me that many of
the most popular sites use fixed font sizes, usually in pixels, whatever
font they please and non-fluid layouts. With few exceptions the only people
I see not doing this are militant IE haters and fundamentalist designers
whose posts I read in NG's. As proof I offer www.weather.com. I don't say
this is a great site but everybody needs to know what the weather will be
like sometime.

In addition some people here say that if someone with such and such
browser/PPI/resolution etc etc etc visits site X that has a fixed font with
a fixed layout they will become disoriented or confused and immediately
leave. I disagree, those people have very likely already visited sites where
they experienced that phenomena and they know that their
browser/settings/preferences are what's affecting the site. IMO these people
are able to cope and have already found a work around that will accommodate
their needs. I think they're used to doing this on a regular basis and
aren't nearly as put off by it as some here might think.

May I offer my most humble apologies for the rude awakening I have visited
upon this rarefied group? ;-)
Signed,
me
Jul 21 '05 #10
me
"Viken Karaguesian" <vi****@NOSPAMcomcast.net> wrote in message
news:Vb********************@comcast.com...
My experience is that in IE you should apply font attributes in your style sheet to any elements you want to have that effect on. I therefore will
apply font attributes to <p> <td> <body> <div> <h1> <ul> etc. If I have a piece of text I want to look different I will use a span tag (overidding
or
in addition to the parent style) for that particular item.

I recommend you
use pixels instead of points to indicate font size.
Signed,
me


The funny thing is: when I used pixels as the font size, it didn't seem to
work very well. When I changed to points, the font seemed to look OK.


URL please, I'd like to see for myself. Thank you.
Signed,
me
Jul 21 '05 #11
me wrote:
[...] I recommend you
use pixels instead of points to indicate font size.
There's a bad bit of advice. Use % or ems.
You've been hanging around here for a while. Why would you suggest such
a poor idea?


I suggested it because it work in IE on Windows. You're intilted to your
opinion but you didn't say why my advice is bad or my idea poor.

I had presumed you had seen the numerous repeated posts regarding why
fixed size fonts is a bad plan. The topic recurs frequently, almost daily.
This may be OT: [...] It seems to me that many of
the most popular sites use fixed font sizes, usually in pixels, whatever
font they please and non-fluid layouts.

Just because poor design methods are common does not make them worthy
of emulation. I can only marvel at the hubris implicit in sites that make
me work to see their content.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jul 21 '05 #12
me
"Jim Moe" <jm***************@sohnen-moe.com> wrote in message
news:ir********************@giganews.com...
me wrote:

[...] I recommend you
use pixels instead of points to indicate font size.

There's a bad bit of advice. Use % or ems.
You've been hanging around here for a while. Why would you suggest such
a poor idea?
I suggested it because it work in IE on Windows. You're intilted to your
opinion but you didn't say why my advice is bad or my idea poor.


I had presumed you had seen the numerous repeated posts regarding why
fixed size fonts is a bad plan. The topic recurs frequently, almost daily.


I've seen and heard enough militant attitudes in NG's to last me a lifetime.
The posts you mention are examples of such attitudes.
This may be OT: [...] It seems to me that many of
the most popular sites use fixed font sizes, usually in pixels, whatever
font they please and non-fluid layouts.


Just because poor design methods are common does not make them worthy
of emulation.


You are entitled to your opinion that fixed font sizes constitutes poor
design. I obviously disagree.
I can only marvel at the hubris implicit in sites that make
me work to see their content.


I can, with little doubt, conclude from that statement that you do see their
content.
Signed,
me
Jul 21 '05 #13
Viken Karaguesian wrote:

So if I put the font-size and type in the body tag, it should generally
work within the other tags?


You could check the specs:
<URL:http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size>

'font-size'
Inherited: yes

And:
<URL:http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit>

The short version: fonts are inherited by default.
Caveat: Some browsers have bugs regarding inheriting fonts in tables.
IE5 and Netscape 4 are such browsers. IE6 in quirks mode might, too.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Jul 21 '05 #14
Benjamin Niemann wrote:
(This behaviour probably dates back to
NS4 that doesn't works as expected in cases like
<font face="..."><table>....</table></font>


What would be "expected" then? Such a construct isn't valid in HTML. Should
the browser pretend that the end tag for <font> is optional (like <p>)?
Should it pretend that <font> elements are allowed to contain <table>
elements? When you depend on browsers compensating for errors nothing
should be expected.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jul 21 '05 #15

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: John | last post by:
Hi, I was wondering how I would be able to strip the <font> tags from a file when I include it so it can take on the characteristics of my own stylesheet instead of the font tag attributes. ...
2
by: Haines Brown | last post by:
I don't understand the inheritance logic in this situation. Let me describe a simple situation: I have a document with a style sheet that specifies: address, blockquote, caption, center, dd,...
6
by: Matt Adams | last post by:
I want define for a couple of words inside a longer text with different font specifications. I declared it like: ....text before.... <FONT class=aaa> these text should get other attributes...
9
by: ALuPin | last post by:
Hi newsgroup users, I have the following java-script: </SCRIPT> </head> <body text='' link='' vlink='' alink='' bgcolor='FFFFFF'> <p> <center><TABLE cellSpacing=1 cellPadding=1...
5
by: acord | last post by:
Hi, I m getting annoying display problem when placing javascript tags in a html page. Should the javasscript tags placed at the beginning of a html page before anything start? or placed between...
4
by: TheCeej | last post by:
I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm...
1
by: Roger Miller | last post by:
The following program gets a TextCtrl's text attributes and sets them back unchanged. However it reports that the font size is 124, and after resetting the attributes the text becomes that size....
1
by: Jukka K. Korpela | last post by:
This is pretty theoretical, but it might matter if you convert existing HTML documents to more modern style, getting rid of <fontmarkup. One might expect that just removing all attributes from a...
2
by: greenMark | last post by:
Hi All, I'm relatively new to ASP.NET and Visual Web Developer 2008. I'm using a Master page with one content place holder. There is a Cascading Style Sheet file which is being refered by the...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.