Owen Young's Blog - CSS
Mainly focus on technology, reading, excerpts, miscellaneous, article review, tool sharing, workflow, inspiration, English learning, attention management, deep work and other directions
Zola
2022-03-26T00:00:00+00:00
https://old.owenyoung.com/en/tags/css/atom.xml
Mini Reset CSS
2022-03-26T00:00:00+00:00
2022-03-26T00:00:00+00:00
Owen Young
https://old.owenyoung.com/en/blog/mini-reset-css/
<blockquote>
<p>Forked by <a rel="noopener nofollow noreferrer" target="_blank" href="https://github.com/jgthms/minireset.css/blob/master/minireset.css">https://github.com/jgthms/minireset.css/blob/master/minireset.css</a></p>
</blockquote>
<blockquote>
<p>Forked by <a rel="noopener nofollow noreferrer" target="_blank" href="https://github.com/jgthms/minireset.css/blob/master/minireset.css">https://github.com/jgthms/minireset.css/blob/master/minireset.css</a></p>
</blockquote>
<span id="continue-reading"></span><pre data-lang="css" style="background-color:#2b303b;color:#c0c5ce;" class="language-css "><code class="language-css" data-lang="css"><span style="color:#bf616a;">html </span><span>{
</span><span> font-family: "</span><span style="color:#a3be8c;">SF Pro SC</span><span>", "</span><span style="color:#a3be8c;">SF Pro Text</span><span>", "</span><span style="color:#a3be8c;">SF Pro Icons</span><span>", "</span><span style="color:#a3be8c;">PingFang SC</span><span>",
</span><span> "</span><span style="color:#a3be8c;">Helvetica Neue</span><span>", "</span><span style="color:#a3be8c;">Helvetica</span><span>", "</span><span style="color:#a3be8c;">Arial</span><span>", sans-serif;
</span><span>}
</span><span style="color:#bf616a;">body </span><span>{
</span><span> overflow-wrap: break-word;
</span><span> word-wrap: break-word;
</span><span> -ms-word-break: break-all;
</span><span> word-break: break-word;
</span><span> -ms-hyphens: auto;
</span><span> -moz-hyphens: auto;
</span><span> -webkit-hyphens: auto;
</span><span> hyphens: auto;
</span><span>}
</span><span style="color:#bf616a;">html</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">body</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">p</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">dt</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">dd</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">blockquote</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">figure</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">fieldset</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">legend</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">textarea</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">pre</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">iframe</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">hr</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">h1</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">h2</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">h3</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">h4</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">h5</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">h6 </span><span>{
</span><span> margin: </span><span style="color:#d08770;">0</span><span>;
</span><span> padding: </span><span style="color:#d08770;">0</span><span>;
</span><span>}
</span><span>
</span><span style="color:#bf616a;">h1</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">h2</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">h3</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">h4</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">h5</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">h6 </span><span>{
</span><span> font-size: </span><span style="color:#d08770;">100%</span><span>;
</span><span> font-weight: normal;
</span><span>}
</span><span>
</span><span style="color:#bf616a;">button</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">input</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">select </span><span>{
</span><span> margin: </span><span style="color:#d08770;">0</span><span>;
</span><span>}
</span><span>
</span><span style="color:#bf616a;">html </span><span>{
</span><span> box-sizing: border-box;
</span><span>}
</span><span>
</span><span style="color:#bf616a;">*</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">*</span><span style="color:#8fa1b3;">::</span><span style="color:#b48ead;">before,
</span><span style="color:#bf616a;">*</span><span style="color:#8fa1b3;">::</span><span style="color:#b48ead;">after </span><span>{
</span><span> box-sizing: inherit;
</span><span>}
</span><span>
</span><span style="color:#bf616a;">img</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">video </span><span>{
</span><span> height: auto;
</span><span> max-width: </span><span style="color:#d08770;">100%</span><span>;
</span><span>}
</span><span>
</span><span style="color:#bf616a;">iframe </span><span>{
</span><span> border: </span><span style="color:#d08770;">0</span><span>;
</span><span>}
</span><span>
</span><span style="color:#bf616a;">table </span><span>{
</span><span> border-collapse: collapse;
</span><span> border-spacing: </span><span style="color:#d08770;">0</span><span>;
</span><span>}
</span><span>
</span><span style="color:#bf616a;">td</span><span style="color:#b48ead;">,
</span><span style="color:#bf616a;">th </span><span>{
</span><span> padding: </span><span style="color:#d08770;">0</span><span>;
</span><span>}
</span></code></pre>