Different style for the fragment of a document

Discussion in 'HTML' started by Netx, Nov 29, 2008.

  1. Netx

    Netx Guest

    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
     
    Netx, Nov 29, 2008
    #1
    1. Advertising

  2. Netx

    Netx Guest

    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>" ?
     
    Netx, Nov 29, 2008
    #2
    1. Advertising

  3. Netx

    dorayme Guest

    In article <4931b82e$0$29387$>,
    "Netx" <> wrote:

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


    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>



    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.



    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.

    --
    dorayme
     
    dorayme, Nov 29, 2008
    #3
  4. Netx

    Netx Guest

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

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


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

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

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


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

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


    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
     
    Netx, Nov 29, 2008
    #4
  5. Netx

    dorayme Guest

    In article <4931c92a$0$29402$>,
    "Netx" <> wrote:

    > I just try to change one .html file which uses external .css file
    > and I want a different style for some fragments


    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.

    --
    dorayme
     
    dorayme, Nov 29, 2008
    #5
  6. Netx wrote:

    > I must admin that I don't know syntax yet and don't know what
    > "rel=" stands for. I will check it.


    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.

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


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


    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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Nov 30, 2008
    #6
  7. Netx

    Bergamot Guest

    Netx wrote:
    >
    > ...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 ).


    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.

    --
    Berg
     
    Bergamot, Nov 30, 2008
    #7
  8. Netx

    dorayme Guest

    In article <GltYk.99110$>,
    "Jukka K. Korpela" <> wrote:

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

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


    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.

    --
    dorayme
     
    dorayme, Dec 1, 2008
    #8
  9. Netx

    Chaddy2222 Guest

    On Dec 1, 6:03 pm, dorayme <> wrote:
    > In article <GltYk.99110$>,
    >  "Jukka K. Korpela" <> wrote:
    >
    > > >> Generally, one stylesheet should be the first aim. Separate out
    > > >> only if it is unwieldy.

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

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

    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).
    --
    Regards Chad. http://freewebdesignonline.org
     
    Chaddy2222, Dec 1, 2008
    #9
  10. Netx

    Netx Guest

    > So you decided a second stylesheet was the solution to your
    > problem, without even figuring out why your added content is
    > "almost invisible"?

    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.

    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
     
    Netx, Dec 1, 2008
    #10
  11. Netx wrote:
    >> So you decided a second stylesheet was the solution to your
    >> problem, without even figuring out why your added content is
    >> "almost invisible"?

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


    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.

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

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


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

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 1, 2008
    #11
  12. Chaddy2222 wrote:

    > You should
    > not need an entire stylesheet *seperate from the main one* to define a
    > single part of a document.


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


    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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Dec 1, 2008
    #12
  13. Netx

    dorayme Guest

    In article <>,
    mbstevens <> wrote:

    > On Mon, 01 Dec 2008 18:03:54 +1100, dorayme wrote:
    >
    > > In article <GltYk.99110$>,
    > > "Jukka K. Korpela" <> wrote:
    > >
    > >> >> Generally, one stylesheet should be the first aim. Separate out only
    > >> >> if it is unwieldy.
    > >>
    > >> This advice from "dorayme" is dangerous, because it is far too easy to
    > >> misunderstand it.

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

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



    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
    cannot be true, whether it can be false or not. <g>

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


    --
    dorayme
     
    dorayme, Dec 1, 2008
    #13
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. n4te
    Replies:
    0
    Views:
    331
  2. n4te
    Replies:
    0
    Views:
    380
  3. Ken Varn
    Replies:
    0
    Views:
    532
    Ken Varn
    Apr 26, 2004
  4. User Access Approved
    Replies:
    0
    Views:
    148
    User Access Approved
    Oct 15, 2004
  5. Alexander Mikhailian

    Copy responseXML DOM fragment to the document

    Alexander Mikhailian, Oct 15, 2005, in forum: Javascript
    Replies:
    3
    Views:
    137
    Martin Honnen
    Oct 16, 2005
Loading...

Share This Page