lucy24 - 6:16 pm on Jul 24, 2012 (gmt 0)

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.