473,748 Members | 2,595 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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('imag es/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 2663
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+desig n>
- 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.or g/> 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.c om/groups?q=tablel ess+design&as_u group=alt.html% 2C+comp.infosys tems.www.author ing.%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('imag es/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('imag es/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="..."><tab le>....</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.goo glegroups.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('imag es/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******** ************@gi ganews.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

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

Similar topics

6
4388
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. Thanks in advance! John
2
1942
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, dir, div, dl, dt, form, hr, menu, ol, p, td, th, ul { font-size: 100%; } body { font: 100% serif, "Times New Roman","Times Roman";
6
13096
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 </FONT> text after However when I let this html source validate the FONT tag is marked as not compatible with XHTML. So how do I specify otherwise new font attributes to only a few words?
9
2080
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 width="60%" align=center border=0>
5
2339
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 the <head></head> tags? If I placed the script tags at the beginning of the html page, I can have the Draggale Layer shown and movable by the mouse, but the entired page will not read the style.css file (as I found the font displayed very ugly);...
4
7815
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 pretty sure I know what the problem is already. I just don't know how to fix it. I'd be very grateful of any help. I'll post what I'm trying to do, what keeps happening, what I believe the problem is, the link to my page and the css, and things...
1
1598
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. That is, the window displays a normal-size "foo" and a gigantic "bar". Anyone know what's going on? This is WxPython 2.6 on Python 2.5 on Windows XP. ----------------------------------
1
2104
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 <fonttag would make it dummy, no-op. But I just realized that IE 7 doesn't behave that way. If I have <big>foo <font>bar</font</big> then bar appears as smaller than bar. Apparently, the browser implies
2
9632
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 master page file as follws "<link href="myStyleSheet.css" rel="Stylesheet" type="text/css"/>" Part of the Style sheet as follows: .textbox
0
8991
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9541
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9247
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
6074
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4602
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4874
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3312
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2782
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2215
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.