{"id":7570,"date":"2019-02-07T04:11:47","date_gmt":"2019-02-07T04:11:47","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=7570"},"modified":"2025-12-18T23:26:11","modified_gmt":"2025-12-18T16:26:11","slug":"apa-itu-css","status":"publish","type":"post","link":"\/id\/tutorial\/apa-itu-css","title":{"rendered":"Apa itu CSS? Pengertian, fungsi, dan cara kerjanya"},"content":{"rendered":"

Cascading Style Sheets atau CSS adalah bahasa pemrograman berbasis aturan yang dikembangkan oleh World Wide Web Consortium (W3C) pada tahun 1996. CSS dikembangkan karena HTML yang berfungsi untuk memformat halaman web tidak bisa menambahkan gaya atau tata letak tingkat lanjut.<\/p>

Misalnya, pada HTML versi 3.2, sudah diperkenalkan tag <font><\/strong> agar gaya teks bisa diubah. Namun, web designer amatir menyalahgunakannya dan tidak ada opsi fallback seperti yang sekarang tersedia di CSS. Jadi, pilihan terbaiknya adalah tetap memisahkan pemformatan (HTML) dan penataan gaya (CSS).<\/p>

CSS secara teknis memang bukan elemen wajib, tapi halaman web yang hanya menampilkan elemen HTML akan terlihat sangat kosong dan tidak modern. Penasaran tentang CSS? Yuk lanjutkan membaca artikel ini!<\/p>

Download CSS Cheat Sheet<\/a><\/p>

\n\n\n\n\n\n

\n

Apa Itu CSS?<\/h2>\n

CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa kode yang digunakan untuk menambahkan gaya pada elemen yang ditulis dalam bahasa markup seperti HTML. CSS berfungsi untuk membedakan desain visual website dari tampilan konten. HTML mengatur sususnan konten website, sedangkan CSS mengatur desain visual dan estetikanya.<\/p>\n <\/div>\n\n\n\n<\/p>

Kelebihan CSS<\/h2>

Mudah bagi Anda untuk mengetahui mana website yang menggunakan CSS dan mana yang tidak.<\/span><\/p>

Anda pasti pernah membuka website, tapi sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS pada situs tersebut tidak dapat di-load dengan benar atau situs sama sekali tidak memiliki CSS. Umumnya, situs seperti ini hanya menerapkan HTML.<\/span><\/p>

Sebelum menggunakan CSS, semua <\/span>stylizing <\/span><\/i>harus disertakan ke dalam markup HTML. Itu berati Anda harus mendeskripsikan semua background, warna font, <\/span>alignment<\/span><\/i>, dan lain-lain secara terpisah.<\/span><\/p>

Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan <\/span>style<\/span><\/i>, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-<\/span>maintain<\/span><\/i>.<\/span><\/p>

Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir.<\/span><\/p>

Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai macam <\/span>style <\/span><\/i>pada satu halaman HTML. <\/span><\/p>

Cara Kerja CSS<\/h2>

CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan <\/span>rule<\/span><\/i> yang mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen <\/span>style<\/span><\/i>, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh: <\/span><p>This is a paragraph.<\/p>.<\/b><\/p>

Satu yang menjadi pertanyaannya sekarang, bagaimana caranya <\/span>style <\/span><\/i>paragraf? Struktur syntax CSS cukup sederhana. Struktur ini memiliki <\/span>selector<\/span><\/i> dan <\/span>declaration block<\/span><\/i>. Pilih elemen yang diinginkan, kemudian deklarasi (<\/span>declare) <\/span><\/i>yang harus Anda lakukan terhadap elemen tersebut. Sangat mudah, kan?<\/span><\/p>

Ada berbagai <\/span>rule<\/span><\/i> yang harus diingat. Meskipun demikian, <\/span>rule<\/span><\/i> struktur cukup simpel dan sederhana.<\/span><\/p>

Selector<\/span><\/i> mengarah ke elemen HTML yang ingin Anda ubah tampilannya. <\/span>Declaration block<\/span><\/i> memuat satu atau lebih banyak deklarasi (<\/span>declaration<\/span><\/i>) yang dipisahkan dengan tanda titik koma. <\/span><\/p>

Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.<\/span><\/p>

Mari kita lihat contoh di bawah ini:<\/span><\/p>

Semua elemen <\/span><p><\/b> ditandai dengan warna biru dan hurufnya ditebalkan (<\/span>bold<\/span><\/i>).<\/span><\/p>

p {\n color: blue;\n font-weight: bold;\n}<\/pre>
Contoh lain, semua elemen <\/span><p><\/b> diposisikan di tengah (center-aligned), dengan lebar 16x, dan berwarna pink.<\/span><\/p>
p {\n   text-align: center;\n   font-size: 16px;\n   color: pink;\n}<\/pre>
Selanjutnya, mari kita bahas beberapa style CSS, yaitu Inline, External, dan Internal.<\/span><\/p>
CSS Style Internal, External, dan Inline<\/h2>
Kami akan membahas masing-masing CSS Style secara singkat. Untuk informasi atau pembahasan yang lebih mendalam, kami menyertakan link di bawah ikhtisar.<\/span><\/p>
CSS Style <\/span>Internal<\/b> diload setiap kali website di-<\/span>refresh<\/span><\/i>, dan kekurangannya adalah waktu loading semakin lama. CSS style yang sama pun tidak dapat digunakan di halaman lain karena sudah aktif terlebih dulu di suatu halaman.<\/span><\/p>
Namun di balik kekurangannya, CSS Style Internal memiliki beberapa kelebihan. Salah satunya adalah kemudahan dalam <\/span>sharing<\/span><\/i> template untuk pratinjau (<\/span>preview<\/span><\/i>) karena CSS hanya ada di satu halaman.<\/span><\/p>
External<\/b> merupakan CSS style yang paling mudah dan tidak menyulitkan. Semuanya dilakukan secara eksternal pada file <\/span>.css<\/b>. <\/span>Styling<\/span><\/i> dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang Anda inginkan. Sayangnya, CSS Style External juga memperlama waktu loading.<\/span><\/p>
CSS Style <\/span>Inline<\/b> menggunakan elemen spesifik yang memuat tag <style>. Karena setiap komponen harus di-<\/span>stylize<\/span><\/i>, maka Inline bukan metode yang tepat jika Anda ingin menggunakan CSS dengan cepat.<\/span><\/p>
Namun di sisi lain, hal tersebut mendatangkan keuntungan. Misalnya, jika Anda ingin mengubah satu elemen, atau menampilkan pratinjau dengan cepat, atau Anda tidak punya akses ke file CSS.<\/span><\/p>
Untuk mengetahui lebih lanjut, silakan baca artikel kami tentang perbedaan CSS internal, external, dan inline<\/a>.<\/p>
\"\"<\/a><\/figure>
Kesimpulan<\/h2>
Berikut beberapa poin yang dapat disimpulkan dari artikel ini<\/span>:<\/p>