Dalam membuat website tidak lengkap rasanya jika tidak mengunakan CSS. CSS sendiri dapat membuat seluruh tampilan website terlihat lebih menarik dan sesuai dengan kebutuhan. Lalu, Apa itu CSS ?
Pengertian dan Cara Kerja CSS
Apa itu CSS?
CSS merupakan singkatan dari Cascading Style Sheets. Dengan CSS memungkinkan Anda membuat halaman web tampak lebih bagus dan menarik.
CSS adalah adalah bahasa pemorgraman yang digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup. Selain itu css berfungsi untuk menyederhanakan proses pembuatan halaman web yang bagus dan rapi.
Seorang jenius bernama Håkon Wium Lie adalah sosok dibalik terciptanya CSS. Css pertama kali dirilis pada 17 Desember 1996, oleh World Wide Web Consortium (W3C). Alasan CSS dibuat pada saat itu karena style formatting pada HTML dianggap terlalu panjang. Membuat para programmer web pada waktu itu mengalami kesulitan, menjadikan proses pekerjaan lebih panjang dan juga membutuhkan tambahan biaya.
HTML dan CSS menjadi satu kesatuan yang erat. Karena HTML merupakan bahasa markup (kerangka situs) dan CSS merupakan style, oleh sebab itu HTML dan CSS tidak bisa dipisahkan.
Cara Kerja CSS
CSS dapat membuat style di sebuah halaman web dapat berinteraksi dengan elemen HTML. HTML merupakan bahasa markup yang dirancang untuk mendeskripsikan konten. Lalu bagaimana cara kerja CSS itu sendiri?
Pada dasarnya cara kerja CSS cukup sederhana. Di dalam struktur syntax CSS memiliki selector dan declaration block. Pilihlah elemen yang Anda diinginkan, kemudian deklarasikan apa saja yang ingin Anda lakukan dengan elemen tersebut. Berikut contoh elemen di HTML:
<p>Ini adalah sebuah paragraf</p>Selanjutnya kita ubah paragraf di atas dengan warna yang lain, dan ukuran yang berbeda. Berikut baris CSS untuk merubah warna dan ukuran font pada paragraf.
p { color:#fff; font-size:28px; }Pada contoh tersebut, “p” (paragraf) berfungsi untuk menspesifikasikan elemen HTML atau yang biasa disebut selector.
Lalu yang berada di dalam tanda kurung kurawal { color:#fff; font-size:28px; } merupakan sebuah deklarasi yang di dalamnya berisi properti dan nilai yang akan diaplikasikan ke dalam selector.
Dalam menulis CSS ada beberapa aturan yang harus Anda ingat.
- Selector digunakan untuk mengarah ke elemen HTML yang ingin diubah.
- Setiap deklarasi harus memiliki nama dan value dari properti CSS, dan dipisahkan dengan tanda koma.
- Deklarasi CSS harus diakhiri dengan tanda titik koma (;)
- Declaration block harus didalam tanda kurung kurawal {……}
CSS Style Internal, External, dan Inline
Inline CSS
Inline CSS adalah penempatan CSS yang langsung dilakukan di dalam sebuah elemen HTML. Penggunaan CSS secara inline hanya akan mempengaruhi elemen yang digunakan. Contohnya.
<h1 style="color:red;">Mengenal CSS lebih dalam</h1>External CSS
External CSS adalah penempatan CSS pada file yang terpisah dengan markup (HTML). Semua style ditempatkan secara eksternal pada file .css. Cara ini digunakan untuk mendeklarasikan CSS pada website secara keseluruhan.
Jika Anda menggunakan metode ini, Anda harus menambahkan header untuk memanggil file .css di dalam file HTML seperti contoh berikut ini.
<head>
<link rel="stylesheet" type="text/css" href=mystyle.css">
</head>Internal CSS
Internal CSS merupakan penempatan CSS pada markup (HTML) tapi tidak didalam elemen, dan tanpa perlu file CSS terpisah. Penempatan CSS secara internal dituliskan di bagian atas (header) pada file HTML. Berikut contoh penggunaan CSS secara internal.
<head><style>body { background-color:green; }p { font-size:24px; color:red; }</style></head>Di antara tiga metode penempatan CSS diatas, Metode eksternal adalah cara yang paling efektif untuk mengimplementasikan CSS ke sebuah website. Metode ini juga sering digunakan oleh banyak programmer website dibandingkan dengan metode lain.
Semoga artikel tentang Mengenal Apa Itu CSS ? Pengertian dan Cara Kerjanya dapat bermanfaat dan memberi ilmu baru untuk Anda. Jika kalian masih ada yang kurang paham atau ada hal yang ingin ditanyakan, jangan sungkan untuk beratanya di kolom komentar. Kalian juga bisa membagikan artikel ini.
