I know that ol and ul elements have default padding set on almost all browsers. Apparently h{#} tags do too on some browsers.
How do I get a list of all elements?
I could simply do * { margin: 0; padding: 0; } (which is my desired result), but that's simply bad.
The W3C has a (informative, not normative) default stylesheet for HTML 4 here:
http://www.w3.org/TR/CSS2/sample.html
where you can see that no elements have padding, but body, h1..h6, p, fieldset, form, ul, ol, dl, dir, menu, blockquote and dd have a margin by default.
This is a somewhat solved problem. You have two options:
A 'reset' stylesheet, one that removes all special styling (like padding and margin) from (almost all) elements, so you can start 'fresh'. You'll need to redefine things like font-weight for <b>old and <strong>. Reset.css is a popular choice.
A stylesheet that sets sensible defaults. This would, for example, remove paddings and margins, but then add them again so that browsers are consistent with each other. The stylesheet included in the HTML5 Boilerplate can be stripped or used as-is for your purposes.
You can also use the above two stylesheets as a guide on what elements might have margins and paddings in different user agents and roll your own. In my opinion, setting sensible defaults (the second option) is better, since you might forget things like :focus styles with a plain 'reset stylesheet'.
You can use a simple CSS reset, a list of all resets: http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/
And you can get a look into a Useragent Stylesheet: http://meiert.com/en/blog/20070922/user-agent-style-sheets/
But there are very much elements with padding/margin:
body
blockquote
dd
p
ect.
Related
hello am having different h1 sizes on different browsers, how can i fix this please
h1 text on chrome h1 text on chrome
h1 text on firefox
h1 text on firefox
You will need to use CSS to set the font-size so all browsers will use that value instead of their own defaults.
h1 {
font-size: 2rem;
}
There may be other properties that you need to reset to get consistent, cross-browser results.
Many sites will employ a third party reset CSS like normalize.css or write their own defaults.
h1 tag is just pure html, so it is just semantic. HTML, as semantic, doesn't apply any styling. Browsers will always try to render "h" tags in a way that you can understand which ones are the most relevant, comparing it to the others. H1 will be bigger than h2 in every browser, but that doesn't mean they will appear exactly with the same sizes.
You need to apply your CSS to achieve the behaviour you want. Just keep in mind that html is only semantic, not styles :) usually we can insert a normalize or reset CSS code to our stylesheets, so that it resets browsers called user agent stylesheets. try to use a font-size property with the correct value on it. Good work!
Sometimes I see designers using display: block for block level elements? For instance I saw people using display:block on elements that are already block level elements like ul, li and headers like h1, h2, h3 and so on.
If browsers already treats those elements as block level elements why do I have to use display block on them ?
thanks in advance
Most browsers recognize h1, h2, ul correctely (they were always included in HTML) but for newer HTML5 elements like header, footer and main and canvas it's a good practice. Because older browsers didn't recognize them, but if you did declare them as block element they will display them properly.
For instance IE8 wouldn't recognize footer and would display the footer as inline element (on most sites that would cause a mess). (http://caniuse.com/#search=footer)
This code block is from normalize.css a often used CSS stylesheet to "normalize" the display of elements across browsers:
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
The comments are pointing out why they are applying display: block.
In some cases, display: block may be used to set properties previously changed in CSS. For instance if a plugin wants to make sure its headings are displayed as block, it sets h1, h2... to display: block, because maybe the site it's included in has set h1 to inline.
That's done to help older browsers properly display modern HTML. In the case of ul, li, h1 etc. tags that have been around since HTML 1.0, it's overkill. display: block is usually done so that modern HTML tags, i.e. HTML 5, that are new such as canvas, article etc. can be displayed by older, or non-standards browsers.
Is there a way to use the (<p></p>) tags without the extra space on the lines before and after the phrase? I'm using them on wordpress.com.
I'm trying to add a background color to some lines but they need to be in <p></p> tags so an extra space is not created between the lines.
Is there a non CSS solution? I can't modify the the CSS at the moment.
Try this:
p{
margin:0;
padding:0;
}
There is no way to remove the padding & margin on p elements without the usage of css.
The easiest way to override the fact that you cant add a class or change it in a css file is to add it directly to the p element. This is not valid HTML5 though and should be avoided as much as possible.
Try this out:
<p style="margin: 0;">Text</p>
You can add other styling elements within the style tag too. Things like background colors, padding, etc.
Just remember to avoid using this way it when possible.
In order to remove the default margins you can use:
p {
margin:0;
}
However for future reference you may want to use a styles reset to prevent the default margins and paddings from being added. Then you can specify how much of a margin and padding to use. Here's a commmonly used style reset:
http://meyerweb.com/eric/tools/css/reset/
If you want to do it without CSS, then you can do it in jQuery or JavaScript
jQuery
$('p').css('margin','0');
or
JavaScript
document.getElementsByTagName('p').style.margin = '0';
You can do it either way.
I am currently restyling a website, but part of the site takes a string from the CMS and puts it into a description area. The description often has its on HTML, such as bullet points.
The problem is the designs we received also use bullet points to style certain aspects, which make everything within this description area styled entirely incorrectly (tiny width for ULs, background applied to H2, etc).
Is there any kind of tag that will reset the styling of everything within it?
Thanks in advance.
Edit: I've gone for this solution, which works when I apply the class 'CMSReset'. It resets the main offenders, thanks for the help:
div.CMSReset, div.CMSReset *
{
margin:0pt !important;
padding:0pt !important;
vertical-align:baseline !important;
width:auto !important;
background:none;
color:inherit;
}
short and simple: no, you'll have to reset the stylings taht need to be reseted on your own.
a workaround would be to use an iframe wich would prevent the inner content against inherited styles, but that solution is even worse in my opinion.
this other topics might also be interesting for you:
reset multiple css styles for one single div element
how to not inherit? or how to reset inherited width to the value before? (css)
Generally, people override CSS Styles in 2 ways:
1) They define an inline style on the attribute itself so:
<div style="background-color:#FFFFFF"></div>
Would override any other style.
You can also apply a style via an id (#IdName) which will have precedence
2) They redefine the style at that level of the document. You can use the !important css modifier (but this isn't universally supported).
If you've blanket applied styles, like div or body > div then these can be difficult to override and often require restructuring, or rethinking, your styles and classes.
I want to know all the common practices in CSS, those things that you automatically put without really thinking on the Final website deisgn
Example:
body {margin:0;padding:0;}
ul {list-style:none;}
img {vertical-align:middle;border:0;}
a {text-decoration:none;}
a:hover {text-decoration:underline;}
table {border-collapse:collapse;}
td {vertical-align:top;}
Does anyone know where I can find a complete list of this kind of things?
The best thing to usually start with is a CSS reset. The one I usually use is http://meyerweb.com/eric/tools/css/reset/
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. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others.
The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.
In other words, this is a starting point, not a self-contained black box of no-touchiness.
Adding onto #Speed...
This is my favorite CSS reset to start most websites with: Eric Meyer Reset CSS.
Everyone suggests CSS resets, but they seem redundant to me.
I'd suggest Normalize.css, as it attempts to normalize CSS across browsers without getting rid of useful properties attached by default to elements like h1, h2, h3, ul, etc.
Yahoo have a nice selection: http://yuilibrary.com/yui/css/
Yahoo Reset
The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to built upon. With CSS Reset loaded, write explicit CSS your project needs.
CSS Base can complement CSS Reset by applying a style foundation for common HTML elements that is consistent for our browser baseline.
Yahoo base
CSS Base is an optional CSS file that complements YUI's core CSS foundation (CSS Reset and CSS Fonts). CSS Base applies a style foundation for HTML elements that is consistent for baseline browsers.
CSS Base may also be useful as a template for your own base file, or a snippets library for styling HTML elements.