div.display p {margin: 1em auto 2em; text-align: left; line-height: 1.2;}
div.text p {font: calibri; text-align: center; text-width: 970px; text-size: medium; text-color: white;}
Is your paragraph inside both elements? .display and also .text? If so, it should work fine if you simply don't say anything about text-alignment at all. Keep conditional styles to an absolute minimum. That is, only say something like
div.display p {blahblah}
if the whole point of having a div.display is to keep from attaching the identical stylename to eighteen consecutive paragraphs. Otherwise you run into inheritance issues and you have to backtrack:
div.display p {blahblah}
p.otherstyle {thisthat}
div.display p, div.display p.otherstyle {also thisthat}
If you ever find yourself tempted to use the !important element, you've gone astray. There is
always an alternative.
There are several ways to express font size: some good, some not so good.
[
w3.org...]
You may need to scroll down to "font size"; these forums don't seem to like fragment links :(
In order of my own personal individual preference:
#1 relative size expressed as a percentage
div.super p {font-size: 120%;}
= 120% of whatever it would otherwise have been. Font size is inherited. If you apply a non-100% font value to the body or html element (
baaaad), it becomes the default for the document, and everything else will be inherited from there.
#2 user-relative (what the CSS spec misleadingly calls "absolute"). Here "medium" means whatever size the user has set as their overall default in browser prefs. Unlike relative sizes, this will happen
regardless of how big or small the surrounding text is. I use this in ebooks to make sure the displayed page numbers are always the same size even if they're in the middle of a header or table-- but that's about it. The other sizes -- small, x-small and so on in either direction-- are then calculated outward from this baseline.
#3 relative sizes expressed in words: "smaller" means smaller than your current size.
Nos. 2 and 3 share the problem that it's up to the browser (the "user agent") to decide how much bigger or smaller each step goes. Remember when fonts were only readable at certain sizes? 9pt 10pt 12pt 14pt 18pt and so on? The user-agent may remember this too and act accordingly. They do the same thing when improvising small caps. But now that fonts display handsomely at any size, there's no reason not to stick with percentages.
#4 absolute absolute sizes (repetition intentional) in points or pixels. 12pt, 18pt or whatever. I never ever use this. It overrides the user's preference and will throw all proportions out of whack unless you apply it absolutely everywhere-- or, just as bad, force a point size for the page as a whole.
If you specify a font, make sure you include a good range of fallbacks. There used to be an excellent web site for font-stack building, but it seems to have disappeared. Calibri must be a Windows-standard font; I haven't got it. Throw in some alternatives like Arial and Helvetica, and put "sans-serif" as the last item.
Oh, wait, you haven't learned commas yet have you? ;)
In CSS, a comma-delimeted list of options means "Use the
first one of these that's available to you."
div.display p {font-size: 133%; font-family: Calibri, Arial, Helvetica, sans-serif;}
meaning "use Calibri if you've got it, otherwise use Arial, otherwise use Helvetica, and otherwise, heck, just use whatever sans-serif font". If the font name includes spaces, like "Courier New", put it in quotation marks. Every browser has a built-in fallback for the five superfamilies: serif, sans-serif, monospace, cursive and fantasy. (But don't use the last two unless you are very sure you know what you're doing!)
