When I declare some base styles for my site I have used to do that on the body tag. Like for example
body {
font-size: medium;
line-height: 1.3em;
}
But I have also seen people do things like that on the html tag. And on both. Where should it be done? Should some be at one and some at the other? Should all be on one of them? Or does it simply not matter at all? Or?
I like applying base declarations to html. Most of the time, I use body as a container, like so:
html {
/* Base styles go here */
font: 14px/1.5 Arial, sans-serif;
background: darkgreen;
}
body {
background: lightgreen;
padding: 0 20px;
width: 920px;
margin: 0 auto;
}
View the demo: http://jsbin.com/atiso3
Most people tend to use additional DIVs just to accomplish this basic behavior. It’s not necessary when you know how to use html and body in CSS ;)
I'd add styling on the body tag as it makes more semantic sense (you're not going to style the head, title and so on).
Also I don't see a lot of people adding styles directly on the html tag anymore except to reset some default styles...
For the strict doctype, only body is necessary. However if the browser is in quirks mode, you'll very likely need to target table cells as well.
In both cases you may want to also target form elements, since they generally inherit the platform default.
html is the container for body, so the latter will inherit from the former. Be careful when mixing:
html, body { font-size: 80%; } will make your body's font size to be 80% of 80%.
I always go for html, but there is an issue with ancient browser support and/or quirks mode.
From my personal experience, the only situation where putting certain base styles on both html and body is necessary is when you're doing some funky hacks that rely on 100% width or height ("sticky" divs or some such). In all other situations, it is perfectly OK to declare the base styles only on body. In other words,
html, body {height:100%}
might actually be necessary, but
html, body {font-family:Arial}
certainly won't. After all, all the elements on which you'll need the font-family will be children of body anyway, so there's no point in specifying it for html, too.
I would either set to body itself. I tend to do that or a use a base div style, depends on what I'm doing, but putting it on the html object seems unintuitive.
Related
When we are creating a web page using bootstrap we can set margins. But web browser also gets some margins. Although code as div(class="container-fluid") or code as margin:0; and padding:0; based on the container in the CSS file, I couldn't solve the problem. Can you help me?
Some browsers have a margin on the body tag. Set that to 0 somewhere in your css.
body {
margin: 0;
}
This is Browser default margin for body:
Fix It Like this:
body {
margin:0;
}
Set the margin to zero on any element is simple just type something like
body{
margin:0
}
Although sometimes bootstrap has his own margin rules included like setting margin on h tags, you could remove them as well by using more specific rules (read about specificity here) or by using important
h4{
margin: 0 !important
}
The reason for that is browsers have default styling for elements.
To reset margin only on body element you can use:
body {
margin: 0;
}
To reset all styling (which is not so-bad thing) in all browsers you can use css library called normalize.css.
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
This library is used by big companies as GitHub, Twitter, Soundcloud, Guardian, Medium and many others.
Although you put container-fluid, sometimes it doesn't make the width 100% fit the screen because browsers make a default margin and padding.To make it fit the screen you have to do like this.
body{
padding: 0;
margin: 0;
}
If it doesn't work make them important as following.
body{
padding: 0 !important;
margin: 0 !important;
}
Please take a look at my site: http://burnett.inigowebdesign.co.uk/local_area
I am using Twitter bootstrap CSS (with HTML5 Boilerplate), Modernizr, and Google fonts using #font-face.
I am using modernizr to test for a browser's support of fontface- it not supported, I need to change the font-size (otherwise it will be far too large)
I am testing the site for compatibility and have noticed in IE8 (and early versions of Safari & Opera) my rules for font-size are being ignored. In particular, the h3 elements in the main list (that you can see on the left in the green box) don't seem to respond to any CSS I apply to them. I am using Firebug to inspect the rules, and can't find any possible conflicts. It even ignores !important. In fact, the only way I can style them at all is to use inline CSS.
What is going on??
The text is differ due to different font-size define in each css file.
In normalize.css h3 have 1.17em font size and in fontface.css font size define 50px . It might be possible the browser rendering the file in some different orders.
normalize.css file using this property.
h3 {
font-size: 1.17em;
margin: 1em 0;
}
fontface.css file using this property.
h3 {
font-size: 50px;
/* letter-spacing: normal;
font-weight: normal;*/
line-height: 36px;
}
I have some CSS for a Wordpress blog. I want paragraphs to indent, but blocks of code to align left to the margin. This is the code that I have---all of these elements appear with a <div class="postContent" tag, and Wordpress automatically wraps post text blocks in <p> tags.
First, I've set all paragraphs within the div tags to indent:
.postContent p {
font-size: 1.2em;
text-indent: 2.5em;
text-align: justify;
line-height: 1.6em;
margin: 1em;
}
Then, Wordpress sets aside the first paragraph as a .lead paragraph. I want that to indent, provided it's not code:
.postContent p.lead code {
margin: 0;
text-indent: 0;
}
That works just fine. However, all the other code paragraphs are still indenting, so I added this to the stylesheet:
.postContent p code {
text-indent: 0;
padding: 0;
padding-top: 2em;
padding-bottom: 2em;
}
No dice. The code blocks are still indenting according to the .postContent p rule.
Setting text-indent on a code element inside a p element does not affect the indentation of the p element. It does not affect anything, really, since text-indent applies to block containers only.
If the markup is <p><code>...</code></p> so that the p contains nothing but the code, you can add
.postContent p code { display: block; }
and then consider what to do with vertical spacing, which may be a bit excessive after the addition (namely margins of p plus padding of code).
It's really hard to say without seeing both the source for the html and the actual css code, but I'm guessing your styles are being overridden by a more specific style.
The best thing for you to do is install Firebug in Firefox (really, the best development tools for a browser, IMHO) and inspect the targeted elements. The inspector should display all the styles being applied to the element. The overridden styles will have a strikethrough it. If you see they are being overridden, make your styles more specific. Otherwise, if you don't see your style listed, then you're not correctly targeting it.
Hope that helps. Good luck.
I am starting a new project, so i thought to start using Reset.css in my projects. i got the concept of using Reset.css, but one thing is bothering me is that does if affects my other style applied on the same element.. like in reset.css div have 0 margin and 0 padding... and if i apply margin to some of the divs in my stylesheet, wont it get disturbed?
Please clear my this doubt
Not if the style applied to your other divs is more SPECIFIC.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
In general any style applied using a class, or an id in the selector is going to take precedence over one which doesn't. But there are many other rules in this area you should become aware of.
i.e.
div.myStyle {...}
will always overrule
div {...}
You have to include reset.css first and then include your own stylesheet file. and be sure that your styles wont be overwritten by reset.php.
What you neeed to do is load reset.css as a first style sheet.
Anything else loaded after it will be overriding reset.css
e.g if you specify in reset css: p { margin: 0px; padding: 0px}
and than load style.css with style: p {margin: 2px; padding: 2px}
The style load as last one will be used.
I personaly use technic with
* { margin: 0px; padding: 0px; border: 0px; outline: none; list-style: none;}
Put it at the top of css file and job done:) No need for extra .css fil.
Starting with:
html, body
{
padding: 0;
width: 100%;
font: 100%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
}
Chrome decides that the width should be 1600px, which is wider than my current display, let alone the current Chrome window. I'm sure this is an old chestnut, but I'm failing to find the right tree.
I posted a complete example to git://github.com/bimargulies/css-mystery.git.
One note: My macbook was plugged into a very wide monitor, and is now not. The 1600px seems to me to be related to that, but I don't know how to make it go away except to reboot.
In the chrome devo tools, looking at the effective styles for the , I see:
width: 1600px;
html, body - 100%
That 1600 is very mysterious. And this is after a reboot.
EDIT bingo: buried in the style sheet main.css, from someone else I work 'with', was 'minWidth: 100em;' on body. oops.
You need to add margin: 0 to remove the default margin on the body element.
Are you sure you need width: 100%?
html and body are by default "full width" due to being block-level elements.
Try using a CSS reset...
http://meyerweb.com/eric/tools/css/reset/index.html
... to set all CSS properties to their default values.
I hope this helps.
Hristo
For the record, I think it's best to actually have the explanation in an answer.
There was another CSS clause way down the file:
body
{
minWidth: 100em;
}
I didn't spot it, and the Chrome 'Computed Styles' box does not include this in the 'explanation' of the 1600px in the same way that it include width styles.
I had same issue. could be other div in body is having padding or margin.
margin or padding can cause it.
in my case, was padding