By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,920 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

Access style by name of external file?

P: n/a
Hi

I build a small content management system. I use different external
stylesheets for the admin section and the frontend, called admin.css and
frontend.css.

Now I would like to preview some frontend stuff in the admin section. Is
there a syntax for accessing a style from a different style sheet? For
example:

admin.css says:
h1 {
color:red;
}
p {
font-family:sans-serif;
}

frontend.css says:
h1 {
color:blue;
}
p {
font-family:serif;
}

in a file admin.html I would like to do something like:

<head>
<link rel="stylesheet" href="admin.css" type="text/css">
<link rel="alternate stylesheet" href="frontend.css" type="text/css">
</head>
<body>
<h1>Red headline</h1>
<p>Some sans serif text here</p>

<div stylesheet="use alternate stylesheet, is that possible?">
<h1>Blue headline</h1>
<p>Some serif text here</p>
</div>

</body>

I am grateful for a hint on that.

--
Markus
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Markus Ernst wrote:
Hi

I build a small content management system. I use different external
stylesheets for the admin section and the frontend, called admin.css and
frontend.css.

Now I would like to preview some frontend stuff in the admin section. Is
there a syntax for accessing a style from a different style sheet?
Not that I know of, however I'm new to CSS.
For
example:

admin.css says:
h1 {
color:red;
}
p {
font-family:sans-serif;
}

frontend.css says:
h1 {
color:blue;
}
p {
font-family:serif;
}

in a file admin.html I would like to do something like:

<head>
<link rel="stylesheet" href="admin.css" type="text/css">
<link rel="alternate stylesheet" href="frontend.css" type="text/css">
</head>
<body>
<h1>Red headline</h1>
<p>Some sans serif text here</p>

<div stylesheet="use alternate stylesheet, is that possible?">
<h1>Blue headline</h1>
<p>Some serif text here</p>
</div>

</body>

I am grateful for a hint on that.


If you can't find a clean CSS solution, & this is just for internal
previewing, how about duplicating your stlyesheets & then indenting each
line in each such duplicate with something like
..sheet<name>
for some suitable <name>

You can then apply any of those styles by including within an object to
whom you give class sheet<name> & linking to the indented sheets.

If you need to make many changes to the sheets & preview each time, you
could automate generation of the indented sheets with a little bit of
perl or other suitable language.

Maybe you'll get a simpler solution.

--
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 #2

P: n/a
"Michael Rozdoba" <mr**@nowhere.invalid> schrieb im Newsbeitrag
news:3f*********************@lovejoy.zen.co.uk...
Markus Ernst wrote:
Hi

I build a small content management system. I use different external
stylesheets for the admin section and the frontend, called admin.css and
frontend.css.

Now I would like to preview some frontend stuff in the admin section. Is
there a syntax for accessing a style from a different style sheet?


Not that I know of, however I'm new to CSS.
For
example:

admin.css says:
h1 {
color:red;
}
p {
font-family:sans-serif;
}

frontend.css says:
h1 {
color:blue;
}
p {
font-family:serif;
}

in a file admin.html I would like to do something like:

<head>
<link rel="stylesheet" href="admin.css" type="text/css">
<link rel="alternate stylesheet" href="frontend.css" type="text/css">
</head>
<body>
<h1>Red headline</h1>
<p>Some sans serif text here</p>

<div stylesheet="use alternate stylesheet, is that possible?">
<h1>Blue headline</h1>
<p>Some serif text here</p>
</div>

</body>

I am grateful for a hint on that.


If you can't find a clean CSS solution, & this is just for internal
previewing, how about duplicating your stlyesheets & then indenting each
line in each such duplicate with something like
.sheet<name>
for some suitable <name>

You can then apply any of those styles by including within an object to
whom you give class sheet<name> & linking to the indented sheets.

If you need to make many changes to the sheets & preview each time, you
could automate generation of the indented sheets with a little bit of
perl or other suitable language.

Maybe you'll get a simpler solution.

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


Thank you for your idea Michael. What I actually did now was a variant of
your solution: I made a separate stylesheet file for the content section and
put all the contents into a div with the id "content". And the styles are
defined as

#content h1 { ... }
#content p { ... }

and so on. So I can import that same stylesheet file into the admin preview
file without affecting the admin-specific definitions of h1 and p and so on.

--
Markus
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.