Stylesheets - override style in parent element

Author

override style in parent element

mjansen.merge.emed@gmail.com

2006-08-10, 6:39 pm

Is there a way to override inline within the <body> a style of an
element but not do it with a style attribute on the element? I know
CSS Inheritance works for some styles, but doesn't appear to work for
margins, etc.

Here's my delimma:

I'm generating HTML. I don't have access to the <head>. In the <head>
is a stylesheet that defines a style for <p>. I have HTML I am
wrapping around other generated HTML (that I don't have access to) that
emits a <p> tag, and its getting (obviously) the style from the
stylesheet. So I'd like to be able to override the style via some
surrounding elements.

Example

<html>
<head><style type="text/css">p { bottom-margin: 20px; }</style></head>
<body>

<div style="position:absolute; top:0px; right:0px;">

<p>TheOtherGeneratedStuff</p>

</div>
....

So somewhere at POINT A, I'd like to insert something that affects the
style of the embedded <p> tag that I don't have control over. Could I
just insert some java script to save and restore the <p> style ? Other
options?

Thanks,
Mike

David Stone

2006-08-10, 6:39 pm

In article <1155224124.155385.188840@75g2000cwc.googlegroups.com>,
mjansen.merge.emed@XXXXXXXXXX wrote:

> Is there a way to override inline within the <body> a style of an
> element but not do it with a style attribute on the element? I know
> CSS Inheritance works for some styles, but doesn't appear to work for
> margins, etc.
>[snip]
>
> So somewhere at POINT A, I'd like to insert something that affects the
> style of the embedded <p> tag that I don't have control over. Could I
> just insert some java script to save and restore the <p> style ? Other
> options?

From the html 4 specs, section 14.2.2:

Attribute definitions
style = style [p.57] [CN] [p.49]
This attribute specifies style information for the current element.
The syntax [p.57] of the value of the style attribute is determined by
the default style sheet language [p.186] . For example, for [[CSS2]]
inline style, use the declaration block syntax described in section
4.1.8 (without curly brace delimiters).

- which I think does what you're looking for?

Jukka K. Korpela

2006-08-10, 6:39 pm

mjansen.merge.emed@XXXXXXXXXX <mjansen.merge.emed@XXXXXXXXXX> scripsit:

> Is there a way to override inline within the <body> a style of an
> element but not do it with a style attribute on the element?

You can use a class or id attribute and a suitable selector in the
stylesheet that you have in a <style> element or in an external stylesheet.

> I know
> CSS Inheritance works for some styles, but doesn't appear to work for
> margins, etc.

How does inheritance affect the issue? Beware that inheritance is the most
often misunderstood concept in CSS. If you set a value to a property of an
element, no inheritance affects that property of that element.

> I'm generating HTML. I don't have access to the <head>.

So you are generating an HTML fragment, right? This is a bad situation. Are
you sure there is no _solution_ to this, so that you need to look for
workarounds and tricks?

> In the
> <head> is a stylesheet that defines a style for <p>. I have HTML I am
> wrapping around other generated HTML (that I don't have access to)
> that emits a <p> tag, and its getting (obviously) the style from the
> stylesheet. So I'd like to be able to override the style via some
> surrounding elements.

Why do you think you need surrounding elements? What is the reason for
excluding the of the style attribute (on the element itself), which would be
the _simplest_ way, assuming that you cannot affect the <head> element (or
an external style sheet? Actually, it looks pretty much the only solution
under the circumstances.

> 
> <div style="position:absolute; top:0px; right:0px;">
> 
> <p>TheOtherGeneratedStuff</p>
> 
> </div>

If I understand you right, you are saying that you can only affect some
elements in the document tree, excluding their subelements. I wonder what's
the point is such a setting. I'd look for a solution, consisting of a change
in the overall setting, rather than solving the virtually unsolvable puzzle.

No, there's really no way interfere in such a manner. You can set properties
for an element using the style attribute, but not for its subelements; they
may inherit properties, but that's their business - and won't happen when a
style sheet sets a property for an element.

> Could I
> just insert some java script to save and restore the <p> style ?

Maybe, but what would happen when scripting is disabled or your JavaScript
code is simply filtered out by a company firewall in the user's
organization?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/