CSS Dasar Part 2 - Anatomi CSS

CSS Dasar Part 2 - Anatomi CSS - Sebelum membahas CSS lebih dalam saya akan jelaskan terlebih dahulu mengenai anatomi/strukturnya. Anatomi / struktur untuk mendeklarasikan sintak CSS bisa dilihat digambar berikut :

Struktur / Anatomi CSS

Selector

Adalah bagian dari CSS yang digunakan untuk memilih dan memanipulasi element spesifik pada HTML. Dimana, element HTML yang menjadi selector bisa dipilih berdasarkan tag, id, class bahkan pattern/pola. Biasanya semakin kompleks struktur HTML, maka selector juga bisa semakin kompleks dan specifik.

Property

Adalah sebuah sarana yang di dalamnya memiliki nilai dalam pemberian style pada element HTML yang menjadi selector. Property di CSS jumlahnya sangat banyak, ada sekitar >350+++. Jadi kita tidak perlu meghafal semuanya. Hanya harus sering latihan untuk mengasah kemampuan kita dalam bahasa CSS ini.

Value

Adalah nilai dari property sebuah element yang dipilih menjadi selector.

Untuk menulis sintak diatas, caranya adalah sebagai berikut :

1. Tentukan element HTML yang mau diberi style ( selector )

2. Tulis kurung kurawal buka ( { )

3. Tuliskan propertinya, diikuti dengan titik 2 ( : )

4. Tuliskan nilai / value property, lalu akhiri dengan titik koma (; )

5. Apabila kita sebuah element HTML memiliki beberapa property yang ingin diberi style, maka properti lain bisa ditulis disamping properti sebelumnya yang diakhiri dengan tanda titik koma ( ; ), atau bisa juga di tulis dibawahnya. Silakan lihat contoh dibawah ini :

h1 {
  font-family: arial;
  font-stretch: 10px;
  font-style: bold
  color: green;
 }

 /*atau penulisannya bisa seperti ini */

 h1 { font-family: arial; font-stretch: 10px; font-style: bold; color: green;}

6. Terakhir tutup dengan kurung kurawal tutup ( } )

Sekian pembahasan mengenai anatomi dari CSS, semoga bisa dipahami buat teman-teman yang membaca artikel ini, apabila ada pertanyaan, kritik, dan saran, silakan sampaikan di kotak komentar dibawah artikel ini. see you on my next articles.

Referensi:
https://www.w3schools.com
https://www.w3schools.com/css
http://www.w3.org/style/CSS
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
http://css-tricks.com/almanac

• kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
• the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.

Share :