Reset CSS | Kita Ngoding #12

Reset CSS.- Pada bahasan kita berikut ini, kita akan sama-sama belajar tentang bagaimana mereset nilai dari CSS bawaan yang telah di sediakan dari pihak developer css itu sendiri.

Namun sebelum lanjut ke materi bahasan kita pada kesempatan kali ini, admin ingin mengucapkan banyak-banyak terimakasih kepada semua pihak yang telah mendukung blog ini, sehingga sampai sekarang ini. walaupun masih sederhana tapi admin akan terus berupaya agar blog ini dapat maju, berkembang serta menyajikan informasi yang menarik lainnya seputar teknologi.

Kenapa Kita Perlu Mereset CSS?

Pada dasarnya sebuah element pada HTML mempunyai nilai default bawaan. Baik itu margin, padding, border, font-size, font-color, tabel dan lain-lainnya mempunyai nilai bawaan yang melekat pada element itu sendiri.

Supaya lebih jelas, silahkan lihat contoh dibawah.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*Dibawah ini adalah Syntax CSS yang kita buat*/
        div {
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            margin-top: 0px;
            margin-left: 0px;
        }
    </style>
</head>
<body>
    <div>
        CSS Reset
    </div>
</body>
</html>

Dan perhatikan output yang di hasilkan.

Baca Juga : Magin Dan Padding Pada CSS

Dari gambar gambar diatas, terlihat sebuah element div yang kita buat memiliki margin di sebelah kiri dan diatas. Padahal jika kalian perhatikan syntax cssnya admin menuliskan margin-top: 0px; dan margin-left: 0px; yang seharusnya element div yang kita buat tidak memiliki jarak atas dan jarak samping kiri. Kenapa demikian? Karena itu merupakan bawaan default dari cssnya.

Mungkin saja di kemudian hari, pada saat kita akan membuat suatu website tertentu dan kita tidak ingin ada jarak seperti itu, maka kita harus mereset cssnya dengan cara sebagai berikut.

Cara Mereset CSS

Pertama – masuk ke website ini https://meyerweb.com/eric/tools/css/reset/ dan copy syntax untuk mereset css yang telah disediakan.

Baca Juga : CSS Height Dan Width / (Dimensi CSS)

Kedua – Pastekan syntax yang di copy tadi ke bagian atas dari syntax css yang kita buat sebelumnya. Hingga tampak seperti ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* http://meyerweb.com/eric/tools/css/reset/ 
        v2.0 | 20110126
        License: none (public domain)
        */
        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;
        }
        /*Dibawah ini adalah Syntax CSS yang kita buat*/
        div {
            background-color: blueviolet;
            width: 100px;
            height: 100px;
            margin-top: 0px;
            margin-left: 0px;
        }
    </style>
</head>
<body>
    <div>
        CSS Reset
    </div>
</body>
</html>

Sekarang lihatlah hasil outputnya dibawah ini :

Baca Juga : Selector Pada CSS

Sekarang margin-top dan margin-left menjadi benar-benar bernilai 0px. Begitulah Cara Menggunakan CSS Reset.

Admin rasa cukup untuk bahasan kita pada kesempatan kali ini. dan jangan lupa untuk mengjungi artikel kami yang lainnya.

Reset CSS | Kita Ngoding #12 |

Kenapa Kita Perlu Mereset CSS?

Cara Mereset CSS

0 Response to "Reset CSS | Kita Ngoding #12 |"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel