In CSS, * or body?

Arios · 11-01-2015, 10:52 AM

Hi guys,

Just by curiosity: in CSS is it better to use, for example:

Code:

* {
    margin: 0;
    text-indent: 0;
    padding: 0;
}

or put it in the the <body>:

Code:

body {
    margin: 0;
    text-indent: 0;
    padding: 0;
}

I mean, is it more in the semantic line or relevant/effective to use one instead of the other?

Incidentally what is the purpose of using, in an epub chapter, an empty <div>? A trick for some eReaders? You know, something like that:

Code:

<body>
<div>
  <h1>Title</h1>

  <p>blaba...</p>
</div>
</body>

RbnJrg · 11-01-2015, 11:54 AM

Quote:

Originally Posted by Arios

Hi guys,

Just by curiosity: in CSS is it better to use, for example:

Code:

* {
    margin: 0;
    text-indent: 0;
    padding: 0;
}

or put it in the the <body>:

Code:

body {
    margin: 0;
    text-indent: 0;
    padding: 0;
}

I mean, is it more in the semantic line or relevant/effective to use one instead of the other?

They are not the same. With

Code:

body {
    margin: 0;
    text-indent: 0;
    padding: 0;
}

only the "body box" will have those properties but with

Code:

* {
    margin: 0;
    text-indent: 0;
    padding: 0;
}

all selectors (p, div, blockquote, h1, h2, etc, etc.) will have margin:0, padding:0 and text indent:0. With the first option, for example if you don't define styles for the h1 tag, <h1> will have default values (that is, will have margins different from 0) but with the second option, <h1> wil have null margins, padding and indent. In short: with the second option, you'll set as default margin:0; padding:0 and text-indent:0 for all selectors and you'll be forced to establish values for them (if you want others values for those properties).

None of those options is wrong, to use one or the other will depend of what you want to do

Regards
Rubén

Jellby · 11-01-2015, 12:45 PM

Applying margin:0 to * will have the possibly undesired effect of removing the default margins for <blockquote>. If you are manually setting the blockquote margins, it doesn't matter.

As for the extra <div>, it's probably a (dirty) trick to allow having naked inline elements (<span>, <img>...) out of <p>s, since this is not valid in XHTML:

Code:

<body>
<p>Some text</p>
<span id="pg_2"/> <!-- span cannot a direct child to body -->
<p>Some text</p>
</body>

but this is OK:

Code:

<body>
<div>
<p>Some text</p>
<span id="pg_2"/>
<p>Some text</p>
</div>
</body>

Arios · 11-01-2015, 02:18 PM

Hi Rubén,

Thanks for your fast reply!

I use these codes (* {...}) for a while so I know their purpose as well as their effects in (x)html files. My main question was rather: which one is better to use (¿Qué notacion es el mejor, en * {... o <body>?). Of course, if it matters for something (semantic or whatever)!

Thanks also Jellby for the clarification about the empty <div> and naked inline elements.

My rationale behind the use of these codes, is to set all things clean (general) and after that, I can set up all specific classes (<p>, <hr />, or <blockquote>, etc.) at my liking.

In truth I want to be more logical in creating my CSS and to do so, I tend to proceed from general to specific, putting emphasis on the semantic use of codes.

DaleDe · 11-01-2015, 08:50 PM

I think it is clearer to place the defaults in the body. It makes it clear what they are for.

Dale

Arios · 11-02-2015, 10:54 AM

Thanks for your advice DaleDe,

I would have bet that "* {" is something directly related to CSS and <body> to (x)html files (something like <body dir="ltr", etc.>.

But, as noticed by Rubén both options work properly, which does not help to choose the best (semantic) one!

Turtle91 · 11-02-2015, 10:59 AM

I've heard many times to "keep structure in the html, styling in the css". So, if it is purely for default margin/padding/indent that sounds like styling and should go in the css.

Arios · 11-02-2015, 11:38 AM

Very good point Turtle91!

DaleDe · 11-02-2015, 11:43 AM

Quote:

Originally Posted by Turtle91

I've heard many times to "keep structure in the html, styling in the css". So, if it is purely for default margin/padding/indent that sounds like styling and should go in the css.

Yes but body styling can also be placed in the CSS.

Dale

Jellby · 11-02-2015, 01:06 PM

"Semantic" means "meaningful". So the most semantic depends on what you mean.

Set the style for <body>? Then "body { ... }"

Set the default style for any tag? Then "* { ... }"

The first would have the side effect of also setting the style of anything that inherits from <body>. If your intent is taking advantage of this, then maybe you actually mean the second. If your intent is setting a "clean slate" for every possible tag, then you mean the second.

Arios · 11-03-2015, 10:15 AM

Thanks Jellby for your advise,

Presently, I think I am on a "semantical trip" so to say! But it's probably more precise to talk about a relevant/effective/logical way to process. I'll study more attentively the CSS cascading mechanism.

PS There are 2 "second" in your reply. Do you mean the first ("Set the style for <body>") and "then you mean the second"?

11-01-2015, 10:52 AM	#1
Arios A curiosus lector! Posts: 463 Karma: 2015140 Join Date: Jun 2012 Device: Sony PRS-T1, Kobo Touch	*In CSS, or body?** Hi guys, Just by curiosity: in CSS is it better to use, for example: Code: * { margin: 0; text-indent: 0; padding: 0; } or put it in the the <body>: Code: body { margin: 0; text-indent: 0; padding: 0; } I mean, is it more in the semantic line or relevant/effective to use one instead of the other? Incidentally what is the purpose of using, in an epub chapter, an empty <div>? A trick for some eReaders? You know, something like that: Code: <body> <div> <h1>Title</h1> <p>blaba...</p> </div> </body>

11-01-2015, 12:45 PM	#3
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Applying margin:0 to * will have the possibly undesired effect of removing the default margins for <blockquote>. If you are manually setting the blockquote margins, it doesn't matter. As for the extra <div>, it's probably a (dirty) trick to allow having naked inline elements (<span>, <img>...) out of <p>s, since this is not valid in XHTML: Code: <body> <p>Some text</p> <span id="pg_2"/> <!-- span cannot a direct child to body --> <p>Some text</p> </body> but this is OK: Code: <body> <div> <p>Some text</p> <span id="pg_2"/> <p>Some text</p> </div> </body>

11-01-2015, 02:18 PM	#4
Arios A curiosus lector! Posts: 463 Karma: 2015140 Join Date: Jun 2012 Device: Sony PRS-T1, Kobo Touch	Hi Rubén, Thanks for your fast reply! I use these codes (* {...}) for a while so I know their purpose as well as their effects in (x)html files. My main question was rather: which one is better to use (¿Qué notacion es el mejor, en * {... o <body>?). Of course, if it matters for something (semantic or whatever)! Thanks also Jellby for the clarification about the empty <div> and naked inline elements. My rationale behind the use of these codes, is to set all things clean (general) and after that, I can set up all specific classes (<p>, <hr />, or <blockquote>, etc.) at my liking. In truth I want to be more logical in creating my CSS and to do so, I tend to proceed from general to specific, putting emphasis on the semantic use of codes. Last edited by Arios; 11-01-2015 at 03:22 PM.

11-03-2015, 10:15 AM	#11
Arios A curiosus lector! Posts: 463 Karma: 2015140 Join Date: Jun 2012 Device: Sony PRS-T1, Kobo Touch	Thanks Jellby for your advise, Presently, I think I am on a "semantical trip" so to say! But it's probably more precise to talk about a relevant/effective/logical way to process. I'll study more attentively the CSS cascading mechanism. PS There are 2 "second" in your reply. Do you mean the first ("Set the style for <body>") and "then you mean the second"? Last edited by Arios; 11-03-2015 at 02:23 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS <body> vs. <p> question	Amalthia	Conversion	7	01-21-2014 01:50 AM
force an addition to main body css ?	cybmole	Conversion	5	01-17-2014 02:35 AM
Adding body style to Extra CSS does nothing	Barty	Conversion	7	10-23-2013 11:06 PM
How to change the font-size in the body tag in css?	naisren	Conversion	2	10-01-2012 05:52 PM
css pseudo elements and adjacent combinators in extra css?	ldolse	Calibre	2	12-21-2010 05:09 PM

11-01-2015, 08:50 PM	#5
DaleDe Grand Sorcerer Posts: 11,470 Karma: 13095790 Join Date: Aug 2007 Location: Grass Valley, CA Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7	I think it is clearer to place the defaults in the body. It makes it clear what they are for. Dale

11-02-2015, 10:54 AM	#6
Arios A curiosus lector! Posts: 463 Karma: 2015140 Join Date: Jun 2012 Device: Sony PRS-T1, Kobo Touch	Thanks for your advice DaleDe, I would have bet that "* {" is something directly related to CSS and <body> to (x)html files (something like <body dir="ltr", etc.>. But, as noticed by Rubén both options work properly, which does not help to choose the best (semantic) one!

11-02-2015, 10:59 AM	#7
Turtle91 A Hairy Wizard Posts: 3,094 Karma: 18727053 Join Date: Dec 2012 Location: Charleston, SC today Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire	I've heard many times to "keep structure in the html, styling in the css". So, if it is purely for default margin/padding/indent that sounds like styling and should go in the css.

11-02-2015, 11:38 AM	#8
Arios A curiosus lector! Posts: 463 Karma: 2015140 Join Date: Jun 2012 Device: Sony PRS-T1, Kobo Touch	Very good point Turtle91!

11-02-2015, 01:06 PM	#10
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	"Semantic" means "meaningful". So the most semantic depends on what you mean. Set the style for <body>? Then "body { ... }" Set the default style for any tag? Then "* { ... }" The first would have the side effect of also setting the style of anything that inherits from <body>. If your intent is taking advantage of this, then maybe you actually mean the second. If your intent is setting a "clean slate" for every possible tag, then you mean the second.

Advert

Advert