How to override all sytles?

brett

If I want all text, no matter where it is, to be gray, is there a way
to override styles and have that color take affect? It would need to
override DIVs, tables, SPANs, anywhere inline styles are defined,
override external style sheet references, definitions in the HEAD
section.

I won't know ahead of time what exactly the webpage content is.

Thanks,
Brett

Jul 21 '05 #1

Follow Post Reply

16624

Harlan Messinger

brett wrote:

If I want all text, no matter where it is, to be gray, is there a way
to override styles and have that color take affect? It would need to
override DIVs, tables, SPANs, anywhere inline styles are defined,
override external style sheet references, definitions in the HEAD
section.

I won't know ahead of time what exactly the webpage content is.

Why are you using styles that color text anything *other* than gray if
you want all your text to be gray?

Jul 21 '05 #2

Jukka K. Korpela

"brett" <ac*****@cygen.com> wrote:

If I want all text, no matter where it is, to be gray, is there a way
to override styles and have that color take affect?

Unless I'm missing something,
* { color: gray !important; background: white !important; }
in a user style sheet should do that, and does that, on modern browsers.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Jul 21 '05 #3

Lauri Raittila

in comp.infosystems.www.authoring.stylesheets, brett wrote:

If I want all text, no matter where it is, to be gray, is there a way
to override styles and have that color take affect? It would need to
override DIVs, tables, SPANs, anywhere inline styles are defined,
override external style sheet references, definitions in the HEAD
section.

I won't know ahead of time what exactly the webpage content is.

* {color:#999 !important} in you userstylesheet, if you don't have
conflicting userstyles.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

Jul 21 '05 #4

brett

Yeah, that works well, except with conflicting style sheets. I need to
some how override them. Look at this example and note the table cell
style retains its style. How can I override it?

<html>
<head>
<title>Untitled</title>
</head>

<body style="color: gray !important">

<div id="sample1" style="width:100%"><h3>John slowly faded into
view---</h3>
</div>

<a href="x">Here is a problem link</a><br>

<img src="http://www.google.com/images/logo.gif" alt=""
name="imgsample1" id="imgsample1" border="0"
style="filter:alpha(opacity=100); -moz-opacity:1"><br>
<div id="sample2" style="width:100%"><h3>Another fade occurs
here.</h3></div>
<br>
<a href="x">Here is another problem link</a>
<br><br>

<table><tr><td style="color: red">this will stay red</td></tr></table>
<div>text in div tag<h4>this is in DIV tag in H4</h4></div>

</body>
</html>
Thanks,
Brett

Jul 21 '05 #5

Jukka K. Korpela

"brett" <ac*****@cygen.com> wrote:

Yeah, that works well,
"That"? Please quote or paraphrase the relevant part of the message you are
commenting on.
except with conflicting style sheets.
No, what I responded is correct: using !important in a user style sheet
makes the declaration win other style sheets (excluding, of course, other
!important declarations in a user style sheet).
I need to some how override them.
In a user style sheet, you can override them, as I explained. In an author
style sheet, you cannot, by design, and that's _good_.
Look at this example and note the table cell
style retains its style. How can I override it?
Within an author style sheet, if that's what you mean, as you seem to be
meaning, you can override other declarations (assuming they don't use
!important) by using
* { color: gray !important; background: white !important; }
just as I wrote. Did you actually read the message of mine that you are
responding to?
<body style="color: gray !important">

That's something completely different. It only sets the color of the body
element - and unwisely leaves the background unspecified, at the risk of
getting gray on gray.

Of course, setting everything to gray is most probably absurd.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Jul 21 '05 #6

Lauri Raittila

in comp.infosystems.www.authoring.stylesheets, brett wrote:

What are you replying? Do not top post. Assuming that you still speak
about userstylesheet.

Yeah, that works well, except with conflicting style sheets. I need to
some how override them.
Very hard. But they unlikely have id selectors.
html > head:first-child + body, html > head:first-child + body *
{color:gray !important;}

Gets you specifity 0, 0, 1, 3 works on some browsers.
Look at this example and note the table cell
style retains its style. How can I override it?

URL? If you just added style="color:gray !important;" in your file, you
got everything wrong. Maybe you could explain your real problem? With
URL.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

Jul 21 '05 #7

David Dorward

brett wrote:

If I want all text, no matter where it is, to be gray, is there a way
to override styles and have that color take affect? It would need to
override DIVs, tables, SPANs, anywhere inline styles are defined,
override external style sheet references, definitions in the HEAD
section.

Not with CSS alone. You can't write a selector more specific then an inline
style attribute.

You could do something like:

my el = document.getElementsByTagName('*');
for (var i = 0; i < el.length; i++) {
el[i].style.color = "rgb(50%,50%,50%)"
}

It wouldn't be very quick though.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Jul 21 '05 #8

David Ross

brett wrote:

If I want all text, no matter where it is, to be gray, is there a way
to override styles and have that color take affect? It would need to
override DIVs, tables, SPANs, anywhere inline styles are defined,
override external style sheet references, definitions in the HEAD
section.

I won't know ahead of time what exactly the webpage content is.

If you are a user viewing someone else's Web page, just set your
browser to use only your own colors and to ignore the colors
specified on the page.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.

Jul 21 '05 #9

Michael Bierman

Lauri Raittila wrote:

in comp.infosystems.www.authoring.stylesheets, brett wrote:

What are you replying? Do not top post. Assuming that you still speak about userstylesheet.
Yeah, that works well, except with conflicting style sheets. I need to some how override them.
Very hard. But they unlikely have id selectors.
html > head:first-child + body, html > head:first-child + body *
{color:gray !important;}

Gets you specifity 0, 0, 1, 3 works on some browsers.
Look at this example and note the table cell
style retains its style. How can I override it?

URL? If you just added style="color:gray !important;" in your file,

you got everything wrong. Maybe you could explain your real problem? With URL.

Perhaps this isn't the right place to ask this question, but this topic
almost answers a similar question I have--but not quite, unless I am
not understanding the posts completely.

I have a portions of a page that I don't have any easy control over
with content that has inline styles such as this

<p><font color="red">Return-pbath</font></b>:
<1zYzTINizEDqr3HXfqno0yqZP6kJsHlFe@<b><font
color="black">109326.<b><font color="red">reply.<b><font
color="red">saveyourwallet<b><font color="blue">.com</p>

I would like to wrap this in a div element, and create a button that
will toggle everything within that color to have an alternate color
(e.g. black). I have been able to affect the font size and font face
because those aren't specified inline, but the color has so far alluded
me.

Regards,

Michael

Jul 21 '05 #10

Jukka K. Korpela

"Michael Bierman" <mi*************@gmail.com> wrote:

<p><font color="red">Return-pbath</font></b>:
<1zYzTINizEDqr3HXfqno0yqZP6kJsHlFe@<b><font
color="black">109326.<b><font color="red">reply.<b><font
color="red">saveyourwallet<b><font color="blue">.com</p>

I would like to wrap this in a div element, and create a button that
will toggle everything within that color to have an alternate color
(e.g. black). I have been able to affect the font size and font face
because those aren't specified inline, but the color has so far alluded
me.

What you need to do, in CSS yerms, is to set both the p element's and the
font element's color. No matter what we think about the font element, it
constitutes an element in markup and the parsed document, so it has all the
properties defined in CSS specifications, and browsers are allowed to apply
the presentational hints given in color="..." attributes as corresponding
to settings in the page's (author's) style sheet. Conceptually, those
corresponding settings are treated as having the lowest possible
specificity and as appearing at the start of the page's style sheet, so it
is easy to override them - as long as you remember that they need to be
overridden for the font elements as well.

Thus, font { color: black; background: white; } would override the effect
of the font markup in this case, but you could also make things simpler:
* { color: black; background: white; }

Similarly, should you wish to nullify the effect of <b> markup, you would
say
b { font-weight: normal; }

I guess that these rules would work despite the fact that the markup is
invalid, with several font and b elements that have been opened but not
closed.

How you map this principle to client-side scripting that changes element
properties dynamically is off-topic for this group, I guess, and depends on
the DOM.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Jul 21 '05 #11

Michael Bierman

Thanks Jukka. I ended up with a solution that looks very much like
what you describe. For other people's reference, I found an excellent
resource at http://developer.apple.com/internet/...nt/styles.html

This sample code, which Apple has granted unresticted usage, solved my
problem nicely.

Regards,

Michael

Jul 21 '05 #12

How to override all sytles?

This discussion thread is closed

Similar topics