Pada video ini kita akan mempelajari mengenai teori terlebih dahulu ya. Berikut adalah sintaks atau aturan yang harus kita ikuti pada saat menuliskan kode CSS.

Yang pertama, bagian paling kiri adalah selector. Selector ini adalah siapa yang hendak kita ubah. Dalam tutorial sebelumnya kita hendak mengubah elemen li, maka kata selector kita ganti dengan li.

Setelah selector, harus diikuti dengan kurung kurawal. Dan di dalam kurung kurawal tersebut, kita menuliskan properti apa yang hendak kita ubah, diikuti dengan tanda titik dua, setelah itu kita isikan dengan nilai dari properti dan diikuti lagi oleh tanda titik koma.

Kita lihat kembali penulisan kode CSS dari tutorial sebelumnya, kita hendak mengubah elemen li menjadi warna hijau. Maka properti yang kita gunakan adalah color, sedangkan value-nya adalah green. Jadi secara keseluruhan, sintaks css yang kita tuliskan adalah li diikuti dengan kurung kurawal pembuka, lalu kita isikan properti color, diikuti dengan tanda titik dua. Setelah itu kita isikan dengan nilai green dan ditutup dengan tanda titik koma dan kurung kurawal penutup.

Kita bisa mengubah lebih dari satu properti dalam satu selector, dengan menggunakan sintaks seperti ini. Di dalam kurung kurawal, kita bisa tuliskan properti diikuti tanda titik dua, lalu diisikan dengan nilainya dan diakhiri dengan titik koma. Lalu kita ulangi lagi cara penulisan ini untuk properti berikutnya.

Sebagai contoh, misalkan kita memiliki 4 buah image atau gambar. Dan kita mau mengganti warna latar belakang dari gambar tersebut menjadi merah.

Pertama kita tentukan dahulu selector untuk memilih gambar yang hendak kita ubah. Dalam kode HTML, gambar kita buat dengan menggunakan tag IMG. Oleh karena itu, sebagai selector css kita bisa menuliskan img dan diikuti dengan kurung kurawal pembuka.

Untuk mengganti warna latar belakang, kita menggunakan properti yang namanya background-color. Jadi setelah kurung kurawal pembuka kita tuliskan background-color, kemudian diikuti dengan tanda titik dua.

Dan kemudian diikuti lagi dengan nilai yang kita inginkan sebagai warna latar belakang. Pada contoh ini kita menggunakan warna dasar merah. Sebagai nilai dalam kode css, kita cukup menuliskan kata red. Diikuti dengan tanda titik koma dan kurung kurawal penutup.

Setelah kita refresh browser, maka keempat gambar akan berubah menjadi menggunakan warna latar belakang merah.

Selanjutnya kita akan menambahkan garis di sekeliling gambar, dengan menggunakan properti border. Pertama agar lebih rapi, kita pisahkan dahulu properti background-color menjadi satu baris khusus. Dan kemudian kita buat properti border di baris berikutnya. Properti border ini harus diisi dengan 3 buah nilai, yaitu lebar, style dan warnanya. Misalkan kita ingin agar border ini selebar 5 pixel, maka kita memasukan nilai 5px. Kemudian kita beri spasi lagi dan kita tuliskan nilai style solid. Kita beri spasi lagi dan kita masukkan warna yang kita inginkan, misalkan warna black atau hitam.

Setelah kita refresh browser, maka gambar akan berubah menjadi seperti ini. Gambar telah dikelilingi oleh garis berwarna hitam dengan ketebalan 5 pixel. Kita bisa menggunakan beberapa macam style yang sudah disediakan oleh CSS, seperti garis putus-putus, atau titik titik, dan lain-lain.

Untuk mengetahui secara lebih lengkap mengenai border style, kita bisa melakukan search google dengan kata kunci border style. Dan kita bisa melihat dokumentasi dari w3schools.com. Disini ada dijelaskan jenis-jenis style yang dapat kita gunakan pada border, seperti dotted, dashed, solid, double, dan lain-lain. Kita bisa coba-coba sendiri macam-macam style disini untuk memilih yang mana yang paling sesuai dengan design situs kita.

Bagi teman-teman yang ingin mempelajari lebih lanjut mengenai properti apa saja yang bisa kita atur dalam kode css, dan nilai apa saja yang bisa kita masukkan, kita bisa melihat referensi lengkapnya dari situs Mozzilla. Kita bisa buka tab baru pada browser dan kita ketik alamatnya developer.mozilla.org. Pilih menu Technologies, pilih CSS, dan kemudian pilih CSS Reference. Disini kita bisa melihat daftar lengkap dari keywords alias properti yang bisa kita gunakan untuk kode CSS. Kita bisa menemukan semua properti yang telah kita pelajari selama ini, termasuk color, background-color, dan border.

Dan kalau kita klik ke salah satu properti, misalnya background-color, maka kita akan mendapatkan penjelasan lebih detail mengenai properti tersebut, nilai apa saja yang bisa kita masukkan dan contoh penggunaannya.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.