What is reset css

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?

Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser. (NB: article coming soon about why this is a false notion!)
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.

Why Use A CSS Reset?

You might wonder what this is all for – well, it’s simple. From the consistent base that you’ve set up via your reset, you can then go on to re-style your document, safe in the knowledge that the browsers’ differences in their default rendering of HTML can’t touch you!

CSS Reset Issues

Some people claim that this is unnecessary – that there’s no sense resetting an element’s style, only to un-reset it afterwards. If you did a close up on one element, with a CSS Reset and then further styling, the issue becomes clear:

/* CSS Reset */
#element { margin:0; padding:0; font-size:100%; line-height:1; }
 
...
/* #element rules: */
#element { margin:5px 0 10px; font-size:13px; line-height:1.5; }

In many ways, they’re right – it duplicates effort and processing time, when a single declaration would have sufficed – many developers and designers feel that this violates the ‘DRY’ (Don’t Repeat Yourself) principle.

What is the difference between inline and block HTML elements

HTML displays its elements in one of three ways:

• Inline: These elements do not force new lines before or after its placement, and it only consumes as much space as necessary.
• Block: New lines appear before and after the element with it consuming the full width available.
• Hidden: There are some elements that never display within the browser window, such as meta tags and script and style sections.

Block-level element :

• Block-level elements usually begin on a new line.
• Block-level elements can contain inline elements and other block-level elements.

<div style="border: 1px red solid;">Block-level element</div>
<div style="border: 1px green solid;">Block-level element</div>
<div style="border: 1px blue solid;">Block-level element</div>

• If no width is set, will expand naturally to fill its parent container
• Can have margins and/or padding
• If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned)
• By default, will be placed below previous elements in the markup (assuming no floats or positioning on surrounding elements)
• Ignores the vertical-align property

Examples of Block Elements:

<p>, <div>, <form>, <header>, <nav>, <ul>, <li>, and <h1>.

Inline element:

• Inline elements do not usually begin on a new line.
• Inline elements can contain text and other inline elements.
  (Block-level elements cannot be contained in inline elements.)

<p>
<span style="border: 1px red solid;">Inline element</span>
<span style="border: 1px green solid;">Inline element</span>
<span style="border: 1px blue solid;">Inline element</span>
</p>

• Flows along with text content, thus
• Will not clear previous content to drop to the next line like block elements
• Is subject to white-space settings in CSS
• Will ignore top and bottom margin settings, but will apply left and right margins, and any padding
• Will ignore the width and height properties
• If floated left or right, will automatically become a block-level element, subject to all block characteristics
• Is subject to the vertical-align property

 Examples of Inline Elements:
<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.
 

What is the difference between visibility:hidden and display:none?

display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.