3 Teknik CSS Reset
3 Teknik CSS Reset – CSS Reset adalah sebuah teknik untuk mengatur nilai default dari setiap elemen HTML yang akan di tampilkan pada halaman browser terutama untuk property css margin dan padding.
Pada dasarnya setiap elemen HTML memiliki nilai default untuk property padding dan margin. Seperti body, p, h1, h2, ul, li dan lain sebagainya. karena itu sebelum kita membuat sebuah halaman website, ada baiknya kita melakukan reset terlebih dahulu pada halaman HTML kita. Reset CSS ini berfungsi juga agar kita memiliki kendali penuh pada halaman website yang akan kita kerjakan atau akan kita berikan modifikasi style.
Sintak HTML sebelum diberikan style CSS Reset:
<head>
<meta charset="UTF-8">
<title>Reset CSS</title>
<style>
div {
width: 300px;
height: 300px;
background-color: salmon;
}
</style>
</head>
<body>
<div></div>
<h1>Reset CSS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam quas, natus quasi recusandae adipisci molestias laudantium ea consectetur autem vero tenetur possimus sed doloremque, saepe quae eveniet. Voluptatum blanditiis laudantium et, quam, animi enim veniam quas deleniti perferendis, cupiditate natus fugiat magni magnam reiciendis hic. Ducimus, consequuntur! Rem, veritatis. Temporibus nihil dolore mollitia dicta possimus nam obcaecati cumque commodi voluptas sequi, consequuntur aspernatur cum porro vel aliquid dignissimos pariatur, maxime voluptatibus sit dolorum quidem soluta? Tempore fugit libero, eveniet harum unde quas consequuntur, accusamus hic error officia ut repellendus nesciunt tenetur voluptatibus facilis culpa eum quaerat, cumque in quibusdam!</p>
</body>
</html>
Sintak HTML setelah diberikan style CSS Reset
<head>
<title>Reset CSS</title>
<style>
body, h1, p {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: salmon;
}
</style>
</head>
<body>
<div>
</div>
<h1>
Reset CSS</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam quas, natus quasi recusandae adipisci molestias laudantium ea consectetur autem vero tenetur possimus sed doloremque, saepe quae eveniet. Voluptatum blanditiis laudantium et, quam, animi enim veniam quas deleniti perferendis, cupiditate natus fugiat magni magnam reiciendis hic. Ducimus, consequuntur! Rem, veritatis. Temporibus nihil dolore mollitia dicta possimus nam obcaecati cumque commodi voluptas sequi, consequuntur aspernatur cum porro vel aliquid dignissimos pariatur, maxime voluptatibus sit dolorum quidem soluta? Tempore fugit libero, eveniet harum unde quas consequuntur, accusamus hic error officia ut repellendus nesciunt tenetur voluptatibus facilis culpa eum quaerat, cumque in quibusdam!</body> |
| Contoh : Penggunaan CSS Reset |
Contoh diatas menunjukan bahwa body memiliki nilai default padding dan margin, karena itu letak kotak yang dibuat dan tampil di halaman browser tersebut, tidak melekat pada bagian paling atas dan bagian paling kiri browser. Perhatikan, ada sedikit jarak pinggir dibagian atas kotak, dan sebelah kiri kotak dengan halaman browser. Karena hal tersebut, kita perlu melakukan reset atas nilai default property margin dan padding dari body tersebut. perhatikan gambar dibawahnya, setelah body, h1, dan p diberikan CSS Reset, sekarang nilai default dari padding dan marginnya sudah hilang, karena itu letak mereka menjadi padding dan margin =0.
Untuk melakukan teknik reset ini, kita bisa menggunakan 3 teknik :
1. Reset CSS bisa dilakukan dengan melakukan Reset masing-masing elemen HTML. Namun dengan menggunakan cara ini, sangat tidak praktis, ketika kita menggunakan banyak elemen HTML pada halaman website yang kita buat. dan pastinya hal tersebut sangat merepotkan dan tidak efisien. Untuk contoh reset CSS per-elemen HTML silakan lihat contoh di atas.
2. Reset CSS bisa menggunakan selector universal ( * ). Namun dengan menggunakan teknik ini sangat berat, karena kekurangannya selector universal ( * ) tersebut, memberi margin dan padding ke semua elemen html meskipun yang tidak kita gunakan. Lihat contoh sintak dibawah ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reset CSS</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: salmon;
}
</style>
</head>
<body>
<div></div>
<h1>Reset CSS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam quas, natus quasi recusandae adipisci molestias laudantium ea consectetur autem vero tenetur possimus sed doloremque, saepe quae eveniet. </p>
</body>
</html>
3. Reset CSS dengan menggunakan teknik seorang engineering yang bernama Erick Meyer. Sintak Reset CSS ini lebih praktis dan efisien dibanding dengan teknik sebelumnya. Untuk link sintak ini, silakan kunjungi Meyer Web di https://meyerweb.com/eric/tools/css/reset/
/* 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;
}
Post a Comment for "3 Teknik CSS Reset"
Silakan berkomentar secara bijak dan sesuai dengan topik pembahasan