{"id":69,"date":"2019-07-17T07:51:19","date_gmt":"2019-07-17T07:51:19","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=69"},"modified":"2019-09-03T11:53:05","modified_gmt":"2019-09-03T11:53:05","slug":"css-tutorial","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/css-tutorial\/","title":{"rendered":"CSS : Tutorial"},"content":{"rendered":"\n<p><em>CSS adalah teknologi presentasi utama yang digunakan dalam mendesain situs web.<\/em><\/p>\n\n\n\n<p>CSS adalah singkatan dari Cascading Style Sheets. CSS adalah bahasa pengkodean yang digunakan untuk menata gaya tampilan web agar lebih cantik dan indah saat ditampilkan di web browser. CSS hadir sebagai pelengkap HTML. Mengingat HTML lwbih fokus pada aspek pendefinisian konten, maka pembuatan layout dan tata warna menjadi masalah di HTML. CSS dikembangkan untuk memisahkan aspek konten dengan aspek tampilan. CSS difungsikan untuk menangani sisi tata letak, tata warna, dan pengaturan huruf di dokumen HTML.<\/p>\n\n\n\n<p>Dewasa ini, kode CSS lazim dibuat dalam file tersendiri. Untuk melihat file CSS sebuah halaman web, lihat kode sumber halaman dan buka URL rujukan tag &lt;link&gt; yang mengarah ke sebuah file berekstensi .css. Melalui CSS, tampilan seluruh halaman web di sebuah website bisa dibuat menjadi konsisten. Proses modifikasi dan perubahan tampilan pun menjadi lebih praktis dan efisien, karena desainer web cukup mengutak-atik kode CSS tanpa harus merombak dokumen HTML-nya<\/p>\n\n\n\n<p>Sebelum CSS, hampir semua atribut penyajian dokumen HTML\nterkandung dalam markup HTML (khususnya di dalam tag HTML); semua warna font,\ngaya latar belakang, perataan elemen, batas dan ukuran harus dijelaskan secara\neksplisit dalam HTML.<\/p>\n\n\n\n<p>CSS diperkenalkan pada tahun 1996 oleh World Wide Web Consortium (W3C), yang juga mempertahankan standarnya. CSS dirancang untuk memisahkan aspek tampilan dan konten. Sekarang desainer web dapat memindahkan informasi pemformatan halaman web ke style sheet terpisah yang menghasilkan markup HTML yang jauh lebih sederhana, dan memudahkan dalam pemeliharaan web.<\/p>\n\n\n\n<p>CSS3 adalah versi terbaru dari spesifikasi CSS. CSS3 menambahkan beberapa fitur style baru dan peningkatan untuk meningkatkan kemampuan tampilan web.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Yang Dapat di Lakukan Dengan CSS<\/h4>\n\n\n\n<p>Ada banyak hal yang dapat kalian lakukan dengan CSS, diantaranya yaitu:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Kalian dapat dengan mudah menerapkan style yang\nsama pada banyak elemen.<\/li><li>Kalian dapat mengontrol tampilan beberapa\nhalaman situs web dengan hanya satu style sheet.<\/li><li>Kalian dapat menampilkan halaman yang sama\nsecara berbeda pada perangkat yang berbeda.<\/li><li>Kalian dapat mengatur elemen dinamis seperti hover,\nfocus, dll. <\/li><li>Kalian dapat mengubah posisi elemen pada halaman\nweb tanpa mengubah markupnya.<\/li><li>Kalian dapat mengubah tampilan elemen HTML yang\nada.<\/li><li>Kalian dapat mengubah elemen seperti skala,\nmemutar, miring, dll dalam ruang 2D atau 3D.<\/li><li>Kalian dapat membuat animasi dan efek transisi\ntanpa menggunakan JavaScript apa pun.<\/li><\/ul>\n\n\n\n<p>Tidak hanya itu saja, ada banyak hal menarik lainnya yang dapat Kalian lakukan dengan CSS. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Keuntungan Menggunakan CSS<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Memisahkan pembuatan dokumen (CSS dan HTML).&nbsp;&nbsp;<\/li><li>Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web.&nbsp;&nbsp;<\/li><li>Akses web lebih cepat saat di-loading&nbsp;&nbsp;(mempercepat pembacaann HTML).&nbsp;&nbsp;<\/li><li>Fleksibel, interaktif, tampilan lebih menarik dan nyaman dipandang.&nbsp;&nbsp;<\/li><li>Lebih kecil ukuran file sehingga bandwith yang&nbsp;&nbsp;digunakan juga otomatis menjadi lebih kecil.&nbsp;&nbsp;<\/li><li>Dapat digunakan pada semua web browser.&nbsp;&nbsp; <\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS adalah teknologi presentasi utama yang digunakan dalam mendesain situs web. CSS adalah singkatan dari Cascading Style Sheets. CSS adalah bahasa pengkodean yang digunakan untuk<\/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-69","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 : Tutorial - 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-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar CSS : Tutorial - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"CSS adalah teknologi presentasi utama yang digunakan dalam mendesain situs web. CSS adalah singkatan dari Cascading Style Sheets. CSS adalah bahasa pengkodean yang digunakan untuk\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/css-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-17T07:51:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T11:53:05+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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-tutorial\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"CSS : Tutorial\",\"datePublished\":\"2019-07-17T07:51:19+00:00\",\"dateModified\":\"2019-09-03T11:53:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-tutorial\\\/\"},\"wordCount\":453,\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-tutorial\\\/\",\"name\":\"Belajar CSS : Tutorial - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"datePublished\":\"2019-07-17T07:51:19+00:00\",\"dateModified\":\"2019-09-03T11:53:05+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-tutorial\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/css-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS : Tutorial\"}]},{\"@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 : Tutorial - 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-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"Belajar CSS : Tutorial - WebHozz Code","og_description":"CSS adalah teknologi presentasi utama yang digunakan dalam mendesain situs web. CSS adalah singkatan dari Cascading Style Sheets. CSS adalah bahasa pengkodean yang digunakan untuk","og_url":"https:\/\/www.webhozz.com\/code\/css-tutorial\/","og_site_name":"WebHozz Code","article_published_time":"2019-07-17T07:51:19+00:00","article_modified_time":"2019-09-03T11:53:05+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/css-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/css-tutorial\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"CSS : Tutorial","datePublished":"2019-07-17T07:51:19+00:00","dateModified":"2019-09-03T11:53:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/css-tutorial\/"},"wordCount":453,"articleSection":["CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/css-tutorial\/","url":"https:\/\/www.webhozz.com\/code\/css-tutorial\/","name":"Belajar CSS : Tutorial - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"datePublished":"2019-07-17T07:51:19+00:00","dateModified":"2019-09-03T11:53:05+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/css-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/css-tutorial\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/css-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"CSS : Tutorial"}]},{"@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\/69","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=69"}],"version-history":[{"count":4,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/69\/revisions"}],"predecessor-version":[{"id":390,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/69\/revisions\/390"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=69"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=69"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=69"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}