MENGENAL ISTILAH CSS
APA ITU CSS????
Kepanjangan CSS adalah singkatan 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.
Ketika menggunakan CSS, kamu akan bisa mengeksplorasi lebih jauh dibandingkan dengan bahasa pemrograman HTML dan PHP. Karena saat menggunakan CSS, kamu bisa mengatur gaya huruf, warna huruf, ukuran huruf, baris antar paragraf, serta jenis background yang ingin digunakan. Selain itu, CSS juga biasa digunakan untuk mendesain layout, efek untuk website, dan memvariasikan tampilan di berbagai perangkat berbeda.
Sudah pernahkah kamu mencoba mengembangkan website menggunakan HTML atau PHP? Jika sudah, pasti kamu merasa kesulitan untuk menata dan mengatur tampilannya, kan?
Pada dasarnya HTML dan PHP dikembangkan memang bukan untuk mendesain tampilan depan website. Jadi, menggunakan CSS adalah pilihan tepat! Contohnya jika kamu membuat tombol menggunakan HTML, pasti kamu hanya bisa menampilkan button yang biasa saja. Sedangkan dengan menggunakan CSS, tombol yang kamu buat bisa diberikan style seperti warna, ukuran, dan lainnya.
Halaman lebih cepat dimuat
Pertama, fungsi CSS adalah untuk respon halaman website yang lebih cepat. Ketika menggunakan CSS kamu hanya perlu menulis satu aturan dan menerapkannya di berbagai file yang membutuhkan hanya dengan memanggilnya.
Jadi, code yang kamu buat pun akan lebih singkat dan nantinya membuat proses download menjadi lebih cepat.
Mempercepat proses desain
Jika menggunakan CSS, kamu tidak perlu lagi menyalin satu per satu desain ke setiap file halaman. Ini berlaku ketika kamu membuat suatu desain yang sama di beberapa halaman. Nah, kamu tidak perlu lagi melakukan hal itu saat menggunakan CSS!
Kamu hanya perlu mengetikkan satu kali fungsi CSS lalu menggunakannya di banyak halaman HTML. Bukankah hal ini akan mempercepat proses desain?
Mengatur style dalam website
CSS memiliki atribut yang lebih beragam jika dibanding dengan HTML ataupun PHP. Dengan CSS kamu bisa menentukan font selain default, menentukan warna dan ukuran teks, menerapkan warna background, menambah elemen tabel dan menggabungkannya ke posisi tertentu.
Jenis CSS
Dalam proses implementasinya, ada 3 jenis CSS yang bisa kamu praktekkan. Setiap jenisnya memiliki fungsi, kelebihan, dan kekurangan masing-masing.
Berikut penjelasan dari ketiga jenis CSS tersebut:
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.
Kelebihan internal CSS adalah :
- Editing yang mudah di tiap halaman website
- Tidak perlu melakukan upload file CSS karena termasuk ke dalam HTML
- Internal stylesheet bisa memakai ID dan Class
- Error mudah diperbaiki
Kekurangan internal CSS adalah :
- Kurang efisien, karena harus menuliskan ulang untuk penggunaan di beberapa halaman website
- Memperlambat performa website karena memiliki CSS sendiri di tiap halamannya
- Ukuran file menjadi lebih besar
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.
Kelebihan external CSS adalah :
- Ukuran file lebih kecil
- Code rapi
- Respon website lebih cepat
- Bisa digunakan untuk beberapa halaman website berbeda
Kekurangan external CSS adalah :
- Kurang cocok untuk halaman custom
- Halaman website rawan berantakan saat file CSS gagal load sempurna
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.
Cara Kerja CSS
Cara kerja CSS sebenarnya cukup simpel. Mengingat default CSS memakai Bahasa Inggris berbasis syntax dengan struktur yang terbilang sederhana, yakni selector dan declaration block.
Meskipun begitu, cara kerja CSS rupanya juga didukung oleh berbagai rule. Namun tenang saja, sebab rule-nya tidak kompleks. Tentukan saja elemen yang diinginkan. Setelah itu, declare elemen tersebut. Selesai!
Agar lebih jelas, ambil saja contoh:
<p>This is a paragraph.</p>.
Lalu, kamu ingin setiap elemen <p> hurufnya ditebalkan atau bold dan berwarna hijau.
Maka, yang perlu kamu lakukan adalah:
<style>
p {
color: green;
text-weight: bold;
}
<style>
Contoh CSS
Contoh CSS code sederhana lainnya adalah sebagai berikut:
Untuk warna background website merah muda
body
{
background-color: pink;
}
Untuk mengubah jenis font di semua paragraf 1 menjadi Verdana dan berukuran 20px
h1
{
font-family: verdana;
font-size: 20px;
}
Contoh Properti CSS
Pada umumnya, jika kamu menuliskan suatu property CSS, maka kamu juga akan menuliskan valuenya. Lalu, apa itu CSS properti dan fungsinya? Properti ini berfungsi untuk memberi efek khusus pada elemen HTML dan nantinya ditampilkan pada website.
Untuk lebih jelasnya, kamu bisa mengetahui apa saja properti CSS seperti daftar di bawah ini!
1. Border
Border adalah properti CSS yang digunakan untuk mengatur dan membuat garis tepi pada HTML dengan banyak variasi. Untuk garis tepi bagian kanan kamu bisa menggunakan border-right, dan border-left untuk sebelah kiri.
Contoh border properti:
- 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
Border properti ini digunakan untuk mengatur background tampilan website.
Contoh :
- 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. Color
Jika kamu ingin mengubah warna text, background, dan lain sebagainya, kamu bisa menggunakan properti color ini.
4. Float
Properti float digunakan untuk mengatur text agar dapat melipat di sekitar elemen gambar, namun juga bisa digunakan untuk layout dan style lainnya.
Contoh :
float: right;
Untuk menentukan elemen harus mengapung di sebelah kanan elemen yang menampungnya.
5. Font
Properti kelima dari CSS adalah font. Properti ini bisa kamu gunakan untuk menentukan ukuran font, gaya teks, dan jenis font yang akan ditampilkan di website nantinya.
Contoh :
- 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
6. Height
Properti selanjutnya dari CSS adalah height. Ini adalah properti yang bisa kamu gunakan untuk mengatur tinggi dari suatu elemen secara otomatis dalam nilai seperti pixel, cm, em, persen, dan sebagainya.
7. Padding
Untuk menghasilkan ruang kosong di sekitar konten, entah di dalam atau di luar kamu bisa mengatur paddingnya.
Contoh :
- Padding-top : mengatur ruang elemen dengan konten bagian atas
- Padding-right : mengatur ruang elemen dengan konten bagian kanan
- Padding-bottom : mengatur ruang pada elemen dengan konten bagian bawah
- Padding-left : mengatur ruang pada elemen dengan konten bagian kiri
8. Margin
Beda dengan padding, margin digunakan untuk membuat ruang kosong di sekitar elemen bagian luar. Kamu bisa mengaturnya pada sisi bawah, atas, kiri, dan kanan secara terpisah.
Contoh :
- Margin-top : mengatur jarak antar elemen bagian atas
- Margin-right : mengatur jarak elemen bagian kanan
- Margin-bottom : mengatur jarak elemen bagian bawah
- Margin-left : atur jarak antar elemen bagian kiri
9. Weight
Terakhir, properti dari CSS ini digunakan untuk mengatur ketebalan dari text.
CSS adalah jenis kode yang perlu kamu kuasai sebagai seorang developer. Setelah menguasai basic-nya, cobalah untuk mengeksplorasi berbagai variasi tampilan yang bisa kamu ciptakan.
Nah, setelah itu baru buat website sederhana untuk ditampilkan kepada khalayak umum! Contohnya website portfolio. Untuk membangun sebuah website utuh yang keren dan berkualitas kamu bisa mencoba produk unlimited hosting dari Jagoan Hosting.
Komentar
Posting Komentar