How to use EXTERNAL stylesheets for INLINE or BLOCK-LEVEL HTML?

David Filmer

Greetings. I want to localize a style definition to a portion of an
HTML document, but use an external stylesheet. It seems that I can
only do
<style><!-- @import url(styles/my_style.css);--></style>
and <link rel=stylesheet href=styles/my_style.css type=text/css>
in the header, which applies to the entire HTML document and is NOT
what I want to do.

This does not seem to work:
<span style = @import url('styles/my_style.css');>
... some ...
... HTML ...
</span>

Nor does this:
<span>
<!-- @import url('styles/my_style.css'); -->
... some ...
... HTML ...
</span>

How do I "import" an external stylesheet at the inline or block level?
Thx!

Jul 20 '05 #1

Darin McGrew

David Filmer <In************************@hotmail.com> wrote:

Greetings. I want to localize a style definition to a portion of an
HTML document, but use an external stylesheet.

In your HTML, use a CLASS attribute to mark desired the portion of your
document, for example:

<div class="yaddayaddayadda">
...
</div>

In your CSS, use appropriate selectors to style the content within that
portion of your document, for example:

.yaddayaddayadda p { ... }
.yaddayaddayadda a:link { ... }
.yaddayaddayadda a:visited { ... }
--
Darin McGrew, mc****@stanfordalumni.org, http://www.rahul.net/mcgrew/
Web Design Group, da***@htmlhelp.com, http://www.HTMLHelp.com/

"Men build too many walls and not enough bridges." - Sir Isaac Newton

Jul 20 '05 #2

DB McGee

David Filmer wrote:

Greetings. I want to localize a style definition to a portion of an
HTML document, but use an external stylesheet. It seems that I can
only do
<style><!-- @import url(styles/my_style.css);--></style>
and <link rel=stylesheet href=styles/my_style.css type=text/css>
in the header, which applies to the entire HTML document and is NOT
what I want to do.

This does not seem to work:
<span style = @import url('styles/my_style.css');>
... some ...
... HTML ...
</span>

Nor does this:
<span>
<!-- @import url('styles/my_style.css'); -->
... some ...
... HTML ...
</span>

How do I "import" an external stylesheet at the inline or block level?
Thx!

You can't. What you could try perhaps, is to assign an id to each span, then
use the id selector to select styles. For example,

<span id="level1">
<h1>This should be orange</h1>
<p>This should be blue</p>
</span>

<span id="level2">
<h1>This should be purple</h1>
<p>This should be red</p>
</span>
Then in your stylesheet:

/* Level 1 Styles */
span#level1 p { color: blue; }
span#level1 h1 { color: orange; }

/* Level 2 Styles */
span#level2 p { color: red; }
span#level2 h1 { color: purple; }
You could thus define a whole series of variations on your styles. Not sure at
all if this is what you are trying to do?

Jul 20 '05 #3

Harlan Messinger

"DB McGee" <no*****@noreply.com> wrote:

You can't. What you could try perhaps, is to assign an id to each span, then
use the id selector to select styles. For example,

<span id="level1">
<h1>This should be orange</h1>
<p>This should be blue</p>
</span>

Not <span>, <div>. You can't put block elements (like H1 and P) inside
a span.
--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

Jul 20 '05 #4

DB McGee

Harlan Messinger wrote:

"DB McGee" <no*****@noreply.com> wrote:

You can't. What you could try perhaps, is to assign an id to each
span, then use the id selector to select styles. For example,

<span id="level1">
<h1>This should be orange</h1>
<p>This should be blue</p>
</span>

Not <span>, <div>. You can't put block elements (like H1 and P) inside
a span.

You're absolutely correct - I missed that :)

Jul 20 '05 #5

David Filmer

> You could thus define a whole series of variations on your styles. Not sure

at all if this is what you are trying to do?

Hi, thanks for the feedback. I do think that prehaps I should clarify
my intent a bit.

I'm working on a Boy Scout website. If you have a look at
http://troop606.com you will see that the mainpage includes a snippet
of the Troop calendar. The current calendar does not employ
stylesheets.

I'm working on a new version of the site that uses the open-source
"Plans" calendar (http://planscalendar.com/demo) which is rather
highly styled (http://planscalendar.com/demo/theme/plans.css). I want
to also include a snippet of this calendar on my site's mainpage (same
as I do with http://troop606.com). I don't want my snippet to be
dependent on changes that I make to the Plans .css file (which may not
be compatible with (or may be overwritten by) future versions of
Plans). I don't know how to apply the stylesheet to ONLY the calendar
snippet (and not the rest of the mainpage).

The calendar snippet HTML and the .css are from Plans. All I'm trying
to do is extract a portion of that HTML (which I know how to do) and
display it on my mainpage, with the .css applied (which I don't know
how to do).

I would very much appreciate any assistance.

Jul 20 '05 #6

Eric Bohlman

In************************@hotmail.com (David Filmer) wrote in
news:e4**************************@posting.google.c om:

I'm working on a new version of the site that uses the open-source
"Plans" calendar (http://planscalendar.com/demo) which is rather
highly styled (http://planscalendar.com/demo/theme/plans.css). I want
to also include a snippet of this calendar on my site's mainpage (same
as I do with http://troop606.com). I don't want my snippet to be
dependent on changes that I make to the Plans .css file (which may not
be compatible with (or may be overwritten by) future versions of
Plans). I don't know how to apply the stylesheet to ONLY the calendar
snippet (and not the rest of the mainpage).

The calendar snippet HTML and the .css are from Plans. All I'm trying
to do is extract a portion of that HTML (which I know how to do) and
display it on my mainpage, with the .css applied (which I don't know
how to do).

In the HTML, wrap the section you want to style in a <div> element with its
class attribute set to some name of your choosing, e.g.
<div class="styled">A bunch of stuff</div>. Then make a copy of the css
file for plans and prefix each selector with ".styled " (or whatever class
name you chose); don't leave out the trailing space. That will make all
the rules apply only to the contents of the <div> you added to the HTML.

Jul 20 '05 #7

Michael Rozdoba

Eric Bohlman wrote:

In the HTML, wrap the section you want to style in a <div> element with its
class attribute set to some name of your choosing, e.g.
<div class="styled">A bunch of stuff</div>. Then make a copy of the css
file for plans and prefix each selector with ".styled " (or whatever class
name you chose); don't leave out the trailing space. That will make all
the rules apply only to the contents of the <div> you added to the HTML.

I was about to say something similar, but with the probably obvious
caveat that if the snipped section of html relies on styles applied to
any parent elements (say the body background colour), you'd have to do a
bit of tweaking, probably applying those styles, or a variant, to the
div you're enclosing the snippet in.

--
Michael
m r o z a t u k g a t e w a y d o t n e t

Jul 20 '05 #8