Different style for the fragment of a document

N

Netx

I want to use another style for the fragment in the document
however I am a total beginner to css.
Currently I have:
<HTML>
<HEAD>
(...)
<LINK href="images/style.css" type=text/css rel=StyleSheet>
The above style works ok for the whole document. Now I want
another additional style so I added below:
<LINK href="images/style2.css" type=text/css rel=Style2
title="Style2">

And I try in vain to apply the second style for the fragment of
the document, but unsuccessfully:
<div align="center" class="Style2" style="Style2">
<center><a href="/~Fusion" class="Style2">Fusion</a>
</div><br>
Unfortunately "Style2" is not being applied and "the first" style
is used. If possible please correct my code how it should work.
I have searched in www for solution but didn't find as yet. If
you know link to exhaustive html&css syntax course I would
appreciate such link.

Mark
 
N

Netx

Ok. I have found one working solution to add "#style2" prefix in
"style2.css" for example:
#style2 A:link { ... }
#style2 A:active {...}

And then to use "id" in div:
<div id="Style2" align="center">

But this solution doesn't enjoys me as I have to write many times
"#style2" in the file "style2.css".
Is there any way to include the "#style2" phrase only once? For
example in the header of the file "style2.css" or while inlucing
this file by "<LINK href="images/style2.css" type=text/css
rel=StyleSheet>" ?
 
D

dorayme

"Netx said:
I want to use another style for the fragment in the document
however I am a total beginner to css.
Currently I have:
<HTML>
<HEAD>
(...)
<LINK href="images/style.css" type=text/css rel=StyleSheet>
The above style works ok for the whole document. Now I want
another additional style so I added below:
<LINK href="images/style2.css" type=text/css rel=Style2
title="Style2">
Click to expand...

You don't change the rel= to something else with every stylesheet link...

<http://htmldog.com/guides/cssbeginner/applyingcss/>

And I try in vain to apply the second style for the fragment of
the document, but unsuccessfully:
<div align="center" class="Style2" style="Style2">
<center><a href="/~Fusion" class="Style2">Fusion</a>
</div><br>
Click to expand...


No, you are mixing things up, if you are going to apply CSS styles,
there is no need here to use HTML presentational markup like align=

<http://htmldog.com/guides/htmlbeginner/>

where it is put this way:

"The thing to keep in mind is that HTML and CSS are all about separating
the content (HTML) and the presentation (CSS). HTML is nothing more than
fancy structured content and the visual formatting of that content will
come later when we tackle CSS."

Which is OK in many ways.

Unfortunately "Style2" is not being applied and "the first" style
is used. If possible please correct my code how it should work.
I have searched in www for solution but didn't find as yet. If
you know link to exhaustive html&css syntax course I would
appreciate such link.
Click to expand...


Perhaps the only thing worth emphasising to you at this stage is that if
you have very little by way of changing one or two things in one or two
pages of a site, you can embed styles into the head of the doc, you can
even put the odd change into an inline CSS style. All excplained in the
refs above.

Generally, one stylesheet should be the first aim. Separate out only if
it is unwieldy.
 
N

Netx

You don't change the rel= to something else with every
stylesheet link...
Click to expand...

I must admin that I don't know syntax yet and don't know what
"rel=" stands for. I will check it.
I just see that I should use one value for "rel=" .
No, you are mixing things up, if you are going to apply CSS
styles,
there is no need here to use HTML presentational markup like
align=

<http://htmldog.com/guides/htmlbeginner/>
Click to expand...

Clear example. It only lacks info how to use two different styles
from two .css files for one html document.
where it is put this way:

"The thing to keep in mind is that HTML and CSS are all about
separating
the content (HTML) and the presentation (CSS). HTML is nothing
more than
fancy structured content and the visual formatting of that
content will
come later when we tackle CSS."

Which is OK in many ways.




Perhaps the only thing worth emphasising to you at this stage
is that if
you have very little by way of changing one or two things in
one or two
pages of a site, you can embed styles into the head of the doc,
you can
even put the odd change into an inline CSS style. All
excplained in the
refs above.
Click to expand...
Generally, one stylesheet should be the first aim. Separate out
only if
it is unwieldy.
Click to expand...

I just try to change one .html file which uses external .css file
and I want a different style for some fragments (because with the
original style the content that I added is almost invisible in
the place that I chose ).
And at the moment I would prefer to keep styles in separate
files.

However I see from your post that it is recommended to keep one
style for the whole page.

Thanks for your support,
Mark
 
D

dorayme

"Netx said:
I just try to change one .html file which uses external .css file
and I want a different style for some fragments
Click to expand...

If it is just for fragments then embed a small amount of CSS in the head
of the doc.

Suppose that with this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<p>This text is all one colour, usually black,
but on this occasion, red. </p>
</body>
</html>

the text comes out in black because in the main.css, the text is set to
be black. Either directly on Ps or inherited by Ps. You want all Ps on
this [page to be red, not black.

You can do this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="main.css">

<style type="text/css" media="screen">
p {color: red; background: white;}
</style>

</head>
<body>
<p>This text is all one colour, usually black,
but on this occasion, red.</p>
</body>
</html>

Or, if you just want one particular P to be red you can class or ID it
and use p.class {color: red;...}

You can also simply put the odd style inline like this:

<p style="color?: red;...">This text is all one colour, usually black,
but on this occasion, red.</p>

If you read the references I gave you, and do some experiments, you will
understand this better.
 
J

Jukka K. Korpela

Netx said:
I must admin that I don't know syntax yet and don't know what
"rel=" stands for. I will check it.
Click to expand...

Good for you. Trying to learn CSS by trial and error tends to lead mostly to
errors - and also to misconceptions, wrong habits, and risky code, since
some of "natural" guesses lead to broken constructs that appear to work, at
least on broken browser.

This advice from "dorayme" is dangerous, because it is far too easy to
misunderstand it.

For a _site_, it is usually best to start from one stylesheet, then add
page-specific stylesheets if needed. It soon turns out that you need at
least _some_ page-specific tuning.
I just try to change one .html file which uses external .css file
and I want a different style for some fragments (because with the
original style the content that I added is almost invisible in
the place that I chose ).
Click to expand...

Thinking in terms of fragments easily leads to confusion. It is better to
find out what is wrong with your basic style sheet and fix it. If anything
turns to almost invisible when displayed using your basic style sheet, then
it most probably needs some fixing.

You _can_ wrap a fragment inside <div class="foo">...</div> and then add
rules that start with .foo in order to make some rules apply there only,
e.g.
..foo p { margin: 0; text-indent: 1em; }
but inside the fragment, the added rules will be applied _in addition to_
your all other rules. You may be able to make specific rules "win", but this
is really advanced stuff. It's about the cascade, and the vast majority of
even experienced authors is thoroughly misguided in cascade matters.
 
B

Bergamot

Netx said:
...how to use two different styles
from two .css files for one html document.

I just try to change one .html file which uses external .css file
and I want a different style for some fragments (because with the
original style the content that I added is almost invisible in
the place that I chose ).
Click to expand...

So you decided a second stylesheet was the solution to your problem,
without even figuring out why your added content is "almost invisible"?
That is a typical newbie mistake - hack away at things without
understanding what you're doing, or why you're doing it. You'll only dig
yourself into a deeper hole that way.

If you post a URL, we may be able to suggest a better solution. Do not
post code, post a URL.
 
D

dorayme

This advice from "dorayme" is dangerous, because it is far too easy to
misunderstand it.[/QUOTE]

Some people have argued that such statements are neither true nor false
on the ground that there is no such subject. Others have argued that it
is false for the same reason. The dispute turns on whether an assumption
of an assertion is part of what is asserted or simply needing itself to
be true for the assertion to be a proper candidate for truth or falsity.

A linguistic object cannot give advice, dangerous or not. But a
creature, no matter how disgusting or cowardly, can. I, dorayme, gave
the dangerous advice, not my name. My name is not the sort of thing that
subscribes to newsgroups. But my very own cowardly self is very much the
sort of thing that can subscribe.
 
C

Chaddy2222

This advice from "dorayme" is dangerous, because it is far too easy to
misunderstand it.
Click to expand...

Some people have argued that such statements are neither true nor false
on the ground that there is no such subject. Others have argued that it
is false for the same reason. The dispute turns on whether an assumption
of an assertion is part of what is asserted or simply needing itself to
be true for the assertion to be a proper candidate for truth or falsity.

A linguistic object cannot give advice, dangerous or not. But a
creature, no matter how disgusting or cowardly, can. I, dorayme, gave
the dangerous advice, not my name. My name is not the sort of thing that
subscribes to newsgroups. But my very own cowardly self is very much the
sort of thing that can subscribe.
[/QUOTE]
WTF?
I think Berg is right on the money with his previous reply. You should
not need an entire stylesheet *seperate from the main one* to define a
single part of a document. The only reason I would use an extra CSS
file would be if I needed to style each page differently (for whatever
reason).
 
N

Netx

So you decided a second stylesheet was the solution to your
problem, without even figuring out why your added content is
"almost invisible"?
Click to expand...
It seems to me obvious that new content is invisible because of
color combination from the oryginal style (bright letters for
links) and the bright color of backgroud in the place where I am
adding text and links.
If you post a URL, we may be able to suggest a better solution.
Do not post code, post a URL.
Click to expand...
Can't post you link to my site as it is my "training site" on
Windows with many features (ftp, mysql, apache, joomla etc.)
because of which I am afraid of my Windows security at the
moment. Also currently it is only training for me to see how new
techniques work and learn a bit (I was programming html
"professionally" 10 years ago when css was in its childhood and I
didn't use css).

I have just uploaded only the frontpage to free-hosting site and
here is the address:
http://www.cavea.yoyo.pl/

The problem I was describing here was to add visible links and
some comments which are (see below the top banners):
"KRASNAL NA KOMPUTERZE MARKA B.
Joomla Site, Joomla-Admin
KRASNAL PACK: Fusion, Geeklog, Ibp, Ibp2, Jportal2,
Mambo, Nuke, Postnuke, Przyklad-2, Sqlitemanager, Test,
Xoops2."

Without changing css style locally above text and links came
invisible in the place where I added them.
I decided to use "class" (as was suggested above) because if I
used "id", I would end up with many objects having the same "id"
which I though may be not good for Javascript.

If you see that my solution with "class" is faulty, I will
appreciate your comments as I want to learn about html and
related techniques.

Mark
 
J

Jonathan N. Little

Netx said:
It seems to me obvious that new content is invisible because of
color combination from the oryginal style (bright letters for
links) and the bright color of backgroud in the place where I am
adding text and links.
Click to expand...

That is why if you had validated your stylesheet

http://jigsaw.w3.org/css-validator/
The W3C CSS Validation Service

You would have received a warning whenever you create a rule that set
the color *without* also setting the background-color.
Can't post you link to my site as it is my "training site" on
Windows with many features (ftp, mysql, apache, joomla etc.)
because of which I am afraid of my Windows security at the
moment. Also currently it is only training for me to see how new
techniques work and learn a bit (I was programming html
"professionally" 10 years ago when css was in its childhood and I
didn't use css).

I have just uploaded only the frontpage to free-hosting site and
here is the address:
http://www.cavea.yoyo.pl/

The problem I was describing here was to add visible links and
some comments which are (see below the top banners):
"KRASNAL NA KOMPUTERZE MARKA B.
Joomla Site, Joomla-Admin
KRASNAL PACK: Fusion, Geeklog, Ibp, Ibp2, Jportal2,
Mambo, Nuke, Postnuke, Przyklad-2, Sqlitemanager, Test,
Xoops2."
Click to expand...

We set the background color when you set the text color, confirmed here:

http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http://www.cavea.yoyo.pl/
W3C CSS Validator results for http://www.cavea.yoyo.pl/ (CSS level 2)

Also, markup is a mess. Getting constant results will be impossible with
so many errors

http://validator.w3.org/check?verbose=1&uri=http://www.cavea.yoyo.pl/
[Invalid] Markup Validation of http://www.cavea.yoyo.pl/ - W3C Markup
Validator

I think you have your work cut out for you. My advice is first fix your
markup errors, then add your style...
 
J

Jukka K. Korpela

Chaddy2222 said:
You should
not need an entire stylesheet *seperate from the main one* to define a
single part of a document.
Click to expand...

If you use <p style="line-height: 1.2">...</p>, then you _are_ using an
entire stylesheet separate from the main one. It's not a separate CSS
_file_, but it's a separate stylesheet.
The only reason I would use an extra CSS
file would be if I needed to style each page differently (for whatever
reason).
Click to expand...

You can style each page differently using a single stylesheet if you like.
For example, use different id attributes for the <body> elements, and you
can do all the styling inside a single stylesheet.

Whether this is practical depends on what you are doing. The discussion has
been quite abstract, so the answers are abstract too - which implies that
any _simple_ answer is most probably wrong.
 
D

dorayme

mbstevens said:
Most people find the claim that not-p completely obvious and when I
assert p they give me an incredulous stare. But the fact that they find
not- p obvious is no argument that it is true; and I do not know how to
refute an incredulous stare. Therefore, p.
<Lewis>
Click to expand...


The only time I knew of a remark about the "incredulous stare" was when
Lewis was talking about the lack of argument he was receiving against
his solitary position on possible worlds. In spite of the great respect
he was held in, for extremely good reasons, I never came across anyone
who believed him. There may have been some, but no established figure in
the field put their heads up above the trenches in any me-too. It's a
grand picture though!

I was talking about a very specific issue, whether to call a statement
true or false if the subject does not exist (To take a couple of
English, Russell thought yes, Strawson, no). But the whole world would
at least agree that a claim that a name has given dangerous advice
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to position the *tooltip* comment on these buttons? 9
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Having difficulty with the layout of these images / video for this web page 2
Background image not showing up on html page 3
Help with code 0
How to store data from a sign up form on a website into an sql databse 1
An unknown bug doesn't allow the quotes app to work. What's the issue? 3
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0

Members online

Total: 19 (members: 2, guests: 17)
Robots: 499

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top