{"id":774,"date":"2025-07-31T02:14:59","date_gmt":"2025-07-30T19:14:59","guid":{"rendered":"https:\/\/www.linuxid.net\/istilah\/?p=774"},"modified":"2025-07-31T02:14:59","modified_gmt":"2025-07-30T19:14:59","slug":"css-cascading-style-sheets","status":"publish","type":"post","link":"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/","title":{"rendered":"CSS (cascading style sheets)"},"content":{"rendered":"

Apa itu Cascading Style Sheets (CSS)?<\/h2>\n

Cascading Style Sheets atau CSS adalah teknologi standar yang digunakan untuk mengatur tampilan halaman HTML<\/a>. CSS sering dianggap sebagai salah satu praktik terbaik dalam pengembangan antarmuka pengguna (UI) karena mengikuti prinsip desain separation of concerns<\/em>, yaitu memisahkan antara konten dan tampilan.<\/p>\n

Separation of Concerns<\/h2>\n

Sesuai dengan prinsip separation of concerns<\/em>, CSS menyediakan satu tempat terpusat untuk mengatur elemen-elemen tampilan seperti font<\/a>, warna teks, warna latar belakang, teks miring, atau teks yang ditebalkan untuk berbagai elemen HTML di dalam halaman web.<\/p>\n

CSS juga bisa digunakan untuk mengatur layout berbagai bagian halaman \u2014 seperti header, footer, isi utama, artikel, section, atau aside. Ini sangat berguna saat konten perlu ditampilkan secara berbeda, misalnya saat dibuka di desktop, tablet, atau smartphone.<\/p>\n

Sejarah CSS<\/h2>\n

Pada awal-awal kemunculan World Wide Web (WWW)<\/a>, file HTML sering berisi campuran antara konten, tag HTML, pengaturan tampilan, bahkan skrip JavaScript. Hal ini bikin halaman jadi susah dibaca, ditulis, dan dirawat.<\/p>\n

Seiring perkembangan web, muncullah praktik terbaik untuk memisahkan file HTML, JavaScript, dan CSS agar lebih mudah dikelola. Jadi, di era modern, halaman web umumnya dibangun dari tiga bagian utama: file HTML, file JavaScript, dan file CSS eksternal.<\/p>\n

Penerapan “Cascading” pada CSS<\/h2>\n

Istilah \u201ccascading\u201d pada CSS merujuk pada fakta bahwa style atau gaya bisa ditentukan di tiga level berbeda, atau disebut juga sebagai style levels<\/em>.<\/p>\n

Praktik terbaik adalah meletakkan semua style dalam file terpisah berekstensi .css. File ini dihubungkan ke HTML menggunakan tag <link><\/code>. Dalam satu halaman, kamu bisa pakai satu atau lebih file CSS eksternal menggunakan beberapa tag <link><\/code>.<\/p>\n

<link rel=”stylesheet” type=”text\/css” href=”https:\/\/www.theserverside.com\/definition\/what-is-css.css”><\/span><\/p>\n

Tapi, untuk proyek kecil atau jika kamu ingin menimpa (override) style tertentu dari CSS eksternal, kamu bisa menggunakan tag <style><\/code> di dalam file HTML \u2014 ini disebut internal style<\/em>. Style di level ini akan menimpa aturan dari file CSS eksternal.<\/p>\n

Inline vs. External Styles<\/h2>\n

Semua tag HTML5 juga punya properti style<\/code> yang bisa digunakan untuk menulis style langsung di dalam tag itu sendiri. Ini dikenal sebagai inline style<\/em>.<\/p>\n

Urutan prioritas style yang digunakan itulah yang disebut cascading \u2014 style di level tag (inline) akan menimpa style dari internal CSS, dan style internal akan menimpa style dari CSS eksternal.<\/p>\n

Sintaks CSS<\/h2>\n

Sintaks CSS cukup simpel. Pertama, kita sebut nama elemen atau selector<\/em>, lalu diikuti dengan kurung kurawal yang berisi atribut dan nilainya, seperti font-size<\/code> atau background-color<\/code>.<\/p>\n

Standar atribut CSS ini ditentukan oleh W3C (World Wide Web Consortium)<\/a>, meskipun kadang browser menambahkan atribut kustom mereka sendiri untuk fitur eksperimental yang belum resmi dirilis.<\/p>\n

Cara Kerja CSS Selector<\/h2>\n

CSS selector bisa berupa nama tag HTML, class, ID, atau bahkan state tertentu dari elemen \u2014 misalnya saat tombol dalam kondisi disabled<\/code> atau link sedang di-hover. Ini memberikan fleksibilitas yang besar bagi desainer untuk mengatur tampilan elemen sesuai kondisi atau kategori masing-masing.<\/p>\n

Dengan selector, tampilan halaman bisa disesuaikan secara dinamis, sehingga lebih interaktif dan responsif terhadap perilaku pengguna.<\/p>\n

Contoh HTML dan CSS<\/h2>\n

Berikut adalah contoh halaman HTML yang menggunakan internal style dan inline style secara bersamaan:<\/p>\n

\"Inline
<\/i>Gambar 1. Menggabungkan inline style dan internal style dalam satu file HTML<\/figcaption>
<\/div>\n<\/figure>\n

Kalau kamu perhatikan, teks yang tidak terkena style akan tampil standar \u2014 hitam di atas latar putih.<\/p>\n

\"The
<\/i>Gambar 2. Hasil render halaman HTML dengan CSS internal dan inline style<\/figcaption>
<\/div>\n<\/figure>\n

Desain Web Responsif<\/h2>\n

Teks dalam tag paragraf yang tidak punya inline style akan mengikuti aturan dari style internal, misalnya jadi biru, ukuran 14px, miring, dan punya background silver. Tapi kalau kita tambahkan inline style, maka properti tertentu bisa ditimpa \u2014 misalnya teks jadi putih, ukuran 20px, tapi tetap pakai background dan kemiringan dari style internal.<\/p>\n

Spesifikasi CSS dikelola oleh W3C, dan versi terbaru yang saat ini paling banyak dipakai adalah CSS versi 3.<\/p>\n","protected":false},"excerpt":{"rendered":"

Apa itu Cascading Style Sheets (CSS)? Cascading Style Sheets atau CSS adalah teknologi standar yang digunakan untuk mengatur tampilan halaman HTML. CSS sering dianggap sebagai salah satu praktik terbaik dalam pengembangan antarmuka pengguna (UI) karena mengikuti prinsip desain separation of concerns, yaitu memisahkan antara konten dan tampilan. Separation of Concerns Sesuai dengan prinsip separation of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[168,167],"class_list":["post-774","post","type-post","status-publish","format-standard","hentry","category-computer-science","tag-back-end-and-middle-tier-frameworks","tag-front-end"],"yoast_head":"\nApa itu CSS (cascading style sheets)? - Istilah Komputer<\/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.linuxid.net\/istilah\/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=\"Apa itu CSS (cascading style sheets)? - Istilah Komputer\" \/>\n<meta property=\"og:description\" content=\"Apa itu Cascading Style Sheets (CSS)? Cascading Style Sheets atau CSS adalah teknologi standar yang digunakan untuk mengatur tampilan halaman HTML. CSS sering dianggap sebagai salah satu praktik terbaik dalam pengembangan antarmuka pengguna (UI) karena mengikuti prinsip desain separation of concerns, yaitu memisahkan antara konten dan tampilan. Separation of Concerns Sesuai dengan prinsip separation of […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/\" \/>\n<meta property=\"og:site_name\" content=\"Istilah Komputer\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-30T19:14:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.theserverside.com\/rms\/editorial\/062918_CSS_definition_fig1_mobile.png\" \/>\n<meta name=\"author\" content=\"adhit\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"adhit\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/\",\"url\":\"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/\",\"name\":\"Apa itu CSS (cascading style sheets)? - Istilah Komputer\",\"isPartOf\":{\"@id\":\"https:\/\/linuxid.net\/istilah\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.theserverside.com\/rms\/editorial\/062918_CSS_definition_fig1_mobile.png\",\"datePublished\":\"2025-07-30T19:14:59+00:00\",\"author\":{\"@id\":\"https:\/\/linuxid.net\/istilah\/#\/schema\/person\/ec7c6c711087fb70886ff5a4fe68e83d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/#primaryimage\",\"url\":\"https:\/\/www.theserverside.com\/rms\/editorial\/062918_CSS_definition_fig1_mobile.png\",\"contentUrl\":\"https:\/\/www.theserverside.com\/rms\/editorial\/062918_CSS_definition_fig1_mobile.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/linuxid.net\/istilah\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS (cascading style sheets)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/linuxid.net\/istilah\/#website\",\"url\":\"https:\/\/linuxid.net\/istilah\/\",\"name\":\"Istilah Komputer\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/linuxid.net\/istilah\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/linuxid.net\/istilah\/#\/schema\/person\/ec7c6c711087fb70886ff5a4fe68e83d\",\"name\":\"adhit\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/linuxid.net\/istilah\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.linuxid.net\/istilah\/wp-content\/litespeed\/avatar\/808829c8eb1b70c161b392916104c2ba.jpg?ver=1777193465\",\"contentUrl\":\"https:\/\/www.linuxid.net\/istilah\/wp-content\/litespeed\/avatar\/808829c8eb1b70c161b392916104c2ba.jpg?ver=1777193465\",\"caption\":\"adhit\"},\"sameAs\":[\"https:\/\/linuxid.net\/istilah\"],\"url\":\"https:\/\/www.linuxid.net\/istilah\/author\/xsandradietsax\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Apa itu CSS (cascading style sheets)? - Istilah Komputer","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.linuxid.net\/istilah\/css-cascading-style-sheets\/","og_locale":"id_ID","og_type":"article","og_title":"Apa itu CSS (cascading style sheets)? - Istilah Komputer","og_description":"Apa itu Cascading Style Sheets (CSS)? Cascading Style Sheets atau CSS adalah teknologi standar yang digunakan untuk mengatur tampilan halaman HTML. CSS sering dianggap sebagai salah satu praktik terbaik dalam pengembangan antarmuka pengguna (UI) karena mengikuti prinsip desain separation of concerns, yaitu memisahkan antara konten dan tampilan. Separation of Concerns Sesuai dengan prinsip separation of […]","og_url":"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/","og_site_name":"Istilah Komputer","article_published_time":"2025-07-30T19:14:59+00:00","og_image":[{"url":"https:\/\/www.theserverside.com\/rms\/editorial\/062918_CSS_definition_fig1_mobile.png","type":"","width":"","height":""}],"author":"adhit","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"adhit","Estimasi waktu membaca":"3 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/","url":"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/","name":"Apa itu CSS (cascading style sheets)? - Istilah Komputer","isPartOf":{"@id":"https:\/\/linuxid.net\/istilah\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/#primaryimage"},"image":{"@id":"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/#primaryimage"},"thumbnailUrl":"https:\/\/www.theserverside.com\/rms\/editorial\/062918_CSS_definition_fig1_mobile.png","datePublished":"2025-07-30T19:14:59+00:00","author":{"@id":"https:\/\/linuxid.net\/istilah\/#\/schema\/person\/ec7c6c711087fb70886ff5a4fe68e83d"},"breadcrumb":{"@id":"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/"]}]},{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/#primaryimage","url":"https:\/\/www.theserverside.com\/rms\/editorial\/062918_CSS_definition_fig1_mobile.png","contentUrl":"https:\/\/www.theserverside.com\/rms\/editorial\/062918_CSS_definition_fig1_mobile.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.linuxid.net\/istilah\/css-cascading-style-sheets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/linuxid.net\/istilah\/"},{"@type":"ListItem","position":2,"name":"CSS (cascading style sheets)"}]},{"@type":"WebSite","@id":"https:\/\/linuxid.net\/istilah\/#website","url":"https:\/\/linuxid.net\/istilah\/","name":"Istilah Komputer","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/linuxid.net\/istilah\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Person","@id":"https:\/\/linuxid.net\/istilah\/#\/schema\/person\/ec7c6c711087fb70886ff5a4fe68e83d","name":"adhit","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/linuxid.net\/istilah\/#\/schema\/person\/image\/","url":"https:\/\/www.linuxid.net\/istilah\/wp-content\/litespeed\/avatar\/808829c8eb1b70c161b392916104c2ba.jpg?ver=1777193465","contentUrl":"https:\/\/www.linuxid.net\/istilah\/wp-content\/litespeed\/avatar\/808829c8eb1b70c161b392916104c2ba.jpg?ver=1777193465","caption":"adhit"},"sameAs":["https:\/\/linuxid.net\/istilah"],"url":"https:\/\/www.linuxid.net\/istilah\/author\/xsandradietsax\/"}]}},"_links":{"self":[{"href":"https:\/\/www.linuxid.net\/istilah\/wp-json\/wp\/v2\/posts\/774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.linuxid.net\/istilah\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.linuxid.net\/istilah\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.linuxid.net\/istilah\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.linuxid.net\/istilah\/wp-json\/wp\/v2\/comments?post=774"}],"version-history":[{"count":1,"href":"https:\/\/www.linuxid.net\/istilah\/wp-json\/wp\/v2\/posts\/774\/revisions"}],"predecessor-version":[{"id":6126,"href":"https:\/\/www.linuxid.net\/istilah\/wp-json\/wp\/v2\/posts\/774\/revisions\/6126"}],"wp:attachment":[{"href":"https:\/\/www.linuxid.net\/istilah\/wp-json\/wp\/v2\/media?parent=774"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.linuxid.net\/istilah\/wp-json\/wp\/v2\/categories?post=774"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.linuxid.net\/istilah\/wp-json\/wp\/v2\/tags?post=774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}