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 menurut CSS yg digunakan untuk memilih & memanipulasi element khusus dalam HTML. Dimana, element HTML yg menjadi selector mampu dipilih dari tag, id, class bahkan pattern/pola. Biasanya semakin kompleks struktur HTML, maka selector juga mampu semakin kompleks & 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 merupakan menjadi berikut :

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

2. Tulis kurung kurawal buka ( )

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

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

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

			h1  font-family: arial; font-stretch: 10px; font-style: bold color: green;  /*atau penulisannya bisa misalnya ini */ h1  font-family: arial; font-stretch: 10px; font-style: bold; color: green;
			
		

6. Terakhir tutup menggunakan kurung kurawal tutup ( )

Sekian pembahasan mengenai anatomi menurut CSS, semoga mampu dipahami buat teman-teman yang membaca artikel ini, jika ada pertanyaan, kritik, dan saran, silakan sampaikan pada 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.

Bagikan Artikel ini