Sebelumnya kalian pasti sudah mengetahui fungsi dan kegunaan css yang sudah dibahas pada artikel sebelumnya yaitu "Pengertian CSS (Cascading Style Sheet)"
Ada 3 cara untuk memasang kode CSS ke dalam HTML, yaitu
- CSS sebaris
- Embed / memasang kode CSS ke dalam bagian
- Tautan ke CSS eksternal
CSS INLINE
Kode CSS ditulis langsung ke dalam tag HTML yang ingin diformat. Menulis dengan cara ini tidak memerlukan penyeleksi penulisan dalam kode CSS. Metode ini hanya digunakan jika Anda ingin memformat elemen hanya sekali
Contoh
<h1 style="color: red;"> H1 dengan CSS </h1>Pada contoh si atas, elemen
di format agar tulisannya menggunakan warna merah, elemen lain, tidak akan menggunakan warna merah karena format ini hanya berlaku pada elemen paragraf yang di tentukan kode CSS nya. Penulisan CSS dengan cara ini mulai dengan kata “style = lalu di ikuti dengan syntax Property:value;”
CSS TERSEMBUNYI
Kita bisa menempelkan kode CSS di antara tag & . penulisan CSS dengan cara ini awalnya diawali dengan tag —-.
Contoh
<head> <style type=”text/css”> h1 {color : red;} </style> </head>_CSS EKSTERNAL
Kode CSS eksternal ditulis dalam file terpisah yang disimpan dengan akhiran ". css" atau ekstensi ". css". Anda kemudian perlu memanggil file CSS ke semua halaman web yang Anda buat. Dengan cara ini, Anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web Anda. Jadi ada dua langkah dalam mengimplementasikan CSS dengan cara ini
CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang ditulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs
CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 karena alasan yang sederhana. Dulu, HTML tidak dilengkapi dengan tag yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs tersebut
Tags, seperti , diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.
HTML dan CSS terkait erat. Karena HTML adalah bahasa markup (pondasi situs) dan CSS meningkatkan gaya (untuk semua aspek yang berkaitan dengan tampilan situs web), maka kedua bahasa pemrograman ini harus berjalan berdampingan.
Tidak hanya penting dari sisi teknis, CSS juga mempengaruhi tampilan sebuah website. Tentu Anda tidak ingin website Anda terlihat seperti situs 'telanjang' tanpa ada modifikasi bukan?
Unduh Lembar Curang CSS
Kelebihan CSS
Sangat mudah bagi Anda untuk mengetahui situs mana yang menggunakan CSS dan mana yang tidak
Anda pasti pernah membuka sebuah website, namun sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS di situs tidak dapat dimuat dengan benar atau situs tersebut tidak memiliki CSS sama sekali. Umumnya, situs seperti ini hanya mengimplementasikan HTML
Sebelum menggunakan CSS, semua gaya harus disertakan dalam markup HTML. Artinya, Anda harus mendeskripsikan semua latar belakang, warna font, perataan, dll. secara terpisah.
Dengan CSS, Anda dapat mengatur tampilan semua aspek dalam file yang berbeda, kemudian menentukan style, lalu mengintegrasikan file CSS di atas markup HTML. Hasilnya, markup HTML dapat lebih mudahdipelihara.
Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan setiap elemen berulang kali. Anda tidak membuang waktu, kode yang digunakan lebih singkat, dan kesalahan dapat diminimalkan
Karena opsi penyesuaian yang tersedia hampir tidak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai gaya pada satu halaman HTML.
Bagaimana CSS Bekerja
CSS menggunakan sintaks berbasis bahasa Inggris sederhana yang dilengkapi dengan sekelompok aturan yang mengaturnya. Seperti yang kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh. .
Satu pertanyaan sekarang, bagaimana gaya paragraf? . Struktur ini memiliki pemilih dan blok deklarasi. Pilih elemen yang diinginkan, lalu deklarasikan (deklarasi) yang harus anda lakukan terhadap elemen tersebut. Sangat mudah, bukan?
Ada berbagai aturan yang harus diingat. Namun, struktur aturan cukup sederhana dan lugas.
Selektor menunjuk ke elemen HTML yang tampilannya ingin Anda ubah. Blok deklarasi berisi satu atau lebih deklarasi (deklarasi) dipisahkan dengan titik koma.
Setiap deklarasi menyertakan nama dan nilai properti CSS, dipisahkan dengan koma. Umumnya, deklarasi CSS diakhiri dengan titik koma, sedangkan blok deklarasi diapit oleh kurung kurawal
Mari kita lihat contoh di bawah ini
Semua elemen
ditandai dengan warna biru dan hurufnya dicetak tebal (tebal).
<style> p { color: blue; text-weight: bold; } <style>Contoh lainnya, semua elemen
diletakkan di tengah (center-aligned), dengan lebar 16x, dan diwarnai Merah Jambu.
<style> p { text-align: center; font-size: 16px; color: pink; } </style>Lihat lembar contekan CSS untuk contoh lainnya
Mari kita bahas beberapa style CSS, yaitu Inline, External, dan Internal.
Gaya CSS Internal, Eksternal, dan Inline
Kita akan membahas masing-masing Style CSS secara singkat. Untuk informasi atau diskusi lebih mendalam, kami sertakan tautan di bawah ikhtisar
Gaya CSS Internal dimuat setiap kali situs web disegarkan, dan kerugiannya adalah waktu loading yang semakin lama. Gaya CSS yang sama tidak dapat digunakan di halaman lain karena sudah aktif di satu halaman.
Namun dibalik kekurangannya, CSS Style Internal memiliki beberapa kelebihan. Salah satunya adalah kemudahan dalam berbagi template untuk pratinjau (pratinjau) karena CSS hanya ada di satu halaman.
Eksternal adalah gaya CSS yang paling sederhana dan tidak rumit. Semuanya dilakukan secara eksternal pada file . css . Penataan gaya dilakukan di file terpisah, lalu terapkan CSS ke halaman mana pun yang Anda inginkan. Sayangnya, CSS Style External juga memperpanjang waktu loading.
CSS Style Inline menggunakan elemen khusus yang berisi tag digayakan, maka Inline bukanlah metode yang tepat jika ingin cepat menggunakan CSS.
Namun di sisi lain mendatangkan keuntungan. Misalnya, jika Anda ingin mengubah suatu elemen, atau menampilkan pratinjau dengan cepat, atau Anda tidak memiliki akses ke file CSS
Untuk mempelajari lebih lanjut, silakan baca artikel kami tentang perbedaan antara CSS internal, eksternal, dan inline
Situs web anti-lambat ekstra cepat. Dapatkan domain gratis dengan langganan hosting web 1 tahun. Pilih Hosting Web
Kesimpulan
Berikut adalah beberapa poin yang dapat disimpulkan dari artikel ini .
- CSS dibuat untuk dapat bekerja sama dengan bahasa markup seperti HTML. Biasanya CSS digunakan untuk mengatur tampilan halaman
- Ada tiga gaya dalam CSS, dan untuk menerapkan CSS ke banyak halaman sekaligus, gunakan gaya Eksternal
- Saat ini sudah banyak website yang menggunakan CSS. Ini karena CSS adalah salah satu bahasa markup yang diperlukan
Semoga artikel ini dapat bermanfaat bagi anda. Jika ada pertanyaan tentang apa itu CSS, silahkan tulis di kolom komentar di bawah
Penulis
Ariata C
Ariata suka menulis dan menerjemahkan, dan saat ini bekerja sebagai penerjemah di Hostinger Indonesia. Melalui artikel dan tutorial yang dipublikasikan di blog Hostinger, Ariata ingin berbagi ilmu tentang website, WordPress, dan hal-hal terkait hosting lainnya kepada para pembaca.