{"id":43,"date":"2019-07-15T07:56:45","date_gmt":"2019-07-15T07:56:45","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=43"},"modified":"2019-09-03T11:56:00","modified_gmt":"2019-09-03T11:56:00","slug":"style-html","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/style-html\/","title":{"rendered":"HTML : Style"},"content":{"rendered":"\n<p>HTML sangat terbatas dalam menyajikan halaman web. Awalnya\ndirancang sebagai cara sederhana untuk menyajikan informasi. CSS (Cascading\nStyle Sheets) diperkenalkan pada Desember 1996 oleh World Wide Web Consortium\n(W3C) untuk memberikan cara yang lebih baik dalam mendesain elemen HTML.<\/p>\n\n\n\n<p>Dengan CSS, menjadi sangat mudah untuk menentukan hal-hal seperti, ukuran dan jenis huruf font, warna teks dan latar belakang, margin teks dan gambar, jumlah ruang antara elemen, batas, dan banyak properti style lainnya.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Menambahkan Style ke Elemen HTML<\/strong><\/h4>\n\n\n\n<p>Informasi style dapat dilampirkan sebagai dokumen terpisah\natau disematkan dalam dokumen HTML itu sendiri. Berikut adalah tiga metode\nmenerapkan informasi style ke dokumen HTML.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Inline style &#8211; Menggunakan atribut style dalam tag awal HTML.<\/li><li>Embedded style &#8211; Menggunakan elemen &lt;style&gt; di bagian judul dokumen.<\/li><li>External style sheet &#8211; Menggunakan elemen &lt;link&gt;, merujuk ke file CSS eksternal.<\/li><\/ul>\n\n\n\n<p>Dalam tutorial ini kita akan membahas semua jenis style sheet yang berbeda satu per satu.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Inline Style<\/strong><\/h4>\n\n\n\n<p>Inline CSS adalah memasukkan kode CSS pada line HTML\ntepatnya pada atribut \u201cstyle\u201d pada sebuah tag. Inline CSS dapat digunakan jika\npenggunaan CSS tidak terlalu banyak dan cukup dibutuhkan oleh tag pemanggilnya\nsaja. Karena jika pemakaiannya terlalu banyak misalnya pada setiap tag yang\nmemerlukannya. Maka penggunaan Inline CSS tidak efesien dan malah akan membuat\n\u201cjorok\u201d kode HTML anda dan ukuran filepun akan semakin besar.<\/p>\n\n\n\n<p>Atribut style termasuk serangkaian properti CSS dan pasangan\nnilai. Masing-masing pasangan nilai: dipisahkan oleh tanda titik koma (;), sama\nseperti Anda akan menulis ke lembar gaya yang disematkan atau eksternal. Tetapi\nharus semua dalam satu baris yaitu tidak ada istirahat baris setelah titik\nkoma.<\/p>\n\n\n\n<p>Contoh berikut menunjukkan cara mengatur warna dan ukuran font teks:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;h1 style=&quot;color:red; font-size:30px;&quot;&gt;This is a heading&lt;\/h1&gt;\n&lt;p style=&quot;color:green; font-size:18px;&quot;&gt;This is a paragraph.&lt;\/p&gt;\n&lt;div style=&quot;color:green; font-size:18px;&quot;&gt;This is some text.&lt;\/div&gt;\n<\/pre><\/div>\n\n\n<p>Menggunakan inline style umumnya dianggap sebagai cara yang buruk. Karena aturan gaya menyatu langsung di dalam tag html itu sendiri, hal tersebut menyebabkan hasilnya bercampur dengan konten dokumen, dan hal tersebut akan menyulitkan kita saat ingin memperbarui atau melakukan pemeliharaan website.  <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Embedded Style Sheets<\/h4>\n\n\n\n<p>Embedded atau internal style hanya mempengaruhi dokumen yang di embedded kan. Penulisandengan metode Embedded style sheet dituliskan langsung pada program HTML di bagian atas program atau di dalam tag&nbsp;<strong>&lt;HEAD&gt;<\/strong>&nbsp;dengan menggunakan tag&nbsp;<strong>&lt;STYLE&gt;<\/strong>&nbsp;ditutup dengan&nbsp;<strong>&lt;\/STYLE&gt;<\/strong>, cukup menuliskan selector dari CSS tersebut disertai dengan parameter yang ada. Berikut contoh embedded style :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;head&gt;\n    &lt;style&gt;\n        body { background-color: YellowGreen; }\n\t\th1 { color: blue; }\n        p { color: red; }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">External Style Sheets<\/h4>\n\n\n\n<p>External style sheet cocok untuk diterapkan ke banyak\nhalaman website.<\/p>\n\n\n\n<p>Salah satu cara\nyang paling baik untuk menambahkan CSS ke website kalian adalah dengan\nmenghubungkannya ke file .CSS eksternal. Dengan cara tersebut, perubahan apapun\nyang kalian buat pada file CSS akan tampil pada website kalian secara\nkeseluruhan. Kalian bisa mengubah tampilan seluruh situs web dengan hanya\nmemperbarui satu file saja.<\/p>\n\n\n\n<p>Kalian bisa menggunakan external style sheet dengan dua cara\nyaitu :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong><em>Linking<\/em><\/strong>, dimana external style sheet ditautkan ke dokumen HTML dengan menggunakan tag      &lt;link&gt; . Tag &lt;link&gt; dimasukan ke dalam tag &lt;head&gt; seperti contoh berikut:<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;head&gt; \n&lt;link rel=&quot;stylesheet&quot; href=&quot;css\/style.css&quot;&gt; \n&lt;\/head&gt;\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\"><li><strong><em>Import<\/em><\/strong>, @import adalah cara lain untuk memuat style sheet eksternal. Pernyataan impor      meminta browser untuk memuat external style sheet dan menggunakannya. Kalian bisa menggunakannya dalam dua cara. Cara paling sederhana adalah menggunakannya di dalam elemen &lt;style&gt; di bagian &lt;head&gt;. Berikut contohnya:<\/li><\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;style&gt;\n    @import url(&quot;css\/style.css&quot;);\n    p {\n        color: blue;\n        font-size: 16px;\n    }\n&lt;\/style&gt;\n<\/pre><\/div>\n\n\n<p>Cara kedua, kalian bisa menggunakan pernyataan @import untuk mengimpor style sheet yang  satu ke dalam style sheet yang lain. Berikut contohnya:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n@import url(&quot;css\/layout.css&quot;);\n@import url(&quot;css\/color.css&quot;);\nbody {\n    color: blue;\n    font-size: 14px;\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"<p>HTML sangat terbatas dalam menyajikan halaman web. Awalnya dirancang sebagai cara sederhana untuk menyajikan informasi. CSS (Cascading Style Sheets) diperkenalkan pada Desember 1996 oleh World<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-43","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Belajar HTML : Style - 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\/style-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar HTML : Style - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"HTML sangat terbatas dalam menyajikan halaman web. Awalnya dirancang sebagai cara sederhana untuk menyajikan informasi. CSS (Cascading Style Sheets) diperkenalkan pada Desember 1996 oleh World\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/style-html\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-15T07:56:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T11:56:00+00:00\" \/>\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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/style-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/style-html\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"HTML : Style\",\"datePublished\":\"2019-07-15T07:56:45+00:00\",\"dateModified\":\"2019-09-03T11:56:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/style-html\\\/\"},\"wordCount\":548,\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/style-html\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/style-html\\\/\",\"name\":\"Belajar HTML : Style - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"datePublished\":\"2019-07-15T07:56:45+00:00\",\"dateModified\":\"2019-09-03T11:56:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/style-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/style-html\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/style-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML : Style\"}]},{\"@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 HTML : Style - 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\/style-html\/","og_locale":"en_US","og_type":"article","og_title":"Belajar HTML : Style - WebHozz Code","og_description":"HTML sangat terbatas dalam menyajikan halaman web. Awalnya dirancang sebagai cara sederhana untuk menyajikan informasi. CSS (Cascading Style Sheets) diperkenalkan pada Desember 1996 oleh World","og_url":"https:\/\/www.webhozz.com\/code\/style-html\/","og_site_name":"WebHozz Code","article_published_time":"2019-07-15T07:56:45+00:00","article_modified_time":"2019-09-03T11:56:00+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/style-html\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/style-html\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"HTML : Style","datePublished":"2019-07-15T07:56:45+00:00","dateModified":"2019-09-03T11:56:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/style-html\/"},"wordCount":548,"articleSection":["HTML"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/style-html\/","url":"https:\/\/www.webhozz.com\/code\/style-html\/","name":"Belajar HTML : Style - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"datePublished":"2019-07-15T07:56:45+00:00","dateModified":"2019-09-03T11:56:00+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/style-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/style-html\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/style-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"HTML : Style"}]},{"@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\/43","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=43"}],"version-history":[{"count":5,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/43\/revisions"}],"predecessor-version":[{"id":396,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/43\/revisions\/396"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=43"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=43"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=43"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}