View Full Version : CSS in HTML body code?

10-21-2008, 10:12 PM
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.

10-21-2008, 10:18 PM
Add another style sheet. You can have more than one.

<div style="background: url();">Div with bg image</div>

10-21-2008, 10:28 PM
As twodays suggested, another style sheet would be preferable. But if the change is minor and permanent, then you can insert

<style type="text/css">
/*new definitions here*/

anywhere in your head and body.

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

10-22-2008, 07:21 AM
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):

"-//W3C//DTD HTML 4.01//EN"
<html lang="en">
<title>Test HTML 4.01 Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<h1>Test HTML 4.01 Template</h1>

<style type="text/css">
p { font-size : 2em ; }

<p>Hello world.</p>

So, you'll have to use inline styles as twodayslate suggested.

10-22-2008, 11:49 AM
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.

10-22-2008, 10:00 PM
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 ;)

Major Payne
10-26-2008, 03:01 AM
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.

10-26-2008, 05:17 AM
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);}


10-27-2008, 01:31 AM
why dont you just use an html code instead of css

10-27-2008, 03:03 AM
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.


10-27-2008, 03:41 AM
now lets let this thread die now...
OP isn't here

01-07-2009, 03:42 PM
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:

<div id="MySpecialRegion">

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

but it would be handy to have in-body style-sheets (http://www.codingforums.com/showpost.php?p=741685&postcount=4). i don't see any reason why it would be illogical or against any web-programming ethics. myspace does it, you say?

01-07-2009, 03:55 PM
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 (http://en.wikipedia.org/wiki/Separation_of_presentation_and_content). That means: You write clean, semantic (http://boagworld.com/technology/semantic_code_what_why_how/) 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.

01-07-2009, 03:59 PM
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?

01-07-2009, 04:07 PM
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 :p

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.

01-07-2009, 05:53 PM
You can, of course, use the style attribute with elements in the body of documents IAW with the specifications -- as, for example, the W3C does with their CSS validation icons:



01-08-2009, 01:01 PM
why dont you just use an html code instead of css

HTML is supposed to display data and content.

CSS is for, as its name implies, applying styles and designs to a website.

And anyway, it's been said a million times in this thread already, but I'm gonna say it again. Styles shouldn't be placed inline anymore.

01-09-2009, 05:38 PM
there are a million reasons why one would have inline styles, probably billions of websites that use it. personally, i make programming choices on a case by case basis.

for example, if every "UL" in a one-page site is formatted differently, it's overkill to have a separate css file, and it would make for headaches, because then every UL would need a unique ID, and its own entry in the css file. one of the reasons for separation of style is to promote code-reuse. if a style is not being reused, that takes away that reason.

another example, "never use GOTO" (in back-end programming) is a guideline meant to prevent spaghetti-code. i dont write spaghetti code, and sometimes judicious use of goto keeps my code less spaghetti-like.

my one strict rule is to never blindly follow strict rules. a wise programmer understands the reasons for particular rules, follows them when it makes sense, and breaks them when it makes sense.