#reset css

[Học CSS] Reset CSS là gì và vì sao nên reset CSS

Bạn học HTML thì chắc cũng thừa biết là mặc định trình duyệt đã tự mặc định hiển thị một số thẻ HTML thành một đoạn văn bản đã được markup đầy đủ, ngoài ra thì nó cũng mặc định thêm một số quy tắc trên trang tài liệu web HTML như có chứa padding, margin,…và một cái quan trọng là mỗi loại trình duyệt đều có những quy tắc riêng nên việc hiển thị mặc định sẽ không giống nhau.

Do vậy khi viết CSS cho…

CSS tips and tricks

People often depended a lot on developers and programmers to update an website in the past even for a minor problem. But now-a-days each and every people can extract away from the codes independently because of CSS and its flexibility. Anybody can easily change the style of a website if he has some basic knowledge or understanding of CSS.

To open up a new website or tweaking a blog’s look with…

A CSS reset file is a set of rules for CSS that resets the styling of an HTML document so that it can be read across different Web browsers. The effect it has on an HTML file is that it strips out all of the browsers’ default styling, leaving a plain document. You are then free to add in your own CSS styling without fear of conflicts with a browser’s default styles.

What is Reset CSS?

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules thatresets 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.

Reset CSS Code:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { top: 0; left: 0; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

 display: block;

}

body {

 line-height: 1;

}

ol, ul {

 list-style: none;

}

blockquote, q {

 quotes: none;

}

blockquote:before, blockquote:after, q:before, q:after {

 content:''; content: none;

}

table {

 border-collapse:collapse; border-spacing:0;

}

References:

http://www.cssreset.com/what-is-a-css-reset/

This is the one of the tools for cross browsing in terms on web designing.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }