Re-Shared, Pagar Dan Titik Pada CSS Apa Bedanya

FAST DOWNLOADadsPernah bermain twitter atau semacamnya bahkan website pribadi, yang mencantumkan has tag link, tepatnya (tagar) untuk urusan popular, trend, hangat, kategori, dan yang lainya lalu apa kaitanya dengan apa yang hendak kita bahas ini ?
Tidak ada hubunganya, paragraph diatas sebagai pembuka dari artikel yang dibuat ini, jika untuk para master html/css mungkin sudah tidak asing lagi dengan penulisan # atau . untuk yang baru berkecimpung mengenal html/css mungkin saja akan sedikit bingung menentukan penulisan css, khususnya untuk style web & blog pribadi.


Diantara kita blogger walau masih baru saya rasa pernah melihat coding ini dibagian template nya.

<div class='contoh'>
<b:section class='contoh' id='blabla' preferred='yes'>
</b:section>
</div>

Coding diatas dimaksudkan pembuatan suatu element dengan style class dan id yang digunakan. Jika seperti diatas codingnya berarti style sesuai CSS dimana misalkan kita membuat elemen widget sidebar dengan css seperti berikut.

#blabla{
width:250px}
float:right
}
.contoh h2{font: 20px arial;teks-align:center}

Maka yang akan terjadi widget sidebar tersebut akan tampil diposisi kanan dengan lebar 250px dan title atau judul widget akan ditampilkan dengan font ukuran 20px arial pas ditengah posisi konten widget.
Perlu diketahui juga bahwa penggunaan class lebih banyak digunakan karena untuk pembentukan style yang lebih kompleks dalam satu section, dan penggunaan class dapat digunakan lebih dari satu section dalam html, berbeda dengan id yang hanya dapat digunakan satu saja dalam html yang sama, section yang sama, untuk itu penggunaan id lebih sedikit dalam html dibandingkan dengan class. Tetapi itu kembali kepada pembuat design web atau blog.

Kita ambil coding diatas dengan fungsi yang sama hanya penambahan class saja meski penerapan div diawal tadi tidak perlu lagi kita edit tetapi akan otomatis menambah style sesuai penambahan class.

#blabla{
width:250px}
float:right
}
.contoh h2{font: 20px arial;teks-align:center}
.contoh li{background: #111}
.contoh li a:hover{color:#fff}

Penambahan yang akan terjadi apabila anda menerapkan link misal link list. Maka warna background muncul, dan ketika kursor kebagian link tersebut warna akan sesuai perintah yang disematkan, meski kembali lagi div diawal tidak perlu dirubah class "contoh" sudah mewakili semua css berawalan titik (.) Sehingga kesimpulanya baik # (tagar/pagar) (.) Titik/dot memiliki perintahnya masing-masing.
# dengan penerapanya id
. dengan penerapanya class

Terkadang saya sendiri masih sedikit terkecoh ketika membuat css style id (pagar) dan saya memanggilnya dengan class, sehingga akan dilewati dan tidak berbuah apa yang diharapkan, maklum saya sendiri masih baru dan sedang memperdalam html/css.FAST DOWNLOADads