Dengan CSS, kamu dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain. Singkatnya, dengan CSS, kamu tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Kamu tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir. Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai macam style pada satu halaman HTML.
Jadi, CSS adalah kepanjangan dari Cascading Style Sheets, yang berguna untuk menyederhanakan proses pembuatan website dengan mengatur elemen di bahasa markup. Pemakaian CSS adalah untuk mendesain website front end.
Jenis-Jenis CSS
Kamu juga perlu tahu bahwa dalam proses implementasinya, ada 3 jenis CSS yang bisa kamu praktekkan. Setiap jenisnya memiliki fungsi, kelebihan, dan kekurangan masing-masing.
1. Internal CSS
Internal CSS adalah kode CSS yang penulisannya dalam tag <style> dan posisinya ada pada bagian atas header file HTML. CSS jenis ini berguna untuk membuat custom khusus dalam satu halaman website. Penggunaannya cocok untuk kamu yang sedang mengerjakan website dengan tampilan berbeda-beda.
2. External CSS
External CSS adalah kode CSS yang dituliskan terpisah dengan file HTML, dan ditulis sendiri pada file ekstensi CSS. Penulisan file eksternalnya bisa diletakkan pada bagian <head>, jadi setiap halaman website dilakukan pemanggilan file .css. Penggunaannya cukup sederhana karena tidak perlu menuliskan CSS pada setiap file HTML.
3. Inline CSS
Jenis yang terakhir ini langsung memasukkan kode CSS yang ditulis pada setiap atribut HTML. Jadi, di setiap atribut memiliki style CSS yang berbeda sesuai kebutuhan dan ini tergolong kurang efisien jika dibanding jenis CSS lainnya.
Fungsi CSS
1. Mempercepat Proses Desain
Apa yang akan dilakukan jika menggunakan desain serupa dalam halaman HTML? Mungkin kamu akan menyalinnya satu persatu ke dalam setiap file halaman. Sesuai dengan pengertiannya, saat menggunakan CSS, kamu tentu tak perlu melakukan hal tersebut lagi. Hal tersebut dikarenakan saat menggunakan CSS, hanya perlu mengetikkan satu kali fungsi saja. Kemudian menggunakannya pada berbagai halaman HTML. Fungsi CSS yang telah dibuat dalam satu file tersebut tentunya bisa dipanggil ke berbagai halaman situs web tanpa harus menyalin baris kode fungsi berulang-ulang.
2. Proses Pemeliharaan Jadi Lebih Mudah
Dengan menggunakan CSS, akan menjadi lebih mudah untuk mengubah tampilan di berbagai halaman. Hanya dengan mengubah fungsi style pada file CSS.
3. Halaman Lebih Cepat Dimuat
Saat menggunakan CSS, tentunya tak perlu lagi menuliskan atribut tag HTML pada semua file yang akan digunakan. Cukup dengan menulis satu aturan CSS, lalu menerapkannya ke dalam berbagai file yang membutuhkannya hanya dengan memanggilnya.
4. Kompatibel Pada Berbagai Perangkat
CSS tentunya akan memungkinkan konten yang dibuat bisa dioptimasi pada lebih dari satu perangkat. Contohnya saat sedang memproses sebuah dokumen. Jika menggunakan CSS, tentunya dapat menyesuaikan tampilan dokumen dalam perangkat versi lama sekaligus juga pada versi yang baru.
5. Style Lebih Bervariasi
Tak hanya itu saja, CSS juga sudah dilengkapi dengan atribut yang lebih bervariasi jika dibandingkan dengan HTML.
6. Standar Pengembangan Situs
Saat ini hampir semua website yang beredar di internet telah menggunakan CSS di dalamnya. Selain membuat tampilannya menjadi lebih menarik, kebanyakan browser populer pun kini telah mendukung CSS. Jadi, ketika ingin mengembangkan sebuah website dengan standar browser populer, gunakanlah CSS.
Contoh Pengunaan CSS
Untuk mengubah background menjadi berwarna
body
{
background-color: gree;
}
Untuk mengubah jenis font di semua paragraf 1 menjadi Verdana dan berukuran 30px
h1
{
font-family: verdana;
font-size: 30px;
}
Contoh Properti CSS
1. Border
- Border-left-width :mengatur lebar garis kiri
- Border-color :mengatur warna dari garis
- Border-style : mengatur style dari garis
- Border-top : membuat garis atas
- Border-right : membuat garis kanan
2. Background
- Background-color : memberi warna pada latar belakang
- Background-image : memberi gambar pada latar belakang dari suatu element
- Background-position : mengatur posisi gambar pada latar belakang
3. Font
- Font-weight : mengatur ketebalan dari text
- Font-size : mengatur ukuran font sesuai yang diinginkan
- Font-family : mengatur jenis font yang ingin dipakai
- Font-style : mengatur style font yang akan digunakan pada text
- Font-variant : mengatur font apakah menjadi huruf kecil atau tidak
Itu tadi sedikit pembahasan mengenai Bahasa Pemrograman CSS, sangat menarik bukan?
cr : diar
Tanya & Beli Program?