CSS: external, embed, inline – how? Whether?

Dear All,

So far on my site (not yet open), I have – now only one!
external style sheet. As I reconsider, a few pages would
do better to have some CSS information embedded in the
heads of those documents. Those are the ones where I’m
doing things like illustrating my “hilarious errors.”
These are, in effect, one-time-only use, not to be
commonly applied on my site.

Because about four pages have the same style applied to
the main headings, I plan to embed that style definition
in the document head.

I have a second “hilarious error” page, where again, I
believe, I’d do best to embed the style information in the
head of the document.

So I’m looking at syntax for doing that. I found some
information at W3C, but I’m not quite clear on how to use
it, especially because also, I call the external style
sheet for the same document.

Here’s what I have ready to put in my pages where headings
are fixed, and therefore scroll down the page over the
content, when they “shouldn’t do that.”

(I solved that little one by positioning the heading
absolutely, which I do in about 22 individual pages
containing larger-size photos). By the way, that is the
only absolute positioning I’ve used on my site so far, and
I believe I don’t have any relative positioning specified
anywhere on the site. The different definitions here apply
because the headings are different sizes, and I adjusted
them in this odd way; just centering didn’t seem to do the
trick (probably has to do with various margin and padding
settings I have applied to the masthead, or banner).

Anyway, these are the definitions I will probably need on
these four pages where the headings are fixed, and
shouldn’t be.

In these examples, I’ve split the lines, but plan to have
them all on one line. (Trying to prevent horizontal
scrolling. here on the forum.)

[code]

.hed1fix {position: fixed; top: 15px; left: 100px; text-
align: center; z-index: 2; }

.hed1afix {position: fixed; top: 15px; left: 150px; text-
align: center; z-index: 2;}

.hed2fix {position: fixed; top: 15px; left: 200px; text-
align: center; z-index: 2;}

.hed3fix {position: fixed; top: 15px; left: 300px; text-
align: center; z-index: 2;}

[/code]

It’s possible that I only need one of those in each of the
four pages, and maybe, also, that I should put that
information inline instead of in the document head – but
for some reason, one I don’t understand, I feel reluctant
to put that information inline.

Any comments or suggestions on that?

Here’s how I’m calling the (external) CSS:

(example is from the first of four pages, all of which use
exactly the same declaration).

( I’m pressing Enter to prevent horizontal scrolling in
this thread, if I can, but this is all on one line in the
code.)

[code] <link rel=”stylesheet” href=”cwstrict.css”
type=”text/css”></head> [/code]

If I embed style information in the document head, where
do I put it in relation to that line calling the external
style sheet?

If it’s better to put it inline, doesn’t the syntax change
a bit? Maybe not; I guess the only difference is that you
put something like

[code]

<h2 style=”position: fixed; top: 15px; left: 100px; text-
align: center; z-index: 2;”>

[/code]

Would that be right?

At the moment, the code is in the (single! yay!) external
CSS file. My .html file, where I need the fixed headings,
looks like this:

[code]

<div class=”hed1afix”>

<h2>Who is Prancy? That is I!<br>Come Sing with Me

My Cat Song.</h2>

</div>

<h4>This is my Cat Song</h4>

[/code]

I can’t remember if HTML 4.01 Strict allows you to break a
heading with <br>; I have a feeling not, but I’ll attend
to that when I change the document from Transitional to
Strict. Though I havent’ figured out yet how to handle
that.

Awaiting your kind guidance, as always!

PS. I took this offline to edit it, because I seem
completley unable to prevent horizontal scrolling! Hope
doing it offline and then pasting will do the job; I did
find an error: “[code]” – cute, huh? Rotten vision
doesn’t help, argh!

P.P.S. With what I’m learning now, I can see that in time,
I can learn to consolidate style desgnations such as those
that come first in this post (thanks again to Fang for
helping me with that!)

P.P.P.S. It took me about six tries to present this post and prevent horizontal scrolling, but I figure, if I can’t present a post properly on the forum, how am I to present properly on my own web site! (setting character count to 58 (!) in NoteTab did the job, but I think I could go to 60, maybe 65 – NOT, apparently, 70!

Mon, 31 Jan 2005 14:08:12

Also in #CSS _↴