{"id":4996,"date":"2021-08-20T07:40:39","date_gmt":"2021-08-20T07:40:39","guid":{"rendered":"https:\/\/www.hostnic.id\/blog\/?p=4996"},"modified":"2021-08-27T07:57:50","modified_gmt":"2021-08-27T07:57:50","slug":"pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets","status":"publish","type":"post","link":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/","title":{"rendered":"Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets)"},"content":{"rendered":"<p><span style=\"font-weight: 400;color: #000000\"><strong>Cara Kerja CSS &#8211;<\/strong> CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa pengkodean yang memberikan tampilan dan tata letak situs web. Seiring dengan HTML, CSS adalah dasar untuk desain web. Tanpa itu, situs web akan tetap berupa teks biasa dengan latar belakang putih.<\/span><\/p>\n<p><span style=\"font-weight: 400;color: #000000\">Sebelum pengembangan CSS pada tahun 1996 oleh World Wide Web Consortium (W3C), halaman web sangat terbatas baik bentuk maupun fungsinya. <a href=\"https:\/\/www.hostnic.id\/\"><em><strong>Browser<\/strong><\/em><\/a> awal menyajikan halaman sebagai hypertext &#8211; teks biasa, gambar, dan tautan ke halaman hypertext lainnya. Tidak ada tata letak sama sekali untuk dibicarakan, hanya paragraf yang melintasi halaman dalam satu kolom.<\/span><\/p>\n<h4><strong><span style=\"color: #000000\">CSS memungkinkan beberapa inovasi pada tata letak halaman web, seperti kemampuan untuk :<\/span><\/strong><\/h4>\n<ol>\n<li><span style=\"font-weight: 400;color: #000000\"> Tentukan font selain default untuk browser<\/span><\/li>\n<li><span style=\"font-weight: 400;color: #000000\"> Tentukan warna dan ukuran teks dan tautan<\/span><\/li>\n<li><span style=\"font-weight: 400;color: #000000\"> Terapkan warna ke latar belakang<\/span><\/li>\n<li><span style=\"font-weight: 400;color: #000000\"> Berisi elemen halaman web dalam kotak dan mengapungkan kotak itu ke posisi tertentu di halaman.<\/span><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"4999\" data-permalink=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/attachment\/css2\/\" data-orig-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css2.jpg?fit=736%2C445&amp;ssl=1?v=1630051039\" data-orig-size=\"736,445\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"css2\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css2.jpg?fit=736%2C445&amp;ssl=1?v=1630051039\" class=\"alignnone wp-image-4999 size-full\" src=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css2.jpg?resize=736%2C445&#038;ssl=1\" alt=\"\" width=\"736\" height=\"445\" srcset=\"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css2.jpg?w=736&amp;ssl=1 736w, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css2.jpg?resize=300%2C181&amp;ssl=1 300w\" sizes=\"auto, (max-width: 736px) 100vw, 736px\" \/><\/p>\n<p><span style=\"font-weight: 400;color: #000000\">Mereka menempatkan &#8220;gaya&#8221; dalam lembar gaya, dan untuk pertama kalinya, halaman Web dapat dirancang. <\/span><span style=\"font-weight: 400;color: #000000\">Browser komersial pertama yang membaca dan menggunakan CSS adalah Microsoft Internet Explorer 3 pada tahun 1998. <\/span><\/p>\n<p><span style=\"font-weight: 400;color: #000000\">Sampai hari ini, dukungan untuk fungsi CSS tertentu bervariasi dari Browser ke Browser. W3C, yang masih mengawasi dan menciptakan standar Web, baru-baru ini merilis standar baru untuk CSS &#8211; CSS3. Dengan CSS3, pengembang berharap semua browser utama akan membaca dan menampilkan setiap fungsi CSS dengan cara yang sama.<\/span><\/p>\n<h4><strong><span style=\"color: #000000\">Bagaimana cara kerja CSS?<\/span><\/strong><\/h4>\n<p><span style=\"font-weight: 400;color: #000000\">Untuk memahami dasar-dasar cara kerja CSS, Anda harus terlebih dahulu memahami sedikit tentang HTML modern. Pengembang web menata halaman sesuai dengan &#8220;model kotak \/ box model&#8221;. Halaman Web adalah serangkaian kotak, masing-masing berisi elemen diskrit. Kotak-kotak ini bersarang, satu di dalam yang lain.<\/span><\/p>\n<p><span style=\"font-weight: 400;color: #000000\">Misalnya, <a href=\"https:\/\/www.hostnic.id\/\"><em><strong>header halaman<\/strong><\/em><\/a> adalah sebuah kotak, dan berisi beberapa kotak kecil yang terdiri dari semua elemen yang membentuk header : logo, navigasi, tombol media sosial, tombol keranjang belanja, dll.<\/span><\/p>\n<p><span style=\"font-weight: 400;color: #000000\">Dengan menggunakan CSS, pengembang menetapkan gaya ke &#8221; header&#8221;. Dalam contoh ini, mari kita asumsikan bahwa pengembang membuat teks di dalam header berwarna ungu, font Arial dan tinggi lima belas poin.<\/span><\/p>\n<p><span style=\"font-weight: 400;color: #000000\">Di sinilah bagian &#8220;cascading&#8221; dari cascading style sheets berperan. Gaya font yang diterapkan ke header cascade ke semua elemen yang ada di dalam header. Elemen yang berisi teks seperti navigasi, tautan, atau ajakan bertindak semuanya akan berwarna ungu, Arial, dan tinggi lima belas poin.<\/span><\/p>\n<p><span style=\"color: #000000\">Itulah pengertian, fungsi dan cara kerja css dalam sebuah situs website.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cara Kerja CSS &#8211; CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa pengkodean yang memberikan tampilan dan tata letak situs web. Seiring dengan HTML, CSS adalah dasar untuk desain web. Tanpa itu, situs web akan tetap berupa teks biasa dengan latar belakang putih. Sebelum pengembangan CSS pada tahun 1996 oleh World Wide Web [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":4997,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[82],"tags":[],"class_list":["post-4996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets) - Hostnic.id<\/title>\n<meta name=\"description\" content=\"Cara Kerja CSS - CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa pengkodean yang memberikan tampilan dan tata letak situs\" \/>\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.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets) - Hostnic.id\" \/>\n<meta property=\"og:description\" content=\"Cara Kerja CSS - CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa pengkodean yang memberikan tampilan dan tata letak situs\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/\" \/>\n<meta property=\"og:site_name\" content=\"Hostnic.id\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-20T07:40:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-27T07:57:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css1.jpg?v=1630050819\" \/>\n\t<meta property=\"og:image:width\" content=\"2242\" \/>\n\t<meta property=\"og:image:height\" content=\"2242\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Monic\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Monic\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/\"},\"author\":{\"name\":\"Monic\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"headline\":\"Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets)\",\"datePublished\":\"2021-08-20T07:40:39+00:00\",\"dateModified\":\"2021-08-27T07:57:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/\"},\"wordCount\":388,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/css1.jpg?fit=2242%2C2242&ssl=1?v=1630050819\",\"articleSection\":[\"Website\"],\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/\",\"name\":\"Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets) - Hostnic.id\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/css1.jpg?fit=2242%2C2242&ssl=1?v=1630050819\",\"datePublished\":\"2021-08-20T07:40:39+00:00\",\"dateModified\":\"2021-08-27T07:57:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\"},\"description\":\"Cara Kerja CSS - CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa pengkodean yang memberikan tampilan dan tata letak situs\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/css1.jpg?fit=2242%2C2242&ssl=1?v=1630050819\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.hostnic.id\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/css1.jpg?fit=2242%2C2242&ssl=1?v=1630050819\",\"width\":2242,\"height\":2242,\"caption\":\"Css and HTML programming languages. Computer programming , coding, IT. Female programmer cartoon character. Software, website development. Vector isolated concept metaphor illustration.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/tutorial\\\/website\\\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/\",\"name\":\"hostnic.id\",\"description\":\"Info, Tips dan Tutorial Seputar Layanan Hostnic\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/#\\\/schema\\\/person\\\/07d47eecbbce5d998aaf01aa209cb5b2\",\"name\":\"Monic\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g\",\"caption\":\"Monic\"},\"url\":\"https:\\\/\\\/www.hostnic.id\\\/blog\\\/author\\\/blog-writer\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets) - Hostnic.id","description":"Cara Kerja CSS - CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa pengkodean yang memberikan tampilan dan tata letak situs","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.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/","og_locale":"id_ID","og_type":"article","og_title":"Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets) - Hostnic.id","og_description":"Cara Kerja CSS - CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa pengkodean yang memberikan tampilan dan tata letak situs","og_url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/","og_site_name":"Hostnic.id","article_published_time":"2021-08-20T07:40:39+00:00","article_modified_time":"2021-08-27T07:57:50+00:00","og_image":[{"width":2242,"height":2242,"url":"https:\/\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css1.jpg?v=1630050819","type":"image\/jpeg"}],"author":"Monic","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Monic","Estimasi waktu membaca":"2 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/#article","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/"},"author":{"name":"Monic","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"headline":"Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets)","datePublished":"2021-08-20T07:40:39+00:00","dateModified":"2021-08-27T07:57:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/"},"wordCount":388,"commentCount":0,"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css1.jpg?fit=2242%2C2242&ssl=1?v=1630050819","articleSection":["Website"],"inLanguage":"id","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/","url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/","name":"Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets) - Hostnic.id","isPartOf":{"@id":"https:\/\/www.hostnic.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/#primaryimage"},"image":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css1.jpg?fit=2242%2C2242&ssl=1?v=1630050819","datePublished":"2021-08-20T07:40:39+00:00","dateModified":"2021-08-27T07:57:50+00:00","author":{"@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2"},"description":"Cara Kerja CSS - CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa pengkodean yang memberikan tampilan dan tata letak situs","breadcrumb":{"@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/#primaryimage","url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css1.jpg?fit=2242%2C2242&ssl=1?v=1630050819","contentUrl":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css1.jpg?fit=2242%2C2242&ssl=1?v=1630050819","width":2242,"height":2242,"caption":"Css and HTML programming languages. Computer programming , coding, IT. Female programmer cartoon character. Software, website development. Vector isolated concept metaphor illustration."},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/pengertian-fungsi-dan-cara-kerja-css-cascading-style-sheets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnic.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Pengertian, Fungsi dan Cara Kerja CSS (Cascading Style Sheets)"}]},{"@type":"WebSite","@id":"https:\/\/www.hostnic.id\/blog\/#website","url":"https:\/\/www.hostnic.id\/blog\/","name":"hostnic.id","description":"Info, Tips dan Tutorial Seputar Layanan Hostnic","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostnic.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/www.hostnic.id\/blog\/#\/schema\/person\/07d47eecbbce5d998aaf01aa209cb5b2","name":"Monic","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618c16e73ff4b8611ffef11074c3fc0cd2557bbef47ecbcce803b2dd1b3e7284?s=96&d=mm&r=g","caption":"Monic"},"url":"https:\/\/www.hostnic.id\/blog\/author\/blog-writer\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2021\/08\/css1.jpg?fit=2242%2C2242&ssl=1?v=1630050819","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8D2mv-1iA","jetpack-related-posts":[{"id":7593,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/cara-membuat-website-dengan-html-css-dan-javascript-panduan-lengkap-untuk-pemula\/","url_meta":{"origin":4996,"position":0},"title":"Cara Membuat Website dengan HTML, CSS, dan JavaScript: Panduan Lengkap untuk Pemula","author":"Monic","date":"2023-09-23","format":false,"excerpt":"Sahabat Hostnic! Apa kabar sahabat semua? Semoga sehat selalu. Pada kesempatan ini, kita akan membahas cara membuat website dengan menggunakan HTML, CSS, dan JavaScript. Jika Anda adalah seorang pemula yang ingin mempelajari dasar-dasar pembuatan website, artikel ini akan memberikan panduan lengkap untuk memulai. Mari kita mulai pembahasan lengkapnya. Pengenalan HTML,\u2026","rel":"","context":"dalam &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/"},"img":{"alt_text":"membuat website gratis wordpress","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/keyword-seo-content-website-tags.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/keyword-seo-content-website-tags.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/keyword-seo-content-website-tags.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/keyword-seo-content-website-tags.jpg?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":7581,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/contoh-web-profil-pribadi-html-dan-css-identitas-online\/","url_meta":{"origin":4996,"position":1},"title":"Contoh Web Profil Pribadi HTML Dan CSS Identitas Online","author":"Monic","date":"2023-09-23","format":false,"excerpt":"Halo, pembaca yang terhormat! Bagaimana kabar kalian? Selamat datang di artikel ini yang akan membahas mengenai contoh web profil pribadi menggunakan HTML dan CSS untuk menciptakan identitas online. Dalam artikel ini, kita akan menjelajahi cara-cara untuk membuat web profil pribadi yang menarik dan informatif. Jadi, mari kita mulai dan lanjutkan\u2026","rel":"","context":"dalam &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/"},"img":{"alt_text":"contoh web profil pribadi html dan css","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/software-development-programming.jpg?fit=740%2C740&ssl=1%3Fv%3D1695460370&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/software-development-programming.jpg?fit=740%2C740&ssl=1%3Fv%3D1695460370&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/software-development-programming.jpg?fit=740%2C740&ssl=1%3Fv%3D1695460370&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/software-development-programming.jpg?fit=740%2C740&ssl=1%3Fv%3D1695460370&resize=700%2C400 2x"},"classes":[]},{"id":3728,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/front-end-website-untuk-web-developer\/","url_meta":{"origin":4996,"position":2},"title":"Front End Website Untuk Web Developer","author":"Nanda Anubis","date":"2020-07-24","format":false,"excerpt":"Teknik front-end yang berkaitan langsung dengan \u201cpenglihatan\u201d dan \u201cpengalaman berselancar\u201d klien menjadi aspek penting yang harus dipelajari. Ada beberapa tools penting yang perlu dikuasai agar bisa memaksimalkan potensi anda di bidang front-end, seperti berikut ini : HTML (Hypertext Markup Language) : sebuah teknologi yang berguna untuk membuat halaman sebuah website\u2026","rel":"","context":"dalam &quot;Bootstrap&quot;","block_context":{"text":"Bootstrap","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/bootstrap\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2020\/07\/Screenshot_9.png?fit=351%2C309&ssl=1%3Fv%3D1595526870&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":7905,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/belajar-php\/belajar-web-programming-sendiri-panduan-otodidak-yang-efektif\/","url_meta":{"origin":4996,"position":3},"title":"Belajar Web Programming Sendiri: Panduan Otodidak Yang Efektif","author":"Monic","date":"2023-09-29","format":false,"excerpt":"Halo pembaca yang terhormat, bagaimana kabar Kamu? Kami berharap semuanya baik-baik saja di sana. Selamat datang di artikel kami yang akan membahas tentang belajar web programming sendiri. Jika Kamu tertarik untuk mempelajari web programming dan ingin melakukannya secara otodidak, Kamu telah datang ke tempat yang tepat! Di dalam panduan ini,\u2026","rel":"","context":"dalam &quot;Belajar PHP&quot;","block_context":{"text":"Belajar PHP","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/belajar-php\/"},"img":{"alt_text":"belajar web programming otodidak","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/programming-background-with-pers-2.jpg?fit=740%2C493&ssl=1%3Fv%3D1695973464&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/programming-background-with-pers-2.jpg?fit=740%2C493&ssl=1%3Fv%3D1695973464&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/programming-background-with-pers-2.jpg?fit=740%2C493&ssl=1%3Fv%3D1695973464&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/programming-background-with-pers-2.jpg?fit=740%2C493&ssl=1%3Fv%3D1695973464&resize=700%2C400 2x"},"classes":[]},{"id":7573,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/website\/berikut-cara-membuat-website-dengan-html-css-php\/","url_meta":{"origin":4996,"position":4},"title":"Berikut Cara Membuat Website Dengan HTML + CSS + PHP","author":"Monic","date":"2023-09-23","format":false,"excerpt":"Hello! Selamat datang di artikel ini. Bagaimana kabar kalian? Saya harap semuanya baik-baik saja. Pada kesempatan kali ini, kita akan membahas tentang cara membuat website dengan menggunakan HTML, CSS, dan PHP. Jika kalian memiliki minat dalam bidang pengembangan web, artikel ini sangat cocok untuk kalian. Yuk, mari kita lanjutkan membaca.\u2026","rel":"","context":"dalam &quot;Website&quot;","block_context":{"text":"Website","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/website\/"},"img":{"alt_text":"Berikut Cara Membuat Website Dengan HTML + CSS + PHP","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/internet-day-concept-illustratio.jpg?fit=740%2C493&ssl=1%3Fv%3D1695459778&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/internet-day-concept-illustratio.jpg?fit=740%2C493&ssl=1%3Fv%3D1695459778&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/internet-day-concept-illustratio.jpg?fit=740%2C493&ssl=1%3Fv%3D1695459778&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2023\/09\/internet-day-concept-illustratio.jpg?fit=740%2C493&ssl=1%3Fv%3D1695459778&resize=700%2C400 2x"},"classes":[]},{"id":8998,"url":"https:\/\/www.hostnic.id\/blog\/tutorial\/berikut-cara-membuat-form-input-data-dengan-html-dan-css\/","url_meta":{"origin":4996,"position":5},"title":"Berikut Cara Membuat Form Input Data Dengan HTML Dan CSS","author":"Monic","date":"2024-02-15","format":false,"excerpt":"Hostnic.id\u00a0\u2013\u00a0Halo, pembaca yang terhormat! Bagaimana kabar kalian? Selamat datang di artikel ini yang akan membahas tentang cara membuat form input data dengan HTML dan CSS. Form input data merupakan salah satu komponen penting dalam pengembangan website. Dengan menggunakan HTML dan CSS, kita dapat membuat form yang interaktif dan menarik secara\u2026","rel":"","context":"dalam &quot;Tutorial&quot;","block_context":{"text":"Tutorial","link":"https:\/\/www.hostnic.id\/blog\/.\/tutorial\/"},"img":{"alt_text":"Berikut Cara Membuat Form Input Data Dengan HTML Dan CSS","src":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/02\/BC.jpg?fit=1200%2C672&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/02\/BC.jpg?fit=1200%2C672&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/02\/BC.jpg?fit=1200%2C672&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/02\/BC.jpg?fit=1200%2C672&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.hostnic.id\/blog\/wp-content\/uploads\/2024\/02\/BC.jpg?fit=1200%2C672&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/4996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/comments?post=4996"}],"version-history":[{"count":1,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/4996\/revisions"}],"predecessor-version":[{"id":5000,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/posts\/4996\/revisions\/5000"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media\/4997"}],"wp:attachment":[{"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/media?parent=4996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/categories?post=4996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnic.id\/blog\/wp-json\/wp\/v2\/tags?post=4996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}