{"id":40054,"date":"2026-02-04T01:01:50","date_gmt":"2026-02-03T17:01:50","guid":{"rendered":"https:\/\/www.ematicsolutions.com\/?p=40054"},"modified":"2026-02-04T01:01:52","modified_gmt":"2026-02-03T17:01:52","slug":"apa-itu-css","status":"publish","type":"post","link":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/","title":{"rendered":"Apa Itu CSS? Pahami Pengertian, Fungsi, dan Jenisnya"},"content":{"rendered":"\n<p>Pernahkah Anda bertanya-tanya mengapa setiap website yang Anda kunjungi memiliki tampilan yang menarik dan berbeda-beda? Ada yang menggunakan warna-warna cerah, ada yang minimalis elegan, dan ada pula yang penuh dengan animasi interaktif. Di balik semua keunikan tampilan website tersebut, ada satu teknologi penting yang bekerja, yaitu <strong>CSS<\/strong>.<\/p>\n\n\n\n<p>Bayangkan jika semua website di internet hanya menampilkan teks hitam di sebuah latar putih tanpa desain sama sekali, pasti membosankan, bukan? <em>Nah<\/em>, CSS inilah yang berperan mengubah website polos menjadi website dengan desain yang menarik dan nyaman dipandang.<\/p>\n\n\n\n<p>Baik Anda seorang pemula yang baru mulai belajar <em>web development<\/em> atau profesional yang ingin memperdalam pengetahuan, memahami CSS adalah langkah dasar yang tidak terlewat.<\/p>\n\n\n\n<p>Dalam artikel ini, kita akan membahas secara lengkap tentang apa itu CSS, fungsi-fungsinya dalam pengembangan website, serta jenis-jenis CSS yang perlu Anda ketahui. <em>Yuk<\/em>, simak sampai selesai!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Pengertian CSS<\/strong><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1000\" height=\"667\" src=\"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Definisi-CSS.webp\" alt=\"Memahami pengertian CSS (Cascading Style Sheets).\" class=\"wp-image-40055\" srcset=\"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Definisi-CSS.webp 1000w, https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Definisi-CSS-300x200.webp 300w, https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Definisi-CSS-768x512.webp 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><figcaption class=\"wp-element-caption\">Sumber Gambar: Freepik<\/figcaption><\/figure><\/div>\n\n\n<p><strong>CSS adalah singkatan dari <em>Cascading Style Sheets<\/em>,<\/strong> yaitu bahasa pemrograman yang digunakan untuk mengatur tampilan dan format elemen-elemen pada halaman web. Jika HTML (<em>HyperText Markup Language<\/em>) berfungsi sebagai kerangka atau struktur dari sebuah website, maka CSS berperan sebagai <em>&#8220;designer&#8221;<\/em> yang mempercantik tampilan struktur tersebut.<\/p>\n\n\n\n<p>Secara sederhana, CSS memungkinkan <em>developer<\/em> untuk mengontrol berbagai aspek visual dari website, mulai dari warna teks, ukuran <em>font<\/em>, jarak antar elemen, tata letak halaman, hingga efek animasi. Dengan CSS, Anda bisa membuat satu halaman HTML tampil dengan berbagai gaya berbeda tanpa harus mengubah struktur HTML-nya.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Sejarah Singkat CSS<\/strong><\/h3>\n\n\n\n<p>CSS pertama kali diperkenalkan oleh H\u00e5kon Wium Lie pada tahun 1994 dan menjadi standar resmi <em>World Wide Web Consortium<\/em> (W3C) pada tahun 1996 dengan peluncuran CSS1. Sejak saat itu, CSS terus berkembang dengan versi-versi baru yang menghadirkan fitur lebih canggih. Saat ini, CSS3 adalah versi yang paling banyak digunakan, menawarkan kemampuan seperti gradien warna, transformasi, transisi, dan animasi yang membuat website modern terlihat lebih dinamis dan interaktif.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mengapa CSS Penting?<\/strong><\/h3>\n\n\n\n<p>Tanpa CSS, semua website akan terlihat sama, hanya kumpulan teks dan gambar tanpa desain khas. CSS memberikan kebebasan kepada <em>web developer<\/em> dan <em>designer<\/em> untuk:<\/p>\n\n\n\n<ul>\n<li>Membuat identitas visual yang unik untuk setiap website<\/li>\n\n\n\n<li>Meningkatkan pengalaman pengguna (<em>user experience<\/em>) melalui desain yang intuitif<\/li>\n\n\n\n<li>Memastikan konsistensi tampilan di berbagai perangkat dan ukuran layar<\/li>\n\n\n\n<li>Memisahkan konten (HTML) dari presentasi (CSS), sehingga kode lebih terorganisir dan mudah dipelihara<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Baca juga:<\/strong> <a href=\"https:\/\/www.ematicsolutions.com\/id\/ui-vs-ux\/\">Perbedaan <em>User Interface<\/em> (UI) dan <em>User Experience<\/em> (UX)<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Fungsi CSS<\/strong><\/h2>\n\n\n\n<p>CSS memiliki berbagai fungsi penting yang menjadikannya komponen vital dalam pengembangan website modern. Berikut adalah fungsi-fungsi utama CSS yang perlu Anda ketahui:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Mengatur Tampilan Visual Website<\/h3>\n\n\n\n<p>Fungsi utama CSS adalah mengontrol seluruh aspek visual dari elemen HTML. Dengan CSS, Anda dapat menentukan warna <em>background<\/em>, warna teks, jenis <em>font<\/em>, ukuran huruf, ketebalan teks, dan masih banyak lagi.<\/p>\n\n\n\n<p>Misalnya, Anda bisa membuat judul dengan warna biru, <em>font<\/em> tebal, dan ukuran 24 <em>pixel<\/em> hanya dengan beberapa baris kode CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Mengatur Tata Letak (<em>Layout<\/em>) Halaman<\/h3>\n\n\n\n<p>CSS memungkinkan <em>developer<\/em> untuk mengatur posisi dan tata letak elemen-elemen di halaman web. Anda bisa membuat kolom-kolom, <em>grid layout<\/em>, <em>flexbox<\/em>, atau mengatur <em>margin<\/em> dan <em>padding<\/em> untuk menciptakan ruang yang tepat antar elemen. Dengan CSS, Anda memiliki kontrol penuh terhadap bagaimana konten ditampilkan di layar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Menciptakan <em>Responsive Design<\/em><\/h3>\n\n\n\n<p>Di era <em>mobile-first<\/em> ini, website harus tampil sempurna di berbagai perangkat, mulai dari <em>smartphone<\/em>, tablet, hingga desktop. CSS menyediakan fitur <strong><em>media queries<\/em><\/strong> yang memungkinkan website menyesuaikan tampilannya berdasarkan ukuran layar perangkat yang digunakan. Ini memastikan pengalaman pengguna yang optimal di semua platform.<\/p>\n\n\n\n<p><strong>Baca juga: <\/strong><a href=\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-responsive-design\/\">Pengertian dan <em>Best Practice Responsive Design<\/em><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Meningkatkan Efisiensi Kode<\/h3>\n\n\n\n<p>Dengan CSS, Anda tidak perlu menulis <em>styling code<\/em> berulang-ulang untuk setiap elemen HTML. Anda bisa membuat satu aturan CSS yang berlaku untuk banyak elemen sekaligus. Ini membuat kode lebih ringkas, mudah dibaca, dan lebih efisien untuk dipelihara.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Menambahkan Animasi dan Efek Interaktif<\/h3>\n\n\n\n<p>CSS3 memperkenalkan kemampuan untuk membuat animasi dan transisi tanpa perlu menggunakan JavaScript. Anda bisa menambahkan efek <em>hover<\/em> pada tombol, animasi <em>loading<\/em>, <em>smooth transition<\/em> saat berpindah halaman, dan berbagai efek visual menarik lainnya yang meningkatkan interaktivitas website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Memisahkan Konten dari Presentasi<\/h3>\n\n\n\n<p>Salah satu prinsip terbaik dalam <em>web development<\/em> adalah pemisahan antara konten (HTML) dan presentasi (CSS). Ini membuat website lebih mudah dikelola karena perubahan desain dapat dilakukan tanpa menyentuh struktur HTML. Developer konten dan desainer bisa bekerja secara paralel tanpa saling mengganggu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Meningkatkan Kecepatan <em>Loading Website<\/em><\/h3>\n\n\n\n<p>File CSS eksternal dapat di-<em>cache<\/em> oleh browser, sehingga ketika pengunjung membuka halaman lain di website yang sama, browser tidak perlu mengunduh file CSS lagi. Ini mempercepat waktu loading dan meningkatkan performa website secara keseluruhan.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Jenis CSS<\/strong><\/h2>\n\n\n\n<p>CSS dapat diterapkan ke dalam halaman HTML dengan tiga cara berbeda, masing-masing memiliki karakteristik dan kegunaan tersendiri. Berikut adalah jenis-jenis CSS yang perlu Anda pahami:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. <em>Inline CSS<\/em><\/strong><\/h3>\n\n\n\n<p><em>Inline CSS<\/em> adalah metode penulisan CSS langsung di dalam <em>tag<\/em> HTML menggunakan atribut <em>style<\/em>. Metode ini menerapkan <em>styling<\/em> hanya untuk satu elemen spesifik di mana CSS tersebut ditulis.<\/p>\n\n\n\n<p><strong>Contoh:<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>&lt;p style=&#8221;color: blue; font-size: 16px;&#8221;>Ini adalah teks dengan inline CSS.&lt;\/p><\/em><\/p>\n<\/blockquote>\n\n\n\n<p><strong>Kelebihan:<\/strong><\/p>\n\n\n\n<ul>\n<li>Sangat spesifik dan memiliki prioritas tertinggi<\/li>\n\n\n\n<li>Berguna untuk <em>styling<\/em> cepat pada elemen individual<\/li>\n\n\n\n<li>Cocok untuk <em>testing<\/em> atau eksperimen cepat<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Kekurangan:<\/strong><\/p>\n\n\n\n<ul>\n<li>Membuat kode HTML menjadi berantakan dan sulit dibaca<\/li>\n\n\n\n<li>Tidak efisien karena harus ditulis berulang untuk setiap elemen<\/li>\n\n\n\n<li>Sulit untuk dipelihara dalam proyek besar<\/li>\n\n\n\n<li>Melanggar prinsip pemisahan konten dan presentasi<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. <em>Internal CSS (Embedded CSS)<\/em><\/strong><\/h3>\n\n\n\n<p><em>Internal CSS<\/em> ditulis di dalam <em>tag &lt;style><\/em> yang ditempatkan di bagian <em>&lt;head><\/em> dari dokumen HTML. CSS jenis ini berlaku untuk seluruh halaman HTML tempat ia ditulis.<\/p>\n\n\n\n<p><strong>Contoh:<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>&lt;!DOCTYPE html&gt;<\/p>\n\n\n\n<p>&lt;html&gt;<\/p>\n\n\n\n<p>&lt;head&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #f0f0f0;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h1 {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: navy;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: Arial, sans-serif;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;p {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 14px;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height: 1.6;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/style&gt;<\/p>\n\n\n\n<p>&lt;\/head&gt;<\/p>\n\n\n\n<p>&lt;body&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Judul Artikel&lt;\/h1&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Ini adalah paragraf dengan internal CSS.&lt;\/p&gt;<\/p>\n\n\n\n<p>&lt;\/body&gt;<\/p>\n\n\n\n<p>&lt;\/html&gt;<\/p>\n<\/blockquote>\n\n\n\n<p><strong>Kelebihan:<\/strong><\/p>\n\n\n\n<ul>\n<li>Lebih terorganisir dibanding <em>inline CSS<\/em><\/li>\n\n\n\n<li>Cocok untuk halaman tunggal dengan <em>styling<\/em> unik<\/li>\n\n\n\n<li>Tidak memerlukan file eksternal tambahan<\/li>\n\n\n\n<li>Mudah untuk testing dan <em>prototyping<\/em><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Kekurangan:<\/strong><\/p>\n\n\n\n<ul>\n<li>Hanya berlaku untuk satu halaman HTML<\/li>\n\n\n\n<li>Membuat <em>file<\/em> HTML menjadi lebih besar<\/li>\n\n\n\n<li>Tidak efisien untuk website dengan banyak halaman<\/li>\n\n\n\n<li>Kode CSS tidak dapat di-<em>reuse<\/em> di halaman lain<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. <em>External CSS<\/em><\/strong><\/h3>\n\n\n\n<p><em>External CSS<\/em> adalah metode penulisan CSS dalam file terpisah dengan ekstensi <strong>.css<\/strong>, kemudian dihubungkan ke dokumen HTML menggunakan <em>tag &lt;link><\/em>. Ini adalah metode yang paling direkomendasikan untuk proyek web profesional.<\/p>\n\n\n\n<p><strong>Contoh:<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>File CSS (styles.css):<\/p>\n\n\n\n<p>body {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;margin: 0;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;padding: 0;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;font-family: &#8216;Segoe UI&#8217;, Tahoma, Geneva, Verdana, sans-serif;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>header {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;background-color: #333;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;color: white;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;padding: 20px;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.container {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;max-width: 1200px;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;margin: 0 auto;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;padding: 20px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>File HTML:<\/p>\n\n\n\n<p>&lt;!DOCTYPE html&gt;<\/p>\n\n\n\n<p>&lt;html&gt;<\/p>\n\n\n\n<p>&lt;head&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;styles.css&#8221;&gt;<\/p>\n\n\n\n<p>&lt;\/head&gt;<\/p>\n\n\n\n<p>&lt;body&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Website Saya&lt;\/h1&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/header&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&#8221;container&#8221;&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Konten website menggunakan external CSS.&lt;\/p&gt;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;<\/p>\n\n\n\n<p>&lt;\/body&gt;<\/p>\n\n\n\n<p>&lt;\/html><\/p>\n<\/blockquote>\n\n\n\n<p><strong>Kelebihan:<\/strong><\/p>\n\n\n\n<ul>\n<li>Kode lebih bersih dan terorganisir dengan baik<\/li>\n\n\n\n<li>Satu <em>file<\/em> CSS dapat digunakan untuk banyak halaman HTML<\/li>\n\n\n\n<li>Memudahkan <em>maintenance<\/em> dan <em>update<\/em> desain<\/li>\n\n\n\n<li>File CSS dapat di-<em>cache<\/em> oleh <em>browser<\/em> untuk performa lebih baik<\/li>\n\n\n\n<li>Mendukung kolaborasi tim yang lebih efektif<\/li>\n\n\n\n<li>Mengikuti <em>best practice<\/em> dalam <em>web development<\/em><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Kekurangan:<\/strong><\/p>\n\n\n\n<ul>\n<li>Memerlukan HTTP request tambahan (meskipun minimal)<\/li>\n\n\n\n<li>Halaman mungkin tampil tanpa <em>styling<\/em> sejenak saat <em>loading<\/em> jika koneksi lambat<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Mana yang Sebaiknya Digunakan?<\/strong><\/h2>\n\n\n\n<p>Untuk proyek web profesional, <em>External CSS<\/em> adalah pilihan terbaik karena memberikan skalabilitas, kemudahan <em>maintenance<\/em>, dan performa optimal. <em>Inline CSS<\/em> dan <em>Internal CSS<\/em> sebaiknya hanya digunakan dalam situasi khusus seperti email HTML (<em>inline CSS<\/em>) atau halaman <em>standalone<\/em> yang sangat unik (<em>internal CSS<\/em>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Kesimpulan<\/strong><\/h2>\n\n\n\n<p>CSS adalah teknologi dasar dalam <em>web development<\/em> modern yang memungkinkan kita untuk menciptakan tampilan visual yang menarik, responsif, dan profesional. Dengan memahami pengertian CSS sebagai bahasa <em>styling<\/em> untuk web, fungsi-fungsinya dalam mengatur tampilan dan <em>layout<\/em>, serta jenis-jenis penerapannya (<em>inline<\/em>, <em>internal<\/em>, dan <em>external<\/em>), Anda telah memiliki fondasi yang kuat untuk mulai atau mengembangkan <em>skill web development<\/em> Anda.<\/p>\n\n\n\n<p>Menguasai CSS bukan hanya tentang membuat website terlihat cantik, tetapi juga tentang menciptakan pengalaman pengguna yang optimal, meningkatkan performa website, dan menulis kode yang efisien dan mudah dipelihara. Semakin dalam Anda mempelajari CSS, semakin banyak kemungkinan kreatif yang bisa Anda eksplorasi untuk mewujudkan ide desain Anda.<\/p>\n\n\n\n<p>Jika Anda masih merasa sulit untuk membuat website mandiri, Ematic Solution siap membantu Anda melalui <a href=\"https:\/\/www.ematicsolutions.com\/id\/jasa-pembuatan-website-dan-desain-ui-ux\/\">jasa pembuatan website<\/a> kami. <em>Yuk<\/em>, konsultasikan kebutuhan Anda!<\/p>\n\n\n\n<p><strong>Ditulis oleh:<\/strong> <strong>Lusya Anggraeny, Project Manager<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pelajari pengertian CSS, fungsi utamanya dalam web development, dan 3 jenis CSS (inline, internal, external). Panduan lengkap untuk pemula!<\/p>\n","protected":false},"author":114,"featured_media":40058,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[168],"tags":[1944,1942],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Apa Itu CSS? Pahami Pengertian, Fungsi, dan Jenisnya - Ematic Solutions<\/title>\n<meta name=\"description\" content=\"Pelajari pengertian CSS, fungsi utamanya dalam web development, dan 3 jenis CSS (inline, internal, external). Panduan lengkap untuk pemula!\" \/>\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.ematicsolutions.com\/id\/apa-itu-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apa Itu CSS? Pahami Pengertian, Fungsi, dan Jenisnya - Ematic Solutions\" \/>\n<meta property=\"og:description\" content=\"Pelajari pengertian CSS, fungsi utamanya dalam web development, dan 3 jenis CSS (inline, internal, external). Panduan lengkap untuk pemula!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ematic Solutions\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-03T17:01:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-03T17:01:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Artikel_Apa-Itu-CSS.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"884\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Karina Agustina\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Karina Agustina\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/\"},\"author\":{\"name\":\"Karina Agustina\",\"@id\":\"https:\/\/www.ematicsolutions.com\/#\/schema\/person\/3bd0c36a898a7b704530db75f3b492f5\"},\"headline\":\"Apa Itu CSS? Pahami Pengertian, Fungsi, dan Jenisnya\",\"datePublished\":\"2026-02-03T17:01:50+00:00\",\"dateModified\":\"2026-02-03T17:01:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/\"},\"wordCount\":1563,\"publisher\":{\"@id\":\"https:\/\/www.ematicsolutions.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Artikel_Apa-Itu-CSS.webp\",\"keywords\":[\"Marketing Technology\",\"Website Development\"],\"articleSection\":[\"Indonesia\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/\",\"url\":\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/\",\"name\":\"Apa Itu CSS? Pahami Pengertian, Fungsi, dan Jenisnya - Ematic Solutions\",\"isPartOf\":{\"@id\":\"https:\/\/www.ematicsolutions.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Artikel_Apa-Itu-CSS.webp\",\"datePublished\":\"2026-02-03T17:01:50+00:00\",\"dateModified\":\"2026-02-03T17:01:52+00:00\",\"description\":\"Pelajari pengertian CSS, fungsi utamanya dalam web development, dan 3 jenis CSS (inline, internal, external). Panduan lengkap untuk pemula!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#primaryimage\",\"url\":\"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Artikel_Apa-Itu-CSS.webp\",\"contentUrl\":\"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Artikel_Apa-Itu-CSS.webp\",\"width\":1536,\"height\":884},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.ematicsolutions.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Apa Itu CSS? Pahami Pengertian, Fungsi, dan Jenisnya\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.ematicsolutions.com\/#website\",\"url\":\"https:\/\/www.ematicsolutions.com\/\",\"name\":\"Ematic Solutions\",\"description\":\"Marketing Technology Solutions\",\"publisher\":{\"@id\":\"https:\/\/www.ematicsolutions.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.ematicsolutions.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.ematicsolutions.com\/#organization\",\"name\":\"Ematic Solutions\",\"url\":\"https:\/\/www.ematicsolutions.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ematicsolutions.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2021\/09\/ematicsolutions-newlogo-202106.svg\",\"contentUrl\":\"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2021\/09\/ematicsolutions-newlogo-202106.svg\",\"width\":3996,\"height\":1372,\"caption\":\"Ematic Solutions\"},\"image\":{\"@id\":\"https:\/\/www.ematicsolutions.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.ematicsolutions.com\/#\/schema\/person\/3bd0c36a898a7b704530db75f3b492f5\",\"name\":\"Karina Agustina\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.ematicsolutions.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/104543e1a11c2ac480bd0a814ef1f3cc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/104543e1a11c2ac480bd0a814ef1f3cc?s=96&d=mm&r=g\",\"caption\":\"Karina Agustina\"},\"url\":\"https:\/\/www.ematicsolutions.com\/author\/karina-agustina\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Apa Itu CSS? Pahami Pengertian, Fungsi, dan Jenisnya - Ematic Solutions","description":"Pelajari pengertian CSS, fungsi utamanya dalam web development, dan 3 jenis CSS (inline, internal, external). Panduan lengkap untuk pemula!","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.ematicsolutions.com\/id\/apa-itu-css\/","og_locale":"en_US","og_type":"article","og_title":"Apa Itu CSS? Pahami Pengertian, Fungsi, dan Jenisnya - Ematic Solutions","og_description":"Pelajari pengertian CSS, fungsi utamanya dalam web development, dan 3 jenis CSS (inline, internal, external). Panduan lengkap untuk pemula!","og_url":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/","og_site_name":"Ematic Solutions","article_published_time":"2026-02-03T17:01:50+00:00","article_modified_time":"2026-02-03T17:01:52+00:00","og_image":[{"width":1536,"height":884,"url":"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Artikel_Apa-Itu-CSS.webp","type":"image\/webp"}],"author":"Karina Agustina","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Karina Agustina","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#article","isPartOf":{"@id":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/"},"author":{"name":"Karina Agustina","@id":"https:\/\/www.ematicsolutions.com\/#\/schema\/person\/3bd0c36a898a7b704530db75f3b492f5"},"headline":"Apa Itu CSS? Pahami Pengertian, Fungsi, dan Jenisnya","datePublished":"2026-02-03T17:01:50+00:00","dateModified":"2026-02-03T17:01:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/"},"wordCount":1563,"publisher":{"@id":"https:\/\/www.ematicsolutions.com\/#organization"},"image":{"@id":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Artikel_Apa-Itu-CSS.webp","keywords":["Marketing Technology","Website Development"],"articleSection":["Indonesia"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/","url":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/","name":"Apa Itu CSS? Pahami Pengertian, Fungsi, dan Jenisnya - Ematic Solutions","isPartOf":{"@id":"https:\/\/www.ematicsolutions.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#primaryimage"},"image":{"@id":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Artikel_Apa-Itu-CSS.webp","datePublished":"2026-02-03T17:01:50+00:00","dateModified":"2026-02-03T17:01:52+00:00","description":"Pelajari pengertian CSS, fungsi utamanya dalam web development, dan 3 jenis CSS (inline, internal, external). Panduan lengkap untuk pemula!","breadcrumb":{"@id":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#primaryimage","url":"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Artikel_Apa-Itu-CSS.webp","contentUrl":"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2026\/02\/Artikel_Apa-Itu-CSS.webp","width":1536,"height":884},{"@type":"BreadcrumbList","@id":"https:\/\/www.ematicsolutions.com\/id\/apa-itu-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.ematicsolutions.com\/"},{"@type":"ListItem","position":2,"name":"Apa Itu CSS? Pahami Pengertian, Fungsi, dan Jenisnya"}]},{"@type":"WebSite","@id":"https:\/\/www.ematicsolutions.com\/#website","url":"https:\/\/www.ematicsolutions.com\/","name":"Ematic Solutions","description":"Marketing Technology Solutions","publisher":{"@id":"https:\/\/www.ematicsolutions.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.ematicsolutions.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.ematicsolutions.com\/#organization","name":"Ematic Solutions","url":"https:\/\/www.ematicsolutions.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ematicsolutions.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2021\/09\/ematicsolutions-newlogo-202106.svg","contentUrl":"https:\/\/www.ematicsolutions.com\/wp-content\/uploads\/2021\/09\/ematicsolutions-newlogo-202106.svg","width":3996,"height":1372,"caption":"Ematic Solutions"},"image":{"@id":"https:\/\/www.ematicsolutions.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.ematicsolutions.com\/#\/schema\/person\/3bd0c36a898a7b704530db75f3b492f5","name":"Karina Agustina","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.ematicsolutions.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/104543e1a11c2ac480bd0a814ef1f3cc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/104543e1a11c2ac480bd0a814ef1f3cc?s=96&d=mm&r=g","caption":"Karina Agustina"},"url":"https:\/\/www.ematicsolutions.com\/author\/karina-agustina\/"}]}},"lang":"id","translations":{"id":40054},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.ematicsolutions.com\/wp-json\/wp\/v2\/posts\/40054"}],"collection":[{"href":"https:\/\/www.ematicsolutions.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ematicsolutions.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ematicsolutions.com\/wp-json\/wp\/v2\/users\/114"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ematicsolutions.com\/wp-json\/wp\/v2\/comments?post=40054"}],"version-history":[{"count":7,"href":"https:\/\/www.ematicsolutions.com\/wp-json\/wp\/v2\/posts\/40054\/revisions"}],"predecessor-version":[{"id":40063,"href":"https:\/\/www.ematicsolutions.com\/wp-json\/wp\/v2\/posts\/40054\/revisions\/40063"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ematicsolutions.com\/wp-json\/wp\/v2\/media\/40058"}],"wp:attachment":[{"href":"https:\/\/www.ematicsolutions.com\/wp-json\/wp\/v2\/media?parent=40054"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ematicsolutions.com\/wp-json\/wp\/v2\/categories?post=40054"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ematicsolutions.com\/wp-json\/wp\/v2\/tags?post=40054"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}