{"id":93,"date":"2019-07-18T09:27:29","date_gmt":"2019-07-18T09:27:29","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=93"},"modified":"2019-09-03T11:52:46","modified_gmt":"2019-09-03T11:52:46","slug":"css-syntax","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/css-syntax\/","title":{"rendered":"CSS : Syntax"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\"> Syntax <\/h4>\n\n\n\n<p>Aturan pada CSS memiliki dua bagian utama, selector, dan satu atau lebih declaration:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"560\" height=\"150\" src=\"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/css-selector.png\" alt=\"\" class=\"wp-image-94\" srcset=\"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/css-selector.png 560w, https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/css-selector-300x80.png 300w\" sizes=\"(max-width: 560px) 100vw, 560px\" \/><\/figure>\n\n\n\n<p>Selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh satu atau beberapa elemen di dokumen HTML. Selector digunakan untuk mencocokkan nama elemen di HTML dan aturannya di CSS.<\/p>\n\n\n\n<p>Deklarasi aturan-aturan tiap selector diletakkan dalam tanda kurung kurawal. Tiap properti dan nilainya dipisahkan dengan tanda ; (titik koma). Setiap deklarasi terdiri dari properti dan nilai. Properti adalah atribut gaya yang ingin kalian ubah; bisa warna atau border dll. Setiap properti memiliki nilai, misalnya properti warna dapat memiliki nilai <em>blue<\/em> atau #0000FF dll.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nh1 {color:blue; text-align:center;}\n<\/pre><\/div>\n\n\n<p>Untuk membuat CSS lebih mudah dibaca, kalian dapat meletakkan satu deklarasi di setiap baris, seperti ini:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nh1 {\n    color: blue;\n    text-align: center;\n}\n<\/pre><\/div>\n\n\n<p>Dalam contoh di atas <em>h1<\/em> adalah selector, <em>warna<\/em> dan <em>text-align<\/em> adalah properti dan diberi warna <em>blue<\/em> dan <em>center<\/em> adalah nilai yang sesuai dari properti ini.<\/p>\n\n\n\n<p><em><strong>Catatan<\/strong><\/em>: Deklarasi CSS selalu diakhiri dengan tanda titik koma &#8220;;&#8221;, dan grup deklarasi selalu dikelilingi oleh tanda kurung kurawal &#8220;{}&#8221;.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Komentar CSS<\/h4>\n\n\n\n<p>Komentar biasanya ditambahkan dengan tujuan untuk membuat\nkode sumber lebih mudah dimengerti. Ini dapat membantu developer lain (atau kalian\ndi masa depan ketika ingin mengedit kodenya) untuk memahami apa yang kalian\nlakukan dengan CSS. Komentar penting bagi programmer tetapi biasanya akan diabaikan\noleh browser.<\/p>\n\n\n\n<p>Komentar CSS dimulai dengan \/*, dan diakhiri dengan *\/, Lihat contoh di bawah ini:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* This is a CSS comment *\/\nh1 {\n    color: blue;\n    text-align: center;\n}\n<\/pre><\/div>\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Syntax Aturan pada CSS memiliki dua bagian utama, selector, dan satu atau lebih declaration: Selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-93","post","type-post","status-publish","format-standard","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Belajar CSS : Syntax - WebHozz Code<\/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.webhozz.com\/code\/css-syntax\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar CSS : Syntax - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"Syntax Aturan pada CSS memiliki dua bagian utama, selector, dan satu atau lebih declaration: Selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/css-syntax\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-18T09:27:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T11:52:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/css-selector.png\" \/>\n\t<meta property=\"og:image:width\" content=\"560\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. 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.webhozz.com\\\/code\\\/css-syntax\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-syntax\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"CSS : Syntax\",\"datePublished\":\"2019-07-18T09:27:29+00:00\",\"dateModified\":\"2019-09-03T11:52:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-syntax\\\/\"},\"wordCount\":215,\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-syntax\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/css-selector.png\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-syntax\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-syntax\\\/\",\"name\":\"Belajar CSS : Syntax - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-syntax\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-syntax\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/css-selector.png\",\"datePublished\":\"2019-07-18T09:27:29+00:00\",\"dateModified\":\"2019-09-03T11:52:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-syntax\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-syntax\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-syntax\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/css-selector.png\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/css-selector.png\",\"width\":560,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-syntax\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS : Syntax\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web &amp; Pemrograman Indonesia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/author\\\/dody\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar CSS : Syntax - WebHozz Code","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.webhozz.com\/code\/css-syntax\/","og_locale":"en_US","og_type":"article","og_title":"Belajar CSS : Syntax - WebHozz Code","og_description":"Syntax Aturan pada CSS memiliki dua bagian utama, selector, dan satu atau lebih declaration: Selector adalah nama sebuah aturan yang akan dijadikan sebagai acuan oleh","og_url":"https:\/\/www.webhozz.com\/code\/css-syntax\/","og_site_name":"WebHozz Code","article_published_time":"2019-07-18T09:27:29+00:00","article_modified_time":"2019-09-03T11:52:46+00:00","og_image":[{"width":560,"height":150,"url":"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/css-selector.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/css-syntax\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/css-syntax\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"CSS : Syntax","datePublished":"2019-07-18T09:27:29+00:00","dateModified":"2019-09-03T11:52:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/css-syntax\/"},"wordCount":215,"image":{"@id":"https:\/\/www.webhozz.com\/code\/css-syntax\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/css-selector.png","articleSection":["CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/css-syntax\/","url":"https:\/\/www.webhozz.com\/code\/css-syntax\/","name":"Belajar CSS : Syntax - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/css-syntax\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/code\/css-syntax\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/css-selector.png","datePublished":"2019-07-18T09:27:29+00:00","dateModified":"2019-09-03T11:52:46+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/css-syntax\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/css-syntax\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/code\/css-syntax\/#primaryimage","url":"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/css-selector.png","contentUrl":"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/css-selector.png","width":560,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/css-syntax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"CSS : Syntax"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web &amp; Pemrograman Indonesia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/code\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/code\/author\/dody\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/93","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/comments?post=93"}],"version-history":[{"count":5,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/93\/revisions"}],"predecessor-version":[{"id":388,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/93\/revisions\/388"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=93"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=93"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=93"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}