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.

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

P: n/a

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).

Can someone help? All replies please via the newsgroup so that others
can learn too...

Thanks in advance,
randelld

Jul 20 '05 #1
Share this Question
Share on Google+
14 Replies


P: n/a
Els
Reply Via News Group Please wrote:
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).


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
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #2

P: n/a
Els wrote:
Reply Via News Group Please wrote:

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).

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.


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=formLabel", 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

Jul 20 '05 #3

P: n/a
Reply Via News Group Please wrote:
Els wrote:
Reply Via News Group Please wrote:

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).


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.

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=formLabel", 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


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
Jul 20 '05 #4

P: n/a
Reply Via News Group Please <re*******@newsgroups.please.thanks> wrote in
news:li***************@newsfe5-gui.ntli.net:

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 -


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
http://www.confluence.org/
My website: http://members.shaw.ca/davepatton/
Jul 20 '05 #5

P: n/a
Els
Reply Via News Group Please wrote:
<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.
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:150px;}
will give a width of 150px to all divs with class="foo"

..foo{width:150px;}
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:150px;}
will give a width of 150px to the one element with id="bar".
(an id can only be used once per html file)
Thanks again for the prompt help,


You're welcome.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #6

P: n/a
Dave Patton wrote:
Reply Via News Group Please <re*******@newsgroups.please.thanks> wrote in
news:li***************@newsfe5-gui.ntli.net:

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 -

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.


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

cheers
randelld
Jul 20 '05 #7

P: n/a
Els wrote:
Reply Via News Group Please wrote:

<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.

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:150px;}
will give a width of 150px to all divs with class="foo"

..foo{width:150px;}
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:150px;}
will give a width of 150px to the one element with id="bar".
(an id can only be used once per html file)

Thanks again for the prompt help,

You're welcome.


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
Jul 20 '05 #8

P: n/a
Reply Via News Group Please wrote:


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

Two things, "Symbol" in that font-family is most likely NOT what you
want, as it creates literally symbols instead of text! so if
"Baskerville" 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
Jul 20 '05 #9

P: n/a
On Sun, 11 Jul 2004, Justin Wood wrote:
Two things, "Symbol" in that font-family is most likely NOT what you
want,
Agreed,
as it creates literally symbols instead of text!


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.
Jul 20 '05 #10

P: n/a
Alan J. Flavell wrote:
On Sun, 11 Jul 2004, Justin Wood wrote:

Two things, "Symbol" in that font-family is most likely NOT what you
want,

Agreed,

as it creates literally symbols instead of text!

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.


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
Jul 20 '05 #11

P: n/a
On Mon, 12 Jul 2004, Justin Wood wrote:
Alan J. Flavell wrote:
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.
Erm I took my use from Windows *named* "Symbol" font,


I don't grasp your point, sorry.
which means that the Symbol Keyword,
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 misunderstanding 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:
http://www.w3.org/Talks/1999/0830-tu...slide29-0.html
at least makes the point.
providing the UA follows CSS correctly
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?
on windows,


"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.
Jul 20 '05 #12

P: n/a
Alan J. Flavell wrote:
On Mon, 12 Jul 2004, Justin Wood wrote:

Alan J. Flavell wrote:
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.


Erm I took my use from Windows *named* "Symbol" font,

....
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
Jul 20 '05 #13

P: n/a
On Tue, 13 Jul 2004, Justin Wood wrote:
Was more talking about the font, which win32 (MSWindows) supplies called
"Symbol"
I think you'll find that the definition of this font is due to
Adobe...
afaik that font *does* transcode normal characters into
"symbols" such as theta in your example...
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.
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 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/MAPPIN...OBE/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/MAPPIN...E/zdingbat.txt

Jul 20 '05 #14

P: n/a
On Wed, 14 Jul 2004, Alan J. Flavell wrote:
On Tue, 13 Jul 2004, Justin Wood wrote:
Was more talking about the font, which win32 (MSWindows) supplies called
"Symbol"


I think you'll find that the definition of this font is due to
Adobe...


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.

Jul 20 '05 #15

This discussion thread is closed

Replies have been disabled for this discussion.