An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Some of Our Sources
- TutsPlus - Code
- Web Designer Wall
- Just Creative
- The Logo Smith
- Noupe
- Crazy Leaf Design
- Fudge Graphics
- Line 25
- Wal You
- Web Resource Source
Help Webnuz
Referal links:
CSS Reset
Hey fellow creators
A CSS reset is a nice way to start from a blank canvas in HTML/CSS and in web development in general, because some HTML elements have default values to their properties.
If you prefer to watch the video version, it's right here :
1. The short reset I use in most of my videos and tutorials.
Heres the code you can add to your CSS style that will remove all of the margin and padding:
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0;}It will also take into account the padding and the borders when calculating the height and the width of an element thanks to the "border-box" value.
2. But theres another option!
If you want a more complete CSS reset, you can simply google Reset CSS and youll find the famous "mayer CSS reset" : https://meyerweb.com/eric/tools/css/reset/
It's a very popular way to reset the value of a lot of property when starting a new project.
Here it is :
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;}
This will allow you to have a nice and clean canvas to work from!
There are a lot of different CSS resets and you can literraly build your own if you have some preferences.
Come and take a look at my Youtube channel: https://www.youtube.com/c/Learntocreate/videos
See you soon!
Enzo.
Original Link: https://dev.to/ziratsu/css-reset-58h9
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To