{"id":97,"date":"2015-08-06T19:50:41","date_gmt":"2015-08-06T18:50:41","guid":{"rendered":"https:\/\/yellowweb.id\/blog\/?p=97"},"modified":"2015-08-06T19:50:41","modified_gmt":"2015-08-06T18:50:41","slug":"reset-css-website","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/","title":{"rendered":"Reset CSS Website"},"content":{"rendered":"<p><a href=\"https:\/\/yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-99\" src=\"https:\/\/yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-1.jpg\" alt=\"css-reset-yellowweb.id (1)\" width=\"550\" height=\"300\" srcset=\"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-1.jpg 550w, https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-1-300x164.jpg 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>Tutorial kali ini kita akan mencoba menambahkan CSS Reset pada halaman website. Apa itu <a href=\"https:\/\/de.wikipedia.org\/wiki\/Reset-Stylesheet\" target=\"_blank\">CSS Reset<\/a>?<\/p>\n<p><!--more--><\/p>\n<p>CSS Reset itu perlu, ketika kita membangun sebuah website, karena pada dasarnya setiap browser seperti Mozilla, Chrome, IExplorer, dan Safari, memiliki style defaultnya sendiri.<\/p>\n<p><a href=\"https:\/\/yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\" size-full wp-image-98 aligncenter\" src=\"https:\/\/yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-2.png\" alt=\"css-reset-yellowweb.id (2)\" width=\"550\" height=\"200\" srcset=\"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-2.png 550w, https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-2-300x109.png 300w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><\/a><\/p>\n<p>Seperti css properti padding dan margin, disetiap browser berbeda hal ini akan menyulitkan seorang web design. Karena terkadang hasil yang diharapkan tidak sesuai. Lantas bagaimana agar design yang dihasilkan dapat seragam disetiap browser?<\/p>\n<p>Kita dapat mensiasatinya dengan menggunakan CSS Reset, berikut contohnya:<\/p>\n<pre class=\"lang:default decode:true\">*{\r\n   padding: 0;\r\n   margin: 0;\r\n}<\/pre>\n<p>Contoh diatas cara yang sering saya gunakan, kalian bisa menambahkan di file css yang kalian buat. Alternatif lainnya adalah dengan menggunakan CSS Reset yang sudah tersedia online, yang bisa kalian <a href=\"http:\/\/cssreset.com\/\" target=\"_blank\">download<\/a>.<\/p>\n<p>Contoh CSS Reset lainnya:<\/p>\n<pre class=\"lang:default decode:true\">\/* v2.0 | 20110126\r\n  http:\/\/meyerweb.com\/eric\/tools\/css\/reset\/ \r\n  License: none (public domain)\r\n*\/\r\nhtml, body, div, span, applet, object, iframe,\r\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\r\na, abbr, acronym, address, big, cite, code,\r\ndel, dfn, em, img, ins, kbd, q, s, samp,\r\nsmall, strike, strong, sub, sup, tt, var,\r\nb, u, i, center,\r\ndl, dt, dd, ol, ul, li,\r\nfieldset, form, label, legend,\r\ntable, caption, tbody, tfoot, thead, tr, th, td,\r\narticle, aside, canvas, details, embed, \r\nfigure, figcaption, footer, header, hgroup, \r\nmenu, nav, output, ruby, section, summary,\r\ntime, mark, audio, video {\r\n\tmargin: 0;\r\n\tpadding: 0;\r\n\tborder: 0;\r\n\tfont-size: 100%;\r\n\tfont: inherit;\r\n\tvertical-align: baseline;\r\n}\r\n\/* HTML5 display-role reset for older browsers *\/\r\narticle, aside, details, figcaption, figure, \r\nfooter, header, hgroup, menu, nav, section {\r\n\tdisplay: block;\r\n}\r\nbody {\r\n\tline-height: 1;\r\n}\r\nol, ul {\r\n\tlist-style: none;\r\n}\r\nblockquote, q {\r\n\tquotes: none;\r\n}\r\nblockquote:before, blockquote:after,\r\nq:before, q:after {\r\n\tcontent: '';\r\n\tcontent: none;\r\n}\r\ntable {\r\n\tborder-collapse: collapse;\r\n\tborder-spacing: 0;\r\n}<\/pre>\n<p>Itu dia teman-teman, jangan lupa selalu sertakan CSS Reset dalam membangun website. Selamat mencoba.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial kali ini kita akan mencoba menambahkan CSS Reset pada halaman website. Apa itu CSS Reset?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,17,11],"tags":[78,75,74,8,77,22,76],"class_list":["post-97","post","type-post","status-publish","format-standard","hentry","category-css","category-tips-n-trik","category-tutorial","tag-belajar-web","tag-belajar-web-design","tag-belajar-website","tag-css","tag-css-reset","tag-css3","tag-reset"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Reset CSS Website - YELLOWWEB.ID<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Reset CSS Website - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Tutorial kali ini kita akan mencoba menambahkan CSS Reset pada halaman website. Apa itu CSS Reset?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2015-08-06T18:50:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-1.jpg\" \/>\n<meta name=\"author\" content=\"yellowweb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yellowweb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Reset CSS Website\",\"datePublished\":\"2015-08-06T18:50:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/\"},\"wordCount\":134,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/08\\\/css-reset-yellowweb.id-1.jpg\",\"keywords\":[\"belajar web\",\"belajar web design\",\"belajar website\",\"css\",\"css reset\",\"css3\",\"reset\"],\"articleSection\":[\"CSS\",\"Tips n Trik\",\"Tutorial\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/\",\"name\":\"Reset CSS Website - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/08\\\/css-reset-yellowweb.id-1.jpg\",\"datePublished\":\"2015-08-06T18:50:41+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/08\\\/css-reset-yellowweb.id-1.jpg\",\"contentUrl\":\"https:\\\/\\\/yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/08\\\/css-reset-yellowweb.id-1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/reset-css-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Reset CSS Website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\",\"name\":\"YELLOWWEB.ID\",\"description\":\"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\",\"name\":\"yellowweb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"caption\":\"yellowweb\"},\"sameAs\":[\"https:\\\/\\\/www.yellowweb.id\"],\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/author\\\/yellowweb\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Reset CSS Website - YELLOWWEB.ID","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/","og_locale":"en_GB","og_type":"article","og_title":"Reset CSS Website - YELLOWWEB.ID","og_description":"Tutorial kali ini kita akan mencoba menambahkan CSS Reset pada halaman website. Apa itu CSS Reset?","og_url":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2015-08-06T18:50:41+00:00","og_image":[{"url":"https:\/\/yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-1.jpg","type":"","width":"","height":""}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Reset CSS Website","datePublished":"2015-08-06T18:50:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/"},"wordCount":134,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/#primaryimage"},"thumbnailUrl":"https:\/\/yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-1.jpg","keywords":["belajar web","belajar web design","belajar website","css","css reset","css3","reset"],"articleSection":["CSS","Tips n Trik","Tutorial"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/","url":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/","name":"Reset CSS Website - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/#primaryimage"},"thumbnailUrl":"https:\/\/yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-1.jpg","datePublished":"2015-08-06T18:50:41+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/reset-css-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/#primaryimage","url":"https:\/\/yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-1.jpg","contentUrl":"https:\/\/yellowweb.id\/blog\/wp-content\/uploads\/2015\/08\/css-reset-yellowweb.id-1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/reset-css-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Reset CSS Website"}]},{"@type":"WebSite","@id":"https:\/\/www.yellowweb.id\/blog\/#website","url":"https:\/\/www.yellowweb.id\/blog\/","name":"YELLOWWEB.ID","description":"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yellowweb.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829","name":"yellowweb","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","caption":"yellowweb"},"sameAs":["https:\/\/www.yellowweb.id"],"url":"https:\/\/www.yellowweb.id\/blog\/author\/yellowweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":2,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":101,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/97\/revisions\/101"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}