Is this valid CSS for browser reset? What does it do? I have been using this for a long time.
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; overflow:hidden; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}
This is a version of Eric Meyer's CSS reset. You can read about it here:
http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on.
And here's a history of why and how it came to life: http://sixrevisions.com/css/the-history-of-css-resets/
Yes, it's a type of CSS reset. It basically resets all the default spacing to zero and all the default alignments to left-top, as well as resetting the font sizes and weights of all the headers. The purpose of CSS resets is to make the website look consistent across all browsers.
I don't really like extensive CSS resets, though. Here's mine:
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
table {
border-collapse: collapse;
}
It works fine.
I had a problem to use it with bootstrap wysihtml5 library.
In fact when I try to use italic o bold style, it didnt work.
To make it works I had to delete tag "i" and "b" from this file.
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;
}
All the browsers apply their own default styling to html elements. That leads to difference of views on different browsers. Is there any way to prevent browsers from doing this?
Yes you can, you need to use CSS Reset, this will generalize the styles, in other words it will reset the styles across the browsers.
Personally I don't use these, instead I use the snippet below which is more than enough for me.
* {
margin: 0;
padding: 0;
outline: 0;
}
If you want to stabilize more elements, you can make your own, like you can use the below to have pointer cursor when a user hovers any button or link on your website..Yes now that's pretty basic User Experience, than you can use
button, a, input[type=button], input[type=submit] {
cursor: pointer;
}
Or say don't underline the links and inherit the parent color, so I use
a {
text-decoration: none;
color: inherit;
}
This way you can make your own, I prefer this way.
Just a side note, when I go responsive, I change the * snippet to
* {
margin: 0;
padding: 0;
outline: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Note: Using Reset Stylesheet won't reset any inheritance, it will only
reset browser defaults(which won't help you always to make cross
browser websites) but will prevent loads of cross browsers issues commonly like padding, margin, line-height, base font etc.
You might want to look into Normalize.css. It;s used by a large number of frameworks and other reset boilerplates.
You can go for reset.css. This should be the first one to be applied to reset any browser specific style..
http://developer.yahoo.com/yui/reset/
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.
I know there's a few CSS Reset tools out there, Eric's and Yahoo's to name 2.
However, when I'm using certain tags (I think they're called tags?) such as "li" and "ul", I get some extras in the User Agent Stylesheet. Some of these are:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
I'm wondering if there's a reset stylesheet out there that deals -webkit etc?
I have searched for one, but with now luck.
While these styles are applied by Webkit, they are over-ruled by margin: 0; padding: 0; located in the CSS resets. You don't have to worry about them.
Note: Although Chrome (Version 27.0.1453.116 m) Developer Tools does not display the user agent styles with strikethrough, the computed styles do reflect that explicit margin and padding values override.
Acctually if you are working with
<ul> in your markup the
reset margin: 0, padding: 0; do not overwrite the -webkit-padding-start: 40px;
I solved the problem by adding to my reset file a
ul {
-webkit-padding-start: 0px;
}
I had the same problem with li and ul, and found the following solution: in my CSS, I had an attribute for the li of my list which was display: inline. I replaced it with float: left and it works. I don't know why...
If user agent stylesheet is being called, it is because the property that is called for / needed was not properly defined in your css stylesheet.
Error check your CSS using a tool like CSS Lint and fix any problems that might be detected before trying workarounds.
I was having this same problem with my <h3> tag. I tried setting margin:0;, but it didn't work.
I found that I was habitually commenting out lines in my css by using //. I never noticed it because it hadn't caused any problems before. But when I used // in the line before declaring <h3>, it caused the browser to skip the declaration completely. When I traded out // for /**/ I was able to adjust the margin.
Moral of this story: Always use proper commenting syntax!
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.