How can I over-ride external CSS inside HTML file?

**Els** · Jul 20 '05, 07:18 PM

Re: How can I over-ride external CSS inside HTML file?

Reply Via News Group Please wrote:
[color=blue]
> Folks,
>
> I'm new to CSS and realise that by posting in the html
> newsgroup, I might upset one or two readers by raising a
> CSS question in an html newsgroup however my ISP only has
> one small CSS newsgroup available - I'm hoping someone here
> might be able to help.
>
> I have an external style sheet which I call/install from
> inside my head tags like so:
>
> <link href="css/module.css" rel="stylesheet "
> type="text/css"> <link href="css/vst.css" rel="stylesheet "
> type="text/css">
>
> I would like to over-ride the fonts that are defined in the
> style sheet but leave the rest of the setup the same - I'm
> sure there must be a method that will allow me to over ride
> this via an html (or style tag) that appears somewhere
> after the above - but I don't know which (or how).[/color]

After the <link> elements but still inside the <head>:
<style type="text/css">
body{
font-family:Arial, sans-serif;
font-weight:bold;
}
</style>

Make sure that the styles you write in this styleblock aren't
less specific than the styles written in the stylesheet.

--
Els

Locus Meus

http://locusmeus.com/

Blog and other pages, mostly outdated.

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

**Reply Via News Group Please** · Jul 20 '05, 07:18 PM

Re: How can I over-ride external CSS inside HTML file?

Els wrote:
[color=blue]
> Reply Via News Group Please wrote:
>
>[color=green]
>>Folks,
>>
>>I'm new to CSS and realise that by posting in the html
>>newsgroup, I might upset one or two readers by raising a
>>CSS question in an html newsgroup however my ISP only has
>>one small CSS newsgroup available - I'm hoping someone here
>>might be able to help.
>>
>>I have an external style sheet which I call/install from
>>inside my head tags like so:
>>
>><link href="css/module.css" rel="stylesheet "
>>type="text/css"> <link href="css/vst.css" rel="stylesheet "
>>type="text/css">
>>
>>I would like to over-ride the fonts that are defined in the
>>style sheet but leave the rest of the setup the same - I'm
>>sure there must be a method that will allow me to over ride
>>this via an html (or style tag) that appears somewhere
>>after the above - but I don't know which (or how).[/color]
>
>
> After the <link> elements but still inside the <head>:
> <style type="text/css">
> body{
> font-family:Arial, sans-serif;
> font-weight:bold;
> }
> </style>
>
> Make sure that the styles you write in this styleblock aren't
> less specific than the styles written in the stylesheet.
>[/color]

Thanks for the prompt reply - I've tried what you've suggested and I've
seen a small change - To confirm changes were happening, I swapped the
order of the font family you suggested and noted that only the fonts
outside of tables were changing - anything inside a table was as per the
style sheet.

Since the majority of my table cells have "class=formLabe l", and my
style sheet has a style set for formLabel, is there a method that I can
use to over ride this class? I've tried using your syntax above, but
changing the word 'body' for 'formLabel' but that didn't work.

All help is much appreciated - I've actually just downloaded the PDF
file for CSS2 and I'm looking at the fonts section - but anything you
can do to help me along my way would be greatly appreciated,

thanks in advance,
randelld

**Reply Via News Group Please** · Jul 20 '05, 07:18 PM

Re: How can I over-ride external CSS inside HTML file?

Reply Via News Group Please wrote:
[color=blue]
> Els wrote:
>[color=green]
>> Reply Via News Group Please wrote:
>>
>>[color=darkred]
>>> Folks,
>>>
>>> I'm new to CSS and realise that by posting in the html
>>> newsgroup, I might upset one or two readers by raising a
>>> CSS question in an html newsgroup however my ISP only has
>>> one small CSS newsgroup available - I'm hoping someone here
>>> might be able to help.
>>> I have an external style sheet which I call/install from
>>> inside my head tags like so:
>>>
>>> <link href="css/module.css" rel="stylesheet "
>>> type="text/css"> <link href="css/vst.css" rel="stylesheet "
>>> type="text/css">
>>> I would like to over-ride the fonts that are defined in the
>>> style sheet but leave the rest of the setup the same - I'm
>>> sure there must be a method that will allow me to over ride
>>> this via an html (or style tag) that appears somewhere
>>> after the above - but I don't know which (or how).[/color]
>>
>>
>>
>> After the <link> elements but still inside the <head>:
>> <style type="text/css">
>> body{
>> font-family:Arial, sans-serif;
>> font-weight:bold;
>> }
>> </style>
>>
>> Make sure that the styles you write in this styleblock aren't less
>> specific than the styles written in the stylesheet.[/color]
>
>
> Thanks for the prompt reply - I've tried what you've suggested and I've
> seen a small change - To confirm changes were happening, I swapped the
> order of the font family you suggested and noted that only the fonts
> outside of tables were changing - anything inside a table was as per the
> style sheet.
>
> Since the majority of my table cells have "class=formLabe l", and my
> style sheet has a style set for formLabel, is there a method that I can
> use to over ride this class? I've tried using your syntax above, but
> changing the word 'body' for 'formLabel' but that didn't work.
>
> All help is much appreciated - I've actually just downloaded the PDF
> file for CSS2 and I'm looking at the fonts section - but anything you
> can do to help me along my way would be greatly appreciated,
>
> thanks in advance,
> randelld
>[/color]

I got it... with your help... thanks...

In order to over-ride the font for the class 'formLabel' I've tested it with

<style type="text/css">
..formLabel { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
</style>

I got those font names from the PDF on CSS2 and I noted that my style
sheets had their classes prefixed with a period/full-stop - I have the
styles after the <link> tags in my html file and it changed the font
through-out.

Thanks again for the prompt help,
randelld

**Dave Patton** · Jul 20 '05, 07:18 PM

Re: How can I over-ride external CSS inside HTML file?

Reply Via News Group Please <reply.via@news groups.please.t hanks> wrote in
news:lieIc.535$ 6l2.419@newsfe5-gui.ntli.net:
[color=blue]
>
> Folks,
>
> I'm new to CSS and realise that by posting in the html newsgroup, I
> might upset one or two readers by raising a CSS question in an html
> newsgroup however my ISP only has one small CSS newsgroup available -[/color]

A)
Ask your ISP to add the 'missing' newsgroups that you want to use.
B)
In the interim, you can use Google Groups to search the archives
of prior postings to many newsgroups, and to post to newsgroups
not carried by your ISP.

--
Dave Patton
Canadian Coordinator, Degree Confluence Project

the Degree Confluence Project

http://www.confluence.org/

The Degree Confluence Project contains photographs of the intersections of integer latitude and longitude degree lines.

My website: http://members.shaw.ca/davepatton/

**Els** · Jul 20 '05, 07:18 PM

Re: How can I over-ride external CSS inside HTML file?

Reply Via News Group Please wrote:
[color=blue]
> <style type="text/css">
> .formLabel { font-family: Baskerville, "Heisi Mincho W3",
> Symbol, serif } </style>
>
> I got those font names from the PDF on CSS2 and I noted
> that my style sheets had their classes prefixed with a
> period/full-stop - I have the styles after the <link> tags
> in my html file and it changed the font through-out.[/color]

This is how classes are defined in CSS always.
The full stop means class.
For example:

div{width:150px ;}
will give a width of 150px to all divs.

div.foo{width:1 50px;}
will give a width of 150px to all divs with class="foo"

..foo{width:150 px;}
will give a width of 150px to all block level elements with
class="foo". (would be all elements if inline elements could
take widths)

#bar{width:150p x;}
will give a width of 150px to the one element with id="bar".
(an id can only be used once per html file)
[color=blue]
> Thanks again for the prompt help,[/color]

You're welcome.

--
Els

Locus Meus

http://locusmeus.com/

Blog and other pages, mostly outdated.

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

**Reply Via News Group Please** · Jul 20 '05, 07:19 PM

Re: How can I over-ride external CSS inside HTML file?

Dave Patton wrote:
[color=blue]
> Reply Via News Group Please <reply.via@news groups.please.t hanks> wrote in
> news:lieIc.535$ 6l2.419@newsfe5-gui.ntli.net:
>
>[color=green]
>>Folks,
>>
>>I'm new to CSS and realise that by posting in the html newsgroup, I
>>might upset one or two readers by raising a CSS question in an html
>>newsgroup however my ISP only has one small CSS newsgroup available -[/color]
>
>
> A)
> Ask your ISP to add the 'missing' newsgroups that you want to use.
> B)
> In the interim, you can use Google Groups to search the archives
> of prior postings to many newsgroups, and to post to newsgroups
> not carried by your ISP.
>[/color]

Thanks - I do on occassions search the google groups, dunno why I didn't
think of it this time around...

cheers
randelld

**Reply Via News Group Please** · Jul 20 '05, 07:19 PM

Re: How can I over-ride external CSS inside HTML file?

Els wrote:
[color=blue]
> Reply Via News Group Please wrote:
>
>[color=green]
>><style type="text/css">
>>.formLabel { font-family: Baskerville, "Heisi Mincho W3",
>>Symbol, serif } </style>
>>
>>I got those font names from the PDF on CSS2 and I noted
>>that my style sheets had their classes prefixed with a
>>period/full-stop - I have the styles after the <link> tags
>>in my html file and it changed the font through-out.[/color]
>
>
> This is how classes are defined in CSS always.
> The full stop means class.
> For example:
>
> div{width:150px ;}
> will give a width of 150px to all divs.
>
> div.foo{width:1 50px;}
> will give a width of 150px to all divs with class="foo"
>
> ..foo{width:150 px;}
> will give a width of 150px to all block level elements with
> class="foo". (would be all elements if inline elements could
> take widths)
>
> #bar{width:150p x;}
> will give a width of 150px to the one element with id="bar".
> (an id can only be used once per html file)
>
>[color=green]
>>Thanks again for the prompt help,[/color]
>
>
> You're welcome.
>[/color]

I've filed this weeee piece of text in my useful folder - I have a whole
mixture of posts from javascript, php and other bits that I know at
some time or other, will come in useful.

again... thanks for that... enjoy the rest of the weekend whereever you are,

randelld

**Justin Wood** · Jul 20 '05, 07:19 PM

Re: How can I over-ride external CSS inside HTML file?

Reply Via News Group Please wrote:[color=blue][color=green]
>>[/color]
>
> I got it... with your help... thanks...
>
> In order to over-ride the font for the class 'formLabel' I've tested it
> with
>
> <style type="text/css">
> .formLabel { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
> </style>
>
> I got those font names from the PDF on CSS2 and I noted that my style
> sheets had their classes prefixed with a period/full-stop - I have the
> styles after the <link> tags in my html file and it changed the font
> through-out.
>
> Thanks again for the prompt help,
> randelld[/color]

Two things, "Symbol" in that font-family is most likely NOT what you
want, as it creates literally symbols instead of text! so if
"Baskervill e" and "Heisi Mincho W3" does not exist, and "Symbol" does,
it will be used before any `serif` font.

Secondly for any style to be marked important, and over-ride any other
rule in _your_ stylesheets (since user and UA stylesheets can over-ride
this with the same keyword) add "!important " (without the quotes) to
the end of your CSS property description, before the semi-colon.

Such as

body { font-family: ariel, helvetica, "Times New Roman", sans-serif
!important; }

(from memory on that only)

~Justin Wood

**Alan J. Flavell** · Jul 20 '05, 07:19 PM

Re: How can I over-ride external CSS inside HTML file?

On Sun, 11 Jul 2004, Justin Wood wrote:
[color=blue]
> Two things, "Symbol" in that font-family is most likely NOT what you
> want,[/color]

Agreed,
[color=blue]
> as it creates literally symbols instead of text![/color]

Not on a standards-conforming client, no. Symbol fonts aren't
constructed according to the principles of character representation in
HTML4 (RFC2070), and where this trick gives a visual impression of
working, it reveals only that the client agent isn't applying the
strict principles of HTML4, but is perpetuating a legacy trick that
was applied to earlier and simpler designs of HTML.

You'll see HTML4 done properly when Mozilla-based browsers are working
on standards-conformance mode.

Unless the client agent is aware somehow of which Unicode characters
are found at which position in the font, it shouldn't be using Symbol
fonts at all. It certainly shouldn't be seeing a Latin "q" and
displaying a "theta", and so on. Except perhaps when the charset is
user-defined.

**Justin Wood** · Jul 20 '05, 07:19 PM

Re: How can I over-ride external CSS inside HTML file?

Alan J. Flavell wrote:[color=blue]
> On Sun, 11 Jul 2004, Justin Wood wrote:
>
>[color=green]
>>Two things, "Symbol" in that font-family is most likely NOT what you
>>want,[/color]
>
>
> Agreed,
>
>[color=green]
>>as it creates literally symbols instead of text![/color]
>
>
> Not on a standards-conforming client, no. Symbol fonts aren't
> constructed according to the principles of character representation in
> HTML4 (RFC2070), and where this trick gives a visual impression of
> working, it reveals only that the client agent isn't applying the
> strict principles of HTML4, but is perpetuating a legacy trick that
> was applied to earlier and simpler designs of HTML.
>
> You'll see HTML4 done properly when Mozilla-based browsers are working
> on standards-conformance mode.
>
> Unless the client agent is aware somehow of which Unicode characters
> are found at which position in the font, it shouldn't be using Symbol
> fonts at all. It certainly shouldn't be seeing a Latin "q" and
> displaying a "theta", and so on. Except perhaps when the charset is
> user-defined.[/color]

Erm I took my use from Windows *named* "Symbol" font, which means that
the Symbol Keyword, providing the UA follows CSS correctly on windows,
would never use "Gimicked" fonts like that.

~Justin Wood

**Alan J. Flavell** · Jul 20 '05, 07:19 PM

Re: How can I over-ride external CSS inside HTML file?

On Mon, 12 Jul 2004, Justin Wood wrote:
[color=blue]
> Alan J. Flavell wrote:[color=green]
> > Unless the client agent is aware somehow of which Unicode characters
> > are found at which position in the font, it shouldn't be using Symbol
> > fonts at all. It certainly shouldn't be seeing a Latin "q" and
> > displaying a "theta", and so on. Except perhaps when the charset is
> > user-defined.[/color]
>
> Erm I took my use from Windows *named* "Symbol" font,[/color]

I don't grasp your point, sorry.
[color=blue]
> which means that the Symbol Keyword,[/color]

AIUI "Symbol" is a font name, not a CSS generic font keyword.

This from CSS2 15.2.2:

<generic-family>
The following generic families are defined: 'serif', 'sans-serif',
'cursive', 'fantasy', and 'monospace'. Please see the section on
generic font families for descriptions of these families. Generic font
family names are keywords, and therefore must not be quoted.

Or am I misunderstandin g your terminology?

It is kind of curious that the CSS2 specification (still referring to
15.2.2) gives an example of a list of fonts, of which Symbol is one,
and makes no further comment; maybe the CSS2 authors took it for
granted that the reader would understand the implications of RFC2070,
but I know from experience that many people haven't. However:

Weaving the Multilingual Web - 15th International Unicode Conference, 31 August 1999 - slide "Caveats"

http://www.w3.org/Talks/1999/0830-tutorial-unicode-mjd/slide29-0.html

at least makes the point.
[color=blue]
> providing the UA follows CSS correctly[/color]

I suppose I couldn't persuade you to come out with a bit more detail
on your interpretation of what you really mean by "follows CSS
correctly"? What actual coded characters or &-representations do you
plan to include in your HTML, and how do you intend them to be
rendered on a client agent?
[color=blue]
> on windows,[/color]

"windows"? Surely here we discuss the world-wide web, not only the
windows-narrow one. The whole point of RFC2070 was to establish a
reference character representation model, irrespective of the
implementation details of this or that operating system, font scheme,
etc. And upon that groundwork rests HTML4 and the whole XML edifice.

have fun.

**Justin Wood** · Jul 20 '05, 07:20 PM

Re: How can I over-ride external CSS inside HTML file?

Alan J. Flavell wrote:[color=blue]
> On Mon, 12 Jul 2004, Justin Wood wrote:
>
>[color=green]
>>Alan J. Flavell wrote:
>>[color=darkred]
>>>Unless the client agent is aware somehow of which Unicode characters
>>>are found at which position in the font, it shouldn't be using Symbol
>>>fonts at all. It certainly shouldn't be seeing a Latin "q" and
>>>displaying a "theta", and so on. Except perhaps when the charset is
>>>user-defined.[/color]
>>
>>Erm I took my use from Windows *named* "Symbol" font,[/color][/color]
....
Was more talking about the font, which win32 (MSWindows) supplies called
"Symbol" afaik that font *does* transcode normal characters into
"symbols" such as theta in your example...it was pre-unicode, and
existed in win95 and even win3.1, which is why the didnt re-map to
unicode as far as I know, to preserve the format of the old files.

The rest of your reply took my initial wording about his specific use of
"Symbol" as likely not what he wanted nearly out of context, and I
choose not to continue on that tangent myself.

Thank you much for your thoughts and replies however, I do appreciate
them, as un-intended (on my part) as their responses were.

~Justin Wood

**Alan J. Flavell** · Jul 20 '05, 07:20 PM

Re: How can I over-ride external CSS inside HTML file?

On Tue, 13 Jul 2004, Justin Wood wrote:
[color=blue]
> Was more talking about the font, which win32 (MSWindows) supplies called
> "Symbol"[/color]

I think you'll find that the definition of this font is due to
Adobe...
[color=blue]
> afaik that font *does* transcode normal characters into
> "symbols" such as theta in your example...[/color]

That might be what the font intends; but that's not how character
representation works in specification-conforming HTML. The principles
have been on record since at least 1996:

http://babel.alis.com:8080/web_ml/html/fontface.html

and published in RFC2070, issued early in 1997.

And those same principles apply to any use of CSS for styling the
presentation of HTML.
[color=blue]
> it was pre-unicode, and existed in win95 and even win3.1, which is
> why the didnt re-map to unicode as far as I know, to preserve the
> format of the old files.[/color]

The correct Unicode values for characters in the Symbol font are shown
in the reference tables at the Unicode site, see

http://www.unicode.org/Public/MAPPINGS/VENDORS/ADOBE/symbol.txt

Most of these characters have their proper place in the official
Unicode tables, and do not need any mention of a named font in order
to be displayed correctly. However, the remainder are defined in the
Private Use Area (PUA). Use of PUA references in HTML is rather
dubious, since the approved method of proposing a font family is via
CSS, and CSS is *supposed* to be optional. But at least if the client
agent doesn't know what to do with a character from the PUA, there's
much less risk of it displaying the *wrong* character (e.g displaying
"q" when the author intended "theta", which is what a
specification-conforming web browser is *supposed* to do when it's
sent a "q").

In similar vein, see also

http://www.unicode.org/Public/MAPPINGS/VENDORS/ADOBE/zdingbat.txt

**Alan J. Flavell** · Jul 20 '05, 07:20 PM

Re: How can I over-ride external CSS inside HTML file?

On Wed, 14 Jul 2004, Alan J. Flavell wrote:
[color=blue]
> On Tue, 13 Jul 2004, Justin Wood wrote:
>[color=green]
> > Was more talking about the font, which win32 (MSWindows) supplies called
> > "Symbol"[/color]
>
> I think you'll find that the definition of this font is due to
> Adobe...[/color]

Apparently I need to add something to that remark.

I've looked more closely at MS's font, and whereas the characters
outside of the Private Use Area[1] look to be the same in MS's Symbol
font as they are in Adobe's documentation, those characters which are
in the PUA are laid out quite differently, it seems.

As usual, Win Mozilla seems to do quite a good job with this,
although it isn't quite 100%.

But IE doesn't seem to want to display any of the PUA characters,
and it even fails to display a few of the non-PUA characters,
depending on which font is specified for Latin.

I'll try to add something to my web pages about this in due course.
It certainly reinforces my earlier remark about the use of PUA
characters in HTML being problematical. But using Latin characters as
stand-ins for symbols (in the way that, as you say, the Symbol font
was originally intended to be used) is even more-problematical in
HTML4!

cheers

[1] The "Corporate Use Sub-area" (CUS), to be a bit more specific.

How can I over-ride external CSS inside HTML file?

How can I over-ride external CSS inside HTML file?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment