CSS div dan CSS span

Hai sobat sky . . .
Kali ini judul potingan saya adalah "CSS <div> dan CSS <span>", dimana postigan ini adalah lanjutan dari :

1. Pengenalan CSS


2. CSS Id dan Class


3. Mengatur Warna pada CSS


4. Pengaturan Font dan Text pada CSS


5. Mengenal CSS Link


6. Mengenal CSS List


7. Mengenal CSS Table


8. CSS BOX MODEL


9. CSS BORDER


10. CSS OUTLINE


11. CSS MARGIN dan PADDING


12. CSS GROUPING dan NESTING


13. CSS DIMENSION, DISPLAY dan VISIBILITY


14. CSS POSITIONING dan FLOATING


15. CSS ALIGN


16. NAVIGASI CSS

CSS <div>

Tag <div> mambagi brbrrapah konten kedalama beberapah bagian. setiap bagian dapat memiliki style atau format sendiri - sendiri sesuai spersifikasi yang dapat kita lakukan pada CSS. Tag <div> dapat dibayangkan sebagai kontainer (wadah) besar untuk diterapkan pada suatu blok tertentu. wadah besar ini akan kita batasi diawal menggunakan tag <div> dan akhir dengan </div>, browser akan selaluh menambah baris kosong (line feed).

Contoh kode pendefinisian huruf menggunakan CSS:

<style> .hurufbesarhijau { color: #00FF00; font-family: arial; font-size: 20px; } </style>

Kemudian kita bisa menerpkan pendefinisian CSS tersebut menggunakan tag <div> seperti ini :

<div class="hurufbesarhijau"> semua teks dalam sini akan sesuai dengan pendefinisian CSS diatas </div>

Jika kedua potongan kode tersebut digabungkan maka akan tempil seperti gambar dibawah ini :

Ini kode gabungannya

<style> .hurufbesarshijau{ color: #00FF00; font-family: arial; font-size: 20pt } </style> <div class="hurufbesarhijau"> Semua text dalam sini akan sesuai dengan pendefinisian CSS diatas </div>

CSS <span>

Secara fungsi span hampir mirip dengan div. keduanya berfungsi untuk mebagi konten menjadi beberapa bagian yang memiliki stylenya sendiri - sendiri. Perbedaannya adalah span kita gunakan untuk membuat bagian yang lebih kecil daripada div. Selain itu, tidak ada penembahan baris kosong setelah baris penutup

Sebagai contoh :

<style> .hurufspan { color: #0066FF; font-family: arial; font-style: 15pt; } </style>

Kemudian kita terapkan kode HTML menggunakan span seperti contoh dibawah ini :

Span bisa diterapkan pada <span class="hurufspan">sebagian kecil paragraf</span>

Maka keduanya akan menampilkan hasil seperti ini :

Ini adalah kode gabunganya :

<style> .hurufspan { color: #0066FF; font-family: arial; font-size: 15pt; } </style> Span bisa diterapkan pada <span class="hurufspan">sebagian kecil paragraf</span>

Gimana ?
Mudah bukan ?

Saya rasa sampai disini dulu materi tentang "CSS DIV dan CSS SPAN"


Sampai jumpa di materi berikutnya . . .

To be continue . . .

Image by Cool Text: Free Logos and Buttons - Create An Image Just Like This