Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS in HTML body code?

    I want to change the background image of a div element using CSS in the body of a HTML page, how can I do this? It must be done in HTML body and not the style sheet as the same stylesheet is used for the entire website and only one page needs a different background image.

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Add another style sheet. You can have more than one.
    Code:
    <div style="background: url();">Div with bg image</div>
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    As twodays suggested, another style sheet would be preferable. But if the change is minor and permanent, then you can insert
    Code:
    <style type="text/css">
    /*new definitions here*/
    </style>
    anywhere in your head and body.

    Some people even recommend inserting your CSS at the end of your page for http request overload reasons.

  • #4
    Regular Coder Samhain13's Avatar
    Join Date
    Aug 2008
    Location
    Pilipinas
    Posts
    169
    Thanks
    4
    Thanked 18 Times in 18 Posts
    As far as I know, you can't put the style element inside the body element. I.e., this won't validate (although it works):

    Code:
    <!DOCTYPE HTML PUBLIC
      "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
      <head>
        <title>Test HTML 4.01 Template</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      </head>
      
      <body>
        <h1>Test HTML 4.01 Template</h1>
    
        <style type="text/css">
          <!--
            p { font-size : 2em ; }
          //-->
        </style>
    
        <p>Hello world.</p>
      </body>
    </html>

    So, you'll have to use inline styles as twodayslate suggested.
    I am a Man of Truth. I am a Free Human Person. I am a Peacemaker.
    ** Independent Multimedia Artist in Pasig **

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Quote Originally Posted by Samhain13 View Post
    As far as I know, you can't put the style element inside the body element. I.e., this won't validate (although it works):
    That’s true. A stylesheet in the body isn’t allowed (although sites like MySpace *shudder* show that it still works). Either another external stylesheet, an internal stylesheet (in the head section), or an inline style for a certain HTML element are the options.

  • #6
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    I know it doesn't validate, I guess I shoulda mentioned it

    It's a weigh the pros/cons situation. Validatable code is always preferred, but sometimes you have to check what you're main goal is.

    Buttering both sides of the toast is delicious and usually very possible, but not every time
    Last edited by itsallkizza; 10-22-2008 at 10:02 PM. Reason: spelling

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    832
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Why not use a selector name for the body tag on the original style sheet and call it out on the page you need to use the styling? All other pages will ignore it:

    body#selector_name { style stuff here }

    Then <body id="selector_name">

    Can do this one one CSS for multiple pages that might require something different from all others. Selector name could be name of file if you want.
    ☠ ☠RON☠ ☠

  • #8
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    I don't see any need to go messing around in the body, to get the result you're after.

    Just call the #div on the other page #something else and give it seperate style. Kinda the whole point of CSS, really.

    If it's the whole page background you want changed, you can use more than one #wrapper div (which spans the whole page) and just put in a different background for each.

    And you don't have to have keep repeating them, either. You can put all common styles for different divs together. For example, you can write:
    #div1, #div2, #div3 {insert common styles here}
    Then just use seperate rules, to handle the background images, like so:
    #div1 {background-image: url(whatever.jpg);}
    #div2 {background-image: url(something-else.jpg);}

    Simple.
    Last edited by Doctor_Varney; 10-26-2008 at 05:33 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #9
    Regular Coder
    Join Date
    Oct 2008
    Posts
    130
    Thanks
    0
    Thanked 4 Times in 4 Posts
    why dont you just use an html code instead of css

  • #10
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by GardenGnome2 View Post
    why dont you just use an html code instead of css
    css is for presentation, in other words you can make a layout using html and change the view using css without changing html part, that is one reason.
    second is that you can do some things using only html.

    regards

  • #11
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    now lets let this thread die now...
    OP isn't here
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #12
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Not dead

    here's why i need a style-sheet in the body:

    i want a style-sheet to apply to a sub-section of the body, not the whole body.

    i cannot use ID's or Classes to select the sub-section, because the subsection is dynamic-- it's a menu of pages on my site. as i add, remove, and rename pages, the menu is dynamically updated by a shared php function.

    so it looks like my only option is to surround the function with a Div, with a name and/or class, and then use css selectors in my external style sheet to apply styles to that div:

    Page.html:
    <html>
    ...
    <body>
    ...
    <div id="MySpecialRegion">
    ...
    </div>
    ...
    </html>


    MyStyles.css:
    ...
    #MySpecialRegion a{color:green;}
    #MySpecialRegion H1:hover{color:blue;}
    ...


    but it would be handy to have in-body style-sheets. i don't see any reason why it would be illogical or against any web-programming ethics. myspace does it, you say?
    Last edited by johnywhy; 01-07-2009 at 03:52 PM.

  • #13
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    Quote Originally Posted by johnywhy View Post
    i don't see any reason why it would be illogical or against any web-programming ethics. myspace does it, you say?
    MySpace is illogical and against any web programming ethics.

    There is a theory/philosophy that has been there since (or even before) HTML was invented. The only problem that prevented it from being used widely in web development in the past was crappy browser implementation (nowadays browsers are good enough). And this principle is called: separation of content and presentation. That means: You write clean, semantic code (HTML – content/markup/plain information) and then style it by using a separate, external stylesheet. Don’t use presentational HTML attributes or inline styles except in exceptional cases.

    The way you mentioned (apply a container element and style child elements with the approriate CSS selectors) is the perfect and only valid way to do it. Live with it or give it up. MySpace is the worst example that you can go after.
    Last edited by VIPStephan; 01-07-2009 at 03:58 PM.

  • #14
    New Coder
    Join Date
    Jan 2009
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    i tend to agree with all your points. myspace is crap! separation of content and presentation is a cleaner smarter way to code (and i would add separation of data).

    but rules were meant to be broken, hey?

  • #15
    New Coder
    Join Date
    Jan 2009
    Location
    Essex, UK
    Posts
    60
    Thanks
    10
    Thanked 5 Times in 5 Posts
    MySpace's target audience are not web designers or developers... It is simply targeted at people who are non-technical but want to network with people around to world - and obviously these people want to style there pages to whatever they 'think' looks and 'works' best.

    For this reason alone I am putting forward that MySpace should never be referenced on this forum ever again

    oh and for the original subject - I personally say that background images should only be used on the body class in your css, if you want a different background on other pages then load in more style sheets makes things a LOT easier if you are using includes.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •