wimzcomputer
OK, setelah Anda mengenal beberapa dari tag HTML, alangkah baiknya kita selingi dengan satalah satu bahasa pemrograman untuk membangun website, yakni CSS.
Apa itu CSS? Simak artikel berikut.
Cascading Style Sheet (CSS) adalah salah satu dokumen website yang berfungsi untuk mengatur style huruf, warna, jarak, bentuk pada tampilan website yang tidak dapat dilakukan oleh HTML.
Versi terbaru CSS adalah CSS 3. Manfaat penggunaan CSS:
1. Kode HTML menjadi lebih sederhana dan lebih diatur.
2. Ukuran file menjadi lebih kecil.
3. Mudah untuk mengubah tampilan web.
4. Dapat berkolaborasi dengan javascript.
5. Dapat digunakan hampir semua jenis web browser.
Cara kerja CSS dalam memodifikasi HTML dengan memilih elemen HTML yang akan diatur, kemudian memberikan property yang sesuai dengan tampilan yang diinginkan.
Skrip CSS terdiri dari 3 bagian, selector untuk memberi elemen yang akan diberi aturan, property merupakan aturan yang diberikan, value sebagai nilai dari aturan yang diberikan.
Selector
Selector adalah sebuah kata untk memilih elemen HTML tertentu yang kan dimodifikasi dengan skrip CSS. Terdapat 3 macam penulisan selector, yakni selector tag, selector class, dan selector id.
Selector Tag
Selector Tag yaitu selector yang menyebutkan secara langsung tag HTML yang ingin diatur dengan CSS. Cukup dengan namanya saja.
Selector Class
Selector Class yaitu selector yang menebutkan nama class dari suatu tag yang ingin dimodifikasi dengan CSS. Penyebutan nama class diawali tanda titik (.) sebelum nama class.
Selector Id
Selector Id adalah penulisan selector dengan menuliskan nama id dan elemen HTML yang akan dimodifikasi dengan CSS. Penulisan nama id disertai degan tanda hashtag (#) sebelum nama id. Satu nama id hanya bisa digunakan untuk satu elemen HTML saja.
Daftar selector CSS
| Selector | Contoh | Keterangan |
|---|---|---|
| * | * | Memilih semua elemen |
| elemen, elemen | div, p | Memilih tag <div> dan <p> secara bersamaan |
| elemen elemen | div p | Memilih tag <p> yang ada di dalam tag <div> |
| elemen>elemen | div>p | Memilih tag <p> yang ada di dalam tag <div> secara langsung |
| elemen+elemen | div+p | Memilih tag <p> yang berada langsung setelah tag <div> |
| elemen~elemen | div~p | Memilih tag <p> yang memiliki parent sama dengan <div> |
| [attr] | [disabled] | Memilih semua elemen yang memiliki atribut disabled. |
| [attr=value] | [type=text] | Memilih semua elemen yang memiliki atribut type=text |
| [attr~=value] | [title~=indah] | Memilih elemen yang memiliki nilai atribut class mengandung kata “indah” |
| [attr|=value] | [class|=my] | Memilih elemen yang memiiki nilai atribut class yang dimulai dengan kata “my” |
| [attr^=value] | [class^=ti] | Memilih elemen yang memiliki nilai atribut class yang diawali dengan kata “ti” |
| [attr$=value] | [class$=ar] | Memilih elemen yang memiliki nilai atribut class yang diakhiri dengan kata “ar” |
| [attr*=value] | [class*=in] | Memilih elemen yang nilai atribut class mengandung potongan kata”in” |
Property dan Value
Property merupakan suatu jenis style CSS yang berfungsi memberikan style pada selector yang telah ditentukan. Property pada CSS sangat banyak sekali. Misalnya property yang biasa kita temukan adalah background-color, color, font-family, font-size, margin, padding dan masih banyak lagi dan semua itu dapat dipakai untuk selector apapun.
Value merupakan nilai dari property dimana value telah ditentukan pasangannya dengan property yang ada. Dan tidak bisa sembarangan dalam meberikan value pada setiap property. Misalnya property color tidak bisa diisikan dengan value bold.
Propety dari sebuah value ditulis diantara tanda { }.Property dan value dipisah dengan tanda “:” dan diakhiri dengan tanda “;”.
Penulisan CSS
1. Inline CSS, menuliskan CSS dengan menggunakan atribut style yang langsung dituliskan di dalam tag HTML. Cocok untuk satu dua property, dan bersifat permanen.
2. Internal CSS, penulisan CSS menggunakan tag <style>…</style> pada elemen <head>…</head>. Hanya digunakan pada satu halaman HTML dengan sedikit selector.
3. Eksternal CSS, penulisan CSS di mana skrip CSS disimpan dalam file tersendiri dengan ekstensi .css dan terpisah dengan file HTML. Pemanggilan file CSS dilakukan pada elemen <head>. Dapat digunakan oleh banyak file HTML.
Untuk lebih jelasnya, bisa simak video berikut.
Demikian, semoga bermanfaat 🙂
Anda bisa mengunjungi kami di website dengan klik di sini, atau Subscribe channel kami di sini.
