Is It Okay to Use CSS and HTML in the Same Statement?

[gouri]

I have heard that it is better to use CSS instead of HTML when you can but sometimes there are situations in which you need to use HTML.

For a heading tag, I have two options.

One of them is to use CSS and HTML together:

<h1 style="text-align: center;"><font size="5" face="arial, sans-serif">Text Here</font></h1>

and the other is to use only HTML:

<h1 align="center"><font size="5" face="arial, sans-serif">Text Here</font></h1>

Can you please tell me if it is good to use both CSS and HTML or is it better to use only HTML?

All the pages on the site would have an h1 tag.

[SteveWh]

It is ok to use both, but it is considered best to push as much of the formatting as possible into CSS, and the <font> tag is one that people say to avoid. In your example, you can do all the styling with CSS:

<h1 style="text-align:center; font-family:arial,sans-serif; font-size:large;">Text Here</h1>

I hope I got that mostly right. There are various ways to specify font size. I chose one that might not be the exact equivalent of size=5.

Alternatively, you can put a separate style declaration in your page, or even in a separate .css file, which makes it much easier to make site-wide changes. This would style all h1 tags:

h1
{
text-align:center;
font-family:arial,sans-serif;
font-size:large;
}

[lucy24]

The <font> tag has been wildly deprecated for years and there is-- let me be brutal-- no excuse whatsoever for using it.

In the case of h1 it is easy because there shouldn't be more than one of them on a page, so it goes in the CSS as posted above. But express the size as a percentage for better control:

h1 {text-align: center; font-weight: normal; font-style: normal; font-family: arial, sans-serif; font-size: 200%;}

In your boilerplate CSS, always include three things for all headers: text-align, font-weight and font-style. All three will otherwise be handled by browser defaults-- which might change next year as fashions change, or if one browser decides to be different.

I start with a generic line in the shared CSS that goes something like

h1, h2, h3, h4, h5, h6 {text-align: center; font-weight: normal; font-style: normal; margin-top: 1em; margin-bottom: 1em; line-height: 1.5;}

... and then list the default sizes for the six levels.

The actual numbers may change, but they mean that the browser has nothing left to do and I know exactly what I'll be seeing. Different values can be set within directories or in individual documents.

[gouri]

These responses are really helpful.

Thanks.

I am using a template and after reading what you guys are saying about not using font tags, I think that the option for me is to use inline CSS.

I have read that when you use CSS and mention a specific px for font size, it does not change when you zoom in and out from your browser.

I have to figure out what would be the equivalent for font size in CSS for size 2 and size 4 in html and also what I can write (I don't think that I can use px) so if I and visitors zoom in and out from a browser, the size of the text changes.

Can you please tell me how I might be able to do these things?

This would be using inline CSS.

[lucy24]

Bookmark this page:
w3 CSS index [w3.org]

(Do not be misled by the address: That's 2.1, not 2.0.) Once you are there, you can zip along to, for example, http://www.w3.org/TR/CSS2/fonts.html#propdef-font-size [w3.org]

Note that "absolute" has two different meanings, one that you want and one that you don't want. The one you do want is the one shown in the table. These sizes are defined relative to the user's default size. They're called "absolute" because they are not affected by the size of surrounding text.

But note cautions about the exact proportions. That's why I generally prefer to use percentages-- but those are "relative" sizes. If there isn't any surrounding text, as in a free-standing header, "absolute" and "relative" are essentially the same. That is, "medium" = 100%.

What the user sees when they zoom depends on the browser. Nice browsers have an option for "zoom text only" so the overall display remains as intended but the print gets bigger. Invaluable when reading a site in 9-point grey Courier.*


* Unfortunately I am not making this up-- and it's a blog by someone I like :( Adding insult to injury, the writer is my father's age.

[gouri]

@lucy24,

Thanks for those links.

The information on there is excellent.

Also, thanks for the explanation in your post. It helps me to understand the sizing of fonts with CSS a lot better.

I am going to read the material that you recommended and then post a couple of questions that I had.

After reading the material, I think that I will be able to better frame my questions.

[gouri]

@lucy24,

In your boilerplate CSS, always include three things for all headers: text-align, font-weight and font-style. All three will otherwise be handled by browser defaults-- which might change next year as fashions change, or if one browser decides to be different.

I was doing some research and read that the text found in an H1 tag is generally bold so I wanted to ask if I would need to mention font-weight, and also, if I want the font-style to be normal, do I need to mention font-style?

In the body text, if using the p style, do I have to mention font-weight and font-style because if you have many paragraphs, that could add a lot to the code. I think that you would have to mention these elements each time that you start a new paragraph, along with the other elements such as font-family and font-size.

Would it be better to not mention font-weight and font-style for each paragraph and if I need to bold (font-weight) or use italics (font-style) for some words within a paragraph, I can use span style? I was thinking that this could help me to use less code.

Thanks.

[lucy24]

Inline style tags are the absolute last resort. Your defaults belong in the css:

p {font-family: sans-serif;}

and so on. (Please do not set your default paragraph at something smaller than 100%. It makes it hard for the user and they'll just have to resize, messing up your design.)

Yes, my boilerplate for h1, h2... lists absolutely everything. I generally don't use boldface in headings; I just make them bigger. My default size for an h5 is 100% and it goes outward from there, so they're all bigger than the browser norm.

I think you can safely assume that no browser is going to make an ordinary paragraph bold or italic by default, so you don't need to say anything about it. If I'm doing something with italic body text-- in practice, more often an e-book than an ordinary page element-- I'll wrap it in a predefined div to italicize the whole thing. (And redefine something like ".ital em {font-style: normal}" to toggle appropriately.)

Is there some reason you can't use a style sheet? Your posts seem to imply you can't; normally this would only be the case if you're inserting material into someone else's page. Even then, you can wrap the whole thing in a div and style the div.

[gouri]

I am using a template and it does have stylesheets, but I need some more knowledge about programming and CSS before going in them and working on the style elements that they have specified.

At the moment, I am also focusing on content so I think that it would be good to use inline CSS now and when I can improve my understanding of programming and CSS, I can work on the stylesheets.

I was reading what you wrote about percentages and was wondering if I would be able to set a default percentage for font size when using inline CSS or would I have to use sizes like large, medium, etc.

Also, can divs be used with inline CSS or would I have to use span?

I appreciate your help.

[lucy24]

You can do absolutely anything inline that you can do with a proper stylesheet. It just looks clunkier.

/* these are my changes or additions */
p {blahblah...}
h1 {blahblah...}
/* now back to default styles */

That should make you feel safer ;) And of course you can save a copy of the default stylesheet with a name like "built-in-styles.css" so you can always go back to it.

Style from stylesheet:

p.myclass {font-family: sans-serif; text-align: left; margin-top: .5em; margin-bottom: 0em;}
...
<p class = "myclass">blahblah</p>

Inline style

<p style = "font-family: sans-serif; text-align: left; margin-top: .5em; margin-bottom: 0em;">blahblah</p>

I really do put the top and bottom margin in my boilerplate, because most browsers default to 1 em for both and I don't like the look. left-align is the default, but say it explicitly and you don't have to worry about centering or justification sneaking in where it isn't wanted.

If you wanted a whole series of paragraphs with the same formatting, you could put most of it in the div-- but not the margins, because those would only apply to the overall div. And you'd have to look at your built-in stylesheets to see if there are any default values for p (generic, regardless of class).

[gouri]

@lucy24,

I looked at some of the stylesheet values, and I saw some for the page header and the h1. I will try to use them because as you mention, it does lead to more efficient coding, but if I have to use other values, then I will use inline CSS.

For paragraphs, I think that I will have to use inline CSS so I wanted to ask what would be the best way to do this.

I think that I could:

(1) use span style, include <br /> tags between paragraphs, and include </span> at the end of the last paragraph. If p style is not used to define a paragraph as it wouldn't be with this method, can the <br /> tags help the search engines to see that there are several paragraphs on a page.

(2) use p style for each paragraph. If I do this, I think that I would need a p style at the beginning of each paragraph and a </p> at the end of each one and this could lead to more code than the first option. In spite of the extra coding, would this be the best way to go.

(3) I don't think that I have any predefined divs. I would have to use inline CSS to create them (if I can't create divs with inline CSS, please tell me). Would I be able to include several paragraphs in a div and would this be better than using span style or p style?

I have also heard that in html the font tag and the paragraph tag affect the load time of a page. Does the p style tag in CSS also have an affect on the load time of a page similar to the paragraph tag in html?

I appreciate your advice.

[jecasc]

Wow. I remember using the <font> tag for the last time. It was in 1998 on a website I made for a small office furniture shop. And the owner forced me to, did not want to hear about that new crap like "CSS". Didn't know it was still around.

[lucy24]

When loading up a page, the browser has to read everything on it. So any repeated information will, more or less by definition, add to the load time. That's what stylesheets are for. Say it once and you'll never need to say it again; change it once and it's changed everywhere. But it's probably not a significant time load, unless you've got an inherited file where each word is wrapped in several layers of mutually exclusive inline tags. (There's a pretty hilarious thread about this in--I think--foo, from about a year back.)

I use the <font> tag-- but not, of course, on my own site :)

Context #1 involves e-text production. There's a block of text that's inserted into a pre-existing page; some things like small caps are easier to approximate by
S<font size = "-1">MALL</font> C<font size = "-1">APS</font>
instead of the equally valid
<span style = "font-variant: small-caps">Small Caps</span>
Besides, it feels so wonderfully retro ;)

Context #2 is something analogous. Here I have to begin and end the insertion with
</font>
{my stuff here}
<font face = {et cetera}>
because, again, the surrounding material is out of my control and the insertion would otherwise go inside a <font>...</font> envelope. So I have to switch it off and then switch it on again.

[gouri]

@lucy24,

Thanks for the explanation about the load time.

I looked and in the areas where the page header and h1 are located, there is really no other text so I was wondering, if I use percentages, what text would the sizes of both of these be in relation to? Would I just pick some percentage over 100% and see how it looks? Or since there is no text in the areas around the page header and h1 tag, should I used keywords like medium or large for font-size?

Also, for the body text, should I use percentages or keywords (e.g. medium, large) to define sizes?

I know that you explained absolute and relative sizes in one of your earlier posts in the thread, but I am not sure what I should do.

My goal for all the words on a page (page header, h1, body text, h2) is if someone zooms in or out from their browser, the size of the text should change the way it does when using font tags.

Thanks.

[lucy24]

If headers aren't inside of something else with a defined size, then any relative size-- including percentages-- will be relative to the user default.

It shouldn't be necessary to set a size for paragraphs at all. If there's one thing that really should be in the user's default size, it's your vanilla paragraph! That's why browsers let you set a default size in the first place.

Somewhere in the CSS documentation there's an explanation of what "inherit" means. Find it and read it. Slowly! :)

Quick edit: Yes, everything will zoom the same, no matter what words you used to set the size.

[gouri]

@lucy24,

I looked at the stylesheet again and saw that for the page header and h1 tag, font sizes are specified, but they are in px. If I zoom in and out when the font sizes are in px, will the size of the text change or will it remain the same?

Also, I saw that there is a font size specified for the body text and I believe that it is 12px. I feel that this should probably be bigger so can you please tell me how I should resize it so when I zoom in and out, the size of the text will change? Should I use keywords, em, or some other specification? Or is there a way to use 12px as a base and make a change based on that and when if the reader zooms in and out, the size of the text will change?

For most browsers, what is the user default size?

In terms of body text, I was thinking of using inline span style (I have to use something since I will be making a change from the font family in the stylesheet) and <br /> tags between paragraphs and a </span> tag after the last paragraph.

Can the search engines recognize that the text after a <br /> tag is the start of a new paragraph? Or would I have to use p style at the beginning of each paragraph and a </p> tag at the end. Some of my pages have a lot of paragraphs so I am thinking that using span style would be better (this will use less code)?

[lucy24]

Zooming overrides everything including pixels. Think of images: you've set their height and width explicitly. But if the user does a full-page zoom the image gets bigger too.

But please, please don't set a font size in pixels. Especially not for body text. Different users have different preferences-- and often different needs, depending on their age and eyesight. That's why browsers let you set a default font size. This is the size you get in your CSS when you say "font-size: medium" or (in isolation) "font-size: 100%". The pixel size also varies according to individual font; sans-serif fonts almost always "read" bigger than serif fonts of the same point size. So my default font is 15pt Palatino but my default sans-serif font is 13pt.

There's a nice illustration somewhere in w3's CSS documentation, but it may take some searching. It's under "font-size-adjust" which was dumped from CSS 2.1 but mercifully restored in CSS 3.

Also, please don't use <br> routinely. There are rare situations where it is appropriate,* but do not repeat do not use it to delimit paragraphs. That's what <p>...</p> is for.


* I recently landed on three different <br> situations in rapid succession-- but they were all very unusual and specialized, not something you'd do every day. Unless you are in the habit of making e-books based on originals that are in prose with numbered lines used by critical apparatus and a massive Glossarial Index so you have to keep the line breaks, but they're obviously not paragraphs.

The second one involved multi-column lists of numbers where each number was supposed to be a new line but some were too short and tried to squeeze in with the preceding number.

I, uhm, forget the third. But I'm sure it was equally obscure.

[gouri]

@lucy24,

Great example about the pictures. I didn’t think about that, I was probably thinking that there are different rules for text and images.

Reading your posts has really helped me to increase my knowledge of how to layout a page, but I have a couple of questions that I was hoping you could help me with. The answers to some of these questions probably seem pretty obvious to you, but I am not very familiar with it, and this would really help me to understand how best to define font size and layout my page.

(1) For my page header and h1 sections on my template, font sizes are specified in the CSS stylesheet. The page header, for example, is 18px and the h1 is 16px. Should I use inline CSS and write the equivalent of these sizes in points because you mentioned that using px may not be the best thing to do? If I use these sizes as is, should I say font-size: 100% or should I just make no mention of font size since I am accepting the default value (I am asking because the values are specified as px in the stylesheet)? If I wanted to make the font sizes larger, should I use a pt value that is more than 18px and 16px or should I use a font-size greater than 100% (e.g. font-size: 125%)? Would it be good to use font-size: 125% since it would be based on the px measurements in the stylesheet? Would using keywords (e.g. medium, large) be the best thing to do for font size?

(2) For my page header and page footer, I am currently using p style but I was thinking that I should use span style. There is important information in both of these areas, but they are not in paragraph form. Would span style be the right thing to use or should I use the p style? Or is there another way that is better?

(3) In my body text, the way it is laid out is at the top I have a small description to indicate what is on the page (e.g. Widget Building Recommendations), then I have the paragraphs and after the last paragraph, I have a link to the next page. The way I think that I should lay this out is for the small description at the top, I should use span style, for every paragraph, p style, and for the link after the last paragraph, span style. Do you think that this would be good markup?

(4) The default size for the body text, I believe, is 12px. I am thinking that I should make this larger because it will make it easier to read. I have the same questions about this as I do for the page header and h1, but I think that what you say for indicating font size for the page header and h1 I’ll be able to apply to the body text as well.

All the questions that I am asking would be for inline CSS.

I really appreciate your help.

[lucy24]

The answers to some of these questions probably seem pretty obvious to you

Hm, well... You know that section of web-sites-that-you-know-what dot com [websitesthatsuck.com] where he talks about sites that look as if the designer has never seen a web site before? That's kinda what my own site looks like.

Now then. Ahem.

For practical purposes, points and pixels are the same. Technically a point is 1/72 inch while a pixel is 1/71.8 or 1/72.3 or, well, something like that. The actual physical size will depend on the user's browser resolution. Most people don't take a ruler to their monitors to find out for sure. A pixel used to mean an individual dot in your screen, either lit or not-lit... but that was a long time ago :) Now it's generally used only as a unit of measurement.

Your goal is to make a design that's fluid enough to work with different text sizes and different monitor sizes. If you set an explicit text size, it will EITHER be the same as the user's default-- so there was no point in specifying a size-- OR it will be too small,* leading to a second either/or: EITHER the user resizes the text, making mincemeat of your precise-to-the-millimeter design, OR they leave your site in disgust.

I do wish you could get past your resistance to putting styles in a style sheet where they belong. There's no limit to the comments and explanations you can add. Just remember it's not <!-- blahblah --> as in HTML; in CSS (also in javascript) it's /* blahblah */ So if you are apprehensive about deleting something that you might later decide you need, just comment it out and it will still be there.

I generally like percentage-based sizes because they are predictable. If you say "large" (site-absolute) or "larger" (relative) it is up to the browser to decide how much bigger you meant.

The words "span" and "paragraph" aren't mutually exclusive. Not apples and oranges. More like apples and red: something can be one or the other, or neither, or both.

Learn these terms: block and inline. In CSS, the Great Divide is between block-level and inline-level elements, and their respective styles. The words look intimidating but they actually mean just what they mean in normal English. A "block" is any free-standing chunk of text, like a paragraph or header or table. An "inline" element or style is anything that comes and goes, including basics like italics or boldface. Obviously you can italicize a whole paragraph, but the <i> markup by itself won't change your text into a paragraph.

The paragraph <p> is the basic building block of HTML. (Got that? "Block".) You can have a paragraph <p>blahblah</p> by itself, or you can apply styles to the whole paragraph.

The span is one of two things that exist only in CSS. (The other is <div>.) Normally a span is an inline element. The word <span> by itself doesn't mean anything. It's just a container for inline styles. You could for example have a <span class = "sans"> in the middle of a paragraph to throw in some sans-serif text.

:: pause here for argument about presentational vs. semantic labeling ::

The line break <br> is technically an inline element. Physically you're on a new line. But as far as the browser is concerned, you're still in the same paragraph. Any inline styles like italics will carry over, across the <br>. This can sometimes be useful, but don't use <br> as a substitute paragraph.

Now, pay close attention.

Stylesheet:
p.comment {font-size: 90%;}
span.notation {font-size: 90%;}
joined with
<p class = "comment">
<span class = "notation">

or inline:
<p style = "font-size: 90%;">
<span style = "font-size: 90%;">

In most situations,
<p><span class = "notation">blahblah</span></p>

would come out the same as
<p class = "comment">blahblah</p>

BUT if you say
<p class = "comment"><span class = "notation">blahblah</span></p>
then your span will jump down to 81% size, because it's 90% of the surrounding text, which is already 90% smaller.

Or conversely
<h1><span class = "notation">blahblah</span></h1>

Your blahblah will be smaller than the default h1-- but still bigger than regular text, because it's 90% of whatever size your header would normally be.

You can do the same thing with the specific words "smaller" and "larger". But I don't recommend it, because then you have to remember that those two words are relative sizes, while "small" and "large", "x-small" and "x-large" etc are absolute sizes.

So... Put everything inside paragraphs. Style the paragraphs to be bigger or smaller depending on how important they are. Styles can also be used for things like line spacing and the margins between paragraphs.

If the whole paragraph is the same, style the paragraph itself. If something within the paragraph is supposed to look different, bring out the span.

And if you've got a block of similar paragraphs, wrap them all in a div and style that. With a style sheet-- but not with inline styles-- you can then say things like

div.mainpromo p {margin-top: 2em;}

meaning that all paragraphs within the div have super-sized margins. Inline styles can only be applied right there and then; you can't apply them to things inside of other things, or things that come after other things.


* I do not often see sites whose overall text size is too big. Except maybe advertising, where they spend the whole page shouting at you in bold sans-serif.

[gouri]

@lucy24,

As I try to figure out which font and font size would be best to use, one thing that I have done is look at other websites and when I see a font and font size that I think are good, I copy some of the text from the webpage that it is on and paste it into Word (I believe that it is Word 2002). After I see what the font size is, I can have an idea of what percentage to use for font-size when I am coding.

When pasting I have tried the different options available under Paste Special so that I can keep the source formatting, but when the text is pasted, it is usually in Times New Roman 12pt. It seems like Times New Roman 12pt is the default for pasted text in Microsoft Word when text is pasted into it from a webpage.

If something that I copy is Arial 14pt, for example, I have no way of knowing.

Is there something in copy and paste that I can do to keep the source formatting? Otherwise, how can I know the font and font size of the text that I copied?

I appreciate your help.

[lucy24]

Short answer: No. The font information is in the HTML, not in the text itself. So you will need to develop the habit of snooping ;)

If you are lucky, the styles will be on the same page, nicely collected in the header. If you are less lucky, there will be an outside stylesheet whose address you will have to enter manually. If you are unlucky, there will be a CMS that generates eighteen different stylesheets and you will have to pore over them separately. And if you are unluckiest of all, some of it will be hiding in javascript or worse.

Most of this can be achieved by using your browser's "Save as Complete HTML" (exact name varies). Then paw through the folder of associated files to see what you've got.

[gouri]

@lucy24,

Determining the font and font size of text that I see on a webpage is harder than I thought :)

I looked at the header of some of the pages that I thought have a good font and font size and didn't see information on the styles.

I think that information is probably in an external stylesheet.

If you are less lucky, there will be an outside stylesheet whose address you will have to enter manually.

Can you tell me how I would determine the address of an outside (I think that this is the same as external) stylesheet?

Thanks for the suggestion on Saving as Complete HTML. I didn't know that this is a way that I might be able to identify font and font size of text that I see on a webpage. It also looks like this might be the only way that I will be able to do this.

[lucy24]

Can you tell me how I would determine the address of an outside (I think that this is the same as external) stylesheet?

It will normally be somewhere in the header. For example-- using a page I happened to have open in the background:

<link href="../style/css/manual.css" rel="stylesheet" media="all" type="text/css" title="Main stylesheet" />
<link href="../style/css/manual-loose-100pc.css" rel="alternate stylesheet" media="all" type="text/css" title="No Sidebar - Default font size" />
<link href="../style/css/manual-print.css" rel="stylesheet" media="print" type="text/css" /><link rel="stylesheet" type="text/css" href="../style/css/prettify.css" />

:: cough-cough-cough ::

Those are relative links with leading ../ meaning "go back one level" so you take the page URL

http://www.example.org/docs/current/rewrite/rewritemap.html

and cut off the last two pieces of the URL before attaching the CSS URL. (If they were absolute links-- the kind beginning in / slash-- you would attach the URL directly to the domain name.) This gives you

http://www.example.org/docs/current/style/css/manual.css

which turns out to be a good example, considering I just grabbed the first one I found*, because it starts right in with

html {
 font-size: 14px;
}

body {
 background-color: #fff;
 color: #036;
 padding: 0 1em 0 0;
 margin: 0;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: normal;
}

But, again, ask yourself whether it's necessary to declare a font size at all. Does your page layout require a particular size? Are your wishes more important than the user's preferences? (Answer, if you are a normal web designer: Yes, of course.)

I once came across a terrifically useful www page that tells you how common a given font is in each platform, and what kinds of fallbacks to use. There will always be a generic family at the end, normally "serif" or "sans-serif", possibly "monospace". (There are also "cursive" and "fantasy" but those are rare and should never be used except in short decorative passages.) If you have visited the CSS info area, you have probably met font-family [w3.org] since it lives right next door to "font-size".

:: detour to wrangle with bookmarks ::

[codestyle.org...]

(Moderators, if you know of a better site that does the same thing, feel free to substitute.)


* OK, second. I looked at this page first but couldn't figure out where they hide the CSS. Possibly it eloped with the "charset" declaration ;)

[gouri]

@lucy24,

Thanks for the information on how to determine the url. That is really helpful. Also, thank you for the links. I am going to go through them.

But, again, ask yourself whether it's necessary to declare a font size at all. Does your page layout require a particular size?

Do you mean that do I have to declare a certain px or pt for font-size? Would I be able to declare a percentage for font-size instead? The reason I ask is if I don't declare a font-size, what will the font-size be? How will it be determined?

Are your wishes more important than the user's preferences?

I would like to create a good user experience :) When visitors are on the site, I want them to able to read the content comfortably.

[lucy24]

If you don't declare a size and/or name, the user's browser will use the default values. Depending on just how computer-illiterate the user is, this in turn will be

EITHER
the browser's original defaults (probably something like 12pt Times Roman for body text). This may or may not be what the user likes, but it's definitely what they are used to.

OR
the defaults set by the user through the appropriate Preferences option. Some browsers even have a "meta-preference" that says something like "always use my own styles".

My own preference in HTML is to say nothing about the body text, but set the headings the way I want them. The default in most browsers is boldface, left-justified, and the sizes tend to be completely wrong-- either way bigger or much smaller than I like :) So I've got a generic CSS that says

:: shuffling papers ::

h1, h2, h3, h4, h5, h6 {text-align: center;
font-style: normal; font-weight: normal;
padding: 0; margin: 1em 0; line-height: 1.2;}

... and then set the individual sizes and margins the way I like them.

Browsers have default values for top and bottom margins, table positioning, text alignment in table cells, and so on. If you look at the w3c css page you will see that each item has a value called "initial". That's what the browser will use if you haven't said anything to the contrary. For example, ordinary text defaults to left-aligned. (Or, ahem, right-aligned if you are in a rtl script like Hebrew.) Table cells default to left-aligned and vertically centered. This is almost never what I want, so my generic CSS includes the line
td {vertical-align: top}

The most dreaded line is "depends on user agent", meaning that the browser will do whatever it ### well feels like. This is fine for body text, where users can set a preference, but not so fine in other areas.

You can experiment simply by making a little www page that has no explicit styles at all, just using the regular html properties like tables and paragraphs and lists. What you see is your browser's defaults. Or rather browsers', plural, because of course you will look in all possible browsers.

In particular, Opera has an absolutely demented array of preference settings for every conceivable type of text. I can't imagine anyone bothering to go in and change them all. Conversely, they constrain your default point size so I have to go 1 point smaller than I would like :(

[gouri]

@lucy24,

I did some further reading on font size after reading some of your most recent posts (all of which have added a lot to my knowledge) and also looked at my template again.

After doing this, a couple of questions came up, the answers to which I think will really help me to put this together.

My template is structured in the following way:

At the top there is a box for the page header, then a box for the heading (although it may not specifically say h1), after that there is a box for the body text and then a box for the footer. All of these boxes, I believe, are divs. (I am not sure if this affects anything; Just wanted to mention it in case that it does.)

I looked at the CSS stylesheet and saw that there is no specified definition for the h1 tag and for the paragraph tag. The way that it is set up, there is a font family, font color, font size and font weight for the heading box, the body text box and the other boxes as well. The specifications for each box varies and on the stylesheet, it is indicated which box the various coding is for.

I think that I would have to create definitions for my h1 tag, h2 tag, paragraph tag, etc. It is not a matter of changing some of the specifications for these tags, and I think that this is one of the things that I would like to have a better understanding of.

At the moment, if I create an h1 tag, for instance, and use a percentage (e.g. 125%) for the font-size, would the base value be the font-size mentioned in the CSS stylesheet for the heading box, which I believe is 16px, and would the text that I type be 125% larger than 16px?

Or is the default size for the h1 tag and other elements determined by the browser? If I know which one is used, then I can decide what percentage to use for the font-size.

For paragraphs, should I use inline CSS and specify that I want my paragraphs to be font-family Arial and font-size 13pt, or should I indicate font-family Arial and font-size 125% (or another percentage if that’s what makes the font-size 13pt) and the size of the text will be based on some default size (Would the default size be that which is set by the browser or the body text box in my template?)? Would both options resize if someone (1) zooms in on the whole page and (2) zooms in on the text only?

Another thing that I noticed, and this is something that I have been trying to figure out for some time but haven't been able to, is that the text (font size 3 [using html at the moment], but have seen this same thing happen on websites using CSS for font-size) on the pages of the site that I am working on appears smaller when I look at it on the site than when I copy and paste it into Microsoft word? Can you please tell me why this is occurring? I want the text size on the website to be the same size as it appears on Microsoft Word. This would make the text easier for visitors to read. Maybe this is happening because of how the font size is defined (using exact sizes instead of percentages), but I am not sure. Would really like to figure this out.

I appreciate your help with this and all that you have already helped me with.

[lucy24]

I think that I would have to create definitions for my h1 tag, h2 tag, paragraph tag, etc. It is not a matter of changing some of the specifications for these tags, and I think that this is one of the things that I would like to have a better understanding of.

The format of headings is a combination of the browser's individual preferences, and rules for what a "compliant user-agent" is supposed to do. But if you try your code in a bunch of different browsers, you will see that the headings are all pretty much the same. You can safely assume that heading size is proportional, not absolute. So if the default body text is 14pt the headings will be a little bigger than if the default body text is 12pt.

At the moment, if I create an h1 tag, for instance, and use a percentage (e.g. 125%) for the font-size, would the base value be the font-size mentioned in the CSS stylesheet for the heading box, which I believe is 16px, and would the text that I type be 125% larger than 16px?

Or is the default size for the h1 tag and other elements determined by the browser? If I know which one is used, then I can decide what percentage to use for the font-size.

Scroll up a bit to the post where I talked about
<p class = "comment">
<span class = "notation">

If your CSS says
h1 {font-size: 125%;}
and the HTML says simply
<h1>blahblah</h1>
the heading size will be 125% of the surrounding text. Normally that means the overall default text size, unless the heading is inside something that has its own size setting. So if your heading is inside a box whose font-size is explicitly set to 16px, the heading will come out to 20px.

But if you say
<h1><span style = "font-size: 125%">blahblah</span></h1>

then the entire text of the header will be 125% of whatever size the browser has set for the header.

Anything you say in CSS, whether inline or in a style sheet, will override defaults. That's what styles are for. Unless the user has expressly said "Always use my styles" (or similar) in their browser prefs.

Can you change the "16px" setting? It's an odd size for a sans-serif font; it makes the whole box look a little bigger and more emphatic than ordinary type. Is that the intention of this area? It seems redundant if you're also going to put in a heading.

For paragraphs, should I use inline CSS and specify that I want my paragraphs to be font-family Arial and font-size 13pt, or should I indicate font-family Arial and font-size 125% (or another percentage if that’s what makes the font-size 13pt) and the size of the text will be based on some default size (Would the default size be that which is set by the browser or the body text box in my template?)? Would both options resize if someone (1) zooms in on the whole page and (2) zooms in on the text only?

I think we've talked about zooming already. Scroll back.

Font-family and font-size can both be applied to divs. So if it is genuinely impossible for you to use a stylesheet, then you can wrap all your paragraphs in a single div. But, again, think carefully about whether you want to force a size or font-family for the body text. Does your template say anything about size of body text? Can you change it? If it has to say something, you can say "font-size: inherit" and it will be just as if you didn't mention a size at all.

the text (font size 3 [using html at the moment], but have seen this same thing happen on websites using CSS for font-size) on the pages of the site that I am working on appears smaller when I look at it on the site than when I copy and paste it into Microsoft word? Can you please tell me why this is occurring? I want the text size on the website to be the same size as it appears on Microsoft Word.

Microsoft Word is a word processor. Are you talking about an HTML Preview function? (I, er, haven't used it since Word 5.1.) Please don't use the HTML <font> property at all, for any reason. It is heavily deprecated and there are always alternatives. This goes double for values like "size='3'" or "large" where the exact proportion is up to the browser. If you use percentages, the proportions will be almost identical everywhere. Sometimes there will be tiny hiccups based on the user's physical setup, but these are most noticeable at very small sizes.

[gouri]

@lucy24,

Thanks for the explanation distinguishing when the size of the h1 tag will be 125% larger than what is specified in the CSS stylesheet and when it will be 125% larger than the default browser size for the h1 tag.

Can you change the "16px" setting? It's an odd size for a sans-serif font; it makes the whole box look a little bigger and more emphatic than ordinary type. Is that the intention of this area? It seems redundant if you're also going to put in a heading.

Are you saying that the 16px setting is not big as you would expect it to be? I looked and the default font size for the heading box is 18px, not 16px but the h1 tag, I believe, is not defined in the CSS stylesheet. If this is the size, are you saying that I don’t need to put an h1 tag on my webpage now? Just type the words that I want to put in the heading without using an h1 tag? Or are you thinking that I don’t have to change the size, but that I should put the h1 tag in and use font-size:100%?

Font-family and font-size can both be applied to divs. So if it is genuinely impossible for you to use a stylesheet, then you can wrap all your paragraphs in a single div.

Would I style the divs so I wouldn’t have to style every p style tag with font-family and font-size and save on coding in the process? By styling the divs, would all the paragraphs inside of it take the styling specifications of the div?

But, again, think carefully about whether you want to force a size or font-family for the body text. Does your template say anything about size of body text? Can you change it? If it has to say something, you can say "font-size: inherit" and it will be just as if you didn't mention a size at all.

I don’t want to force a size or font family for the body text but if I want to change what I see when I start typing in the body text, I think that I would have to make some specifications? If I don’t make any specifications, I am not sure how I would be able to make changes?

The body text in my template has a default of 12px, so if I just start typing in my body text box, it would be Arial 12px. I feel that this is too small so I am trying to figure out what I should do so that I have a larger font-size in my body text. I can change it to another number (e.g. making it 16px in a div using inline CSS). If I say font-size:inherit and just start typing in my body text box, would the text be 12px? If that is the case, should I use a percentage such as 133% for font-size so the text is 16px instead of 12px and not use font-size: inherit?

Microsoft Word is a word processor. Are you talking about an HTML Preview function?

I am copying and pasting the text from the webpage to Microsoft Word the word processor and the text looks larger there (the size that I want it to be) than it does on the webpage. I also looked at it in HTML preview function and the size that the text appears in Microsoft Word is the size that it is appearing in the preview. That is how I want it to appear on my webpage, but at the moment, it isn’t.

Please don't use the HTML <font> property at all, for any reason. It is heavily deprecated and there are always alternatives. This goes double for values like "size='3'" or "large" where the exact proportion is up to the browser. If you use percentages, the proportions will be almost identical everywhere. Sometimes there will be tiny hiccups based on the user's physical setup, but these are most noticeable at very small sizes.

I will switch from using the font tag to using CSS but I have seen the same situation with CSS with regard to the size of the body text being the browser’s default size and not the size that I specified. Maybe this is due to the browser’s default size for text being shown if a specific font size (using CSS or HTML) is mentioned. When you say this goes double, do you mean “The same thing applies for….”? I think that you are saying it is better to use percentages (CSS).

[StoutFiles]

The <font> tag has been wildly deprecated for years and there is-- let me be brutal-- no excuse whatsoever for using it.

What about on an HTML tutorial website showing off depreciated tags? Never say never.

[lucy24]

<ot>
:: peering into crystal ball ::

We're talking about w3schools, aren't we? The same place that dismisses the
varname = new RegExp ("blahblah","flags")
format in one line, never mentions it again, and therefore leaves you at an utter loss when it comes time to assemble a regex that requires the Constructor format instead of the simpler
varname = /{blahblah}/{flags}
which is all they ever use.

Oops.
</ot>