CSS Reset

-


Halo teman-teman kali ini saya akan membawakan materi CSS Reset adalah kumpulan aturan CSS yang digunakan untuk menghapus pemformatan default elemen HTML browser, menghilangkan potensi inkonsistensi antara browser yang berbeda. Mudahnya adalah Seperangkat aturan dalam menuliskan perintah CSS yang tujuannya adalah untuk me-reset atau mengatur semua elemen HTML agar tampil seragam di berbagai web borwser. Dengan CSS Reset, kalian dapat mengatur desain web agar tampak seragam di berbagai web browser. Tentunya untuk mengurangi beragam masalah yang ditimbulkan oleh web browser nantinya. 

“Jika Anda tidak menentukan semua parameter default CSS di style sheet Anda, browser akan menggunakan parameter defaultnya,” kata Rand-Hendriksen di blognya. “Dan karena browser yang berbeda memiliki parameter yang berbeda, situs Anda pada akhirnya akan terlihat berbeda tergantung pada browser apa yang Anda gunakan.”

Pertama buat html sederhana seperti ini.
<body>

    <div></div>
    <h1>Hello Warga Bumi</h1>
    <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores,
        in quo eius deserunt tenetur sed, culpa minus maxime temporibus ipsa cum
        voluptate laudantium. Laudantium corrupti soluta numquam. Deserunt, neque culpa?
    </p>
</body>

Lalu beri style 

div {
    width: 300px;
    height: 300px;
    background-color: red;
}

Jadi pada elemen html sudah memiliki magin dan padding default, walaupun kalian buat margin dengan nilai 0 maka tidak akan terjadi apa-apa.

Lalu kalian tambahkan apa saja yang ingin diberi margin 0 

body,h1,p {
    margin: 0;
}

 Maka elemen yang telah diinput akan berpengaruh terhadap margin

Elemen ini adalah elemen universal, jadi seluruh html yang ingin diberi nilai akan menjadi 0 walapun elemen yang tidak digunakan.

*{
    margin: 0;
}

Hasil yang akan ditampilkan akan sama seperti kita menggunakan metode sebelumnya, bedanya menggnakan metode ini maka keseluruhan html akan bernilai 0 

 Kalian hanya kunjungi web site https://meyerweb.com/eric/tools/css/reset/ lalu kalian copy paste

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;
}

Ini adalah hasilnya, lihat bahwa semua elemen yang dicantumkan CSS akan menjadi 0 atau benar-benar default. 




Komentar

Posting Komentar

Postingan populer dari blog ini

Filter

-
Gambar
 Filter CSS adalah untuk melakukan berbagai efek terhadap suatu elemen biasanya gambar, efek yang bisa dilakukan properti filter misalnya: saturasi warna, brightness, contrast, efek blur, grayscale, sepia, drop-shadow, invert, hue-rotate, opacity. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         img {         filter : brightness ( 300 % ) ;        }         /* Filter             brightness(angka%)             constrast(angka%)             blur(angka px)             saturate(angka%)             grayscale(angka%)             sepia(angka%)             hue-rotate(angka deg)             invert(angka%)             opacity(angka%)             drop-shadow(angka%)             */     </ style > </ head > < body >     < im
Baca selengkapnya

Percabangan Python

-
Gambar
 Hallo balik lagi nih diblog saya setelah sekian lama saya tidak membuat blog. kali ini saya akan membahas tentang Percabangan adalah cara yang digunakan untuk mengambil keputusan apabila di dalam program dihadapkan pada kondisi tertentu, jumlah kondisinya bisa satu, dua atau lebih. percabangan mengevaluasi kondisi atau ekspresi yang hasilnya benar atau salah. Kondisi tersebut disebut ekspresi boolean. Hasil dari pengecekan kondisi adalah True atau False. Bila benar (True), maka pernyataan yang ada di dalam blok kondisi tersebut akan dieksekusi. Bila (False), maka blok pernyataan lain yang dieksekusi. Di Python ada 3 jenis pernyataan yang digunakan untuk percabangan, yaitu sebagai berikut: No Pernyataaan Deskripsi 1. if Pernyataan if terdiri dari ekspresi Boolean diikuti oleh satu baris atau lebih pernyataan 2. If…else Bila pernyataan if benar, maka blok pernyataan if dieksekusi. Bila salah, mak
Baca selengkapnya

Transition

-
Gambar
CSS Transition atau Transisi adalah Efek Transis yang memungkinkan sebuah elemen secara bertahap berubah dari satu gaya ke yang lain. <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Document</ title >     < style >         .kotak {         width : 100 px ;         height : 100 px ;         background-color : red ;         transition : 1 s ;        }         .container {         height : 400 px ;         width : 100 px ;         border : 0.1 px solid black ;        }         .container:hover .kotak {         transform : rotate ( 180 deg );         margin-top : 300 px ;         background-color : yellow ;        }     </ style > </ head > < body >     < div class = "container" >         < div class = "kotak" ></ div
Baca selengkapnya