Assallamuallaikum Wr Wb..

Postingan Sebelumnya =>
Cara Belajar Membuat Css | Tahap Dasar


cascading style sheets

Selamat malam sobat blogponsel, pada perjumpaan kali ini saya ingin melanjutkan tutorial belajar css yang kedua.
Setelah sebelumnya masih dalam pengertian CSS, namun kali ini saya akan menjelaskan bagaimana cara menulis script CSS & menjelaskan jenis-jenis selector yang ada di dalam CSS beserta fungsinya, langsung saja di simak di bawah ini.

Penulisan kode Cascading Style Sheets (Css) diawali dengan selector lalu di buka dengan kurung kurawal "{ " & di tutup kurung kurawal " }".
Contoh :
body { background:#080;margin:0;padding:0;font-size:12px;color:#00f;border-bottom:1px solid #f70; }

Perhatikan pada contoh di atas, antara property dan value dipisahkan dengan titik dua ":" lalu antara property satu dengan property lainnya dipisahkan dengan tanda titik koma ";".

Perhatikan juga pada contoh di bawah ini.

body,#content,.post { font-size:11px;text-decoration:none;font-family:calibri, sans-serif, arial; }

Jika selector nya lebih dari 1 maka harus dipisahkan dengan tanda koma "," begitu juga dengan value (nilai).

Jika property atau value yang mempunyai 2 kata maka harus dipisahkan dengan tanda hubung "-", perhatikan pada contoh di atas. Misalnya, "font-family" & "border-bottom".

Keterangan :
- Body, #content & .post adalah selector.
- Font-size, margin, padding dan lain-lain adalah property.
- #00f, 1px dan lain-lain adalah value.

Baca Juga => Cara Membuat Dua Kolom Di Category Dan Blogroll

Saya rasa untuk cara penulisan nya sudah saya jelaskan dengan benar, sekarang mari kita pelajari tentang selector nya bagian 1.

Macam-macam selector.

- Body mengatur seluruh elemen blog.

- A mengatur warna link aktif keseluruhan.

- a.no-link mengatur non link keseluruhan.

- #header mengatur bagian kepala blog atau mencakup judul blog, deskripsi blog & navigasi.

- .heading mengatur bagian judul blog.

- .heading a mengatur warna link judul blog.

- .description mengatur bagian deskripsi blog.

- #navigation mengatur bagian dasar "Beranda", "Tentang Saya" dan "Navigasi".

- #navigation span mengatur bagian alas beranda, tentang saya dan navigasi.

- #navigation span a mengatur bagian link beranda.

- #navigation span+span a mengatur bagian link tentang saya.

- #navigation span+span+span a mengatur bagian link navigasi.

- #top-content mengatur bagian form search-form.

- #search-form mengatur form pencarian.

- #search-form .inp-text atau #search-form [type=text] mengatur bagian kolom pencarian.

- #search-form .inp-btn atau #search-form [type=submit] mengatur bagian tombol submit.

- #content mengatur bagian dasar .post sampai #pagination-links saat di homepage.

- .post mengatur bagian dasar artikel saat di homepage.

- .post .post-meta mengatur bagian dasar judul artikel saat di homepage.

- .post .post-meta .title mengatur bagian judul artikel saat di homepage.

- post .post-meta .title a mengatur warna judul artikel saat di homepage.

- .post-meta2 mengatur bagian dasar jumlah komentar saat di homepage.

- .post-meta2 span mengatur bagian jumlah komentar.

- .post-meta2 a mengatur warna link jumlah komentar.

- .post .post-content mengatur bagian isi artikel saat di homepage.

- .thumbnaill mengatur bagian gambar pada artikel saat di homepage.

- #pagination-links mengatur bagian nomor halaman di homepage.

- #pagination-links span mengatur bagian nomor halaman non link.

- #pagination-links a mengatur bagian link nomor halaman.

Sampai di sini dahulu penjelasan tentang selector CSS bagian 1, untuk kelanjutannya akan saya jelaskan di postinganku berikutnya. Mohon maaf jika tidak langsung saya jelaskan di sini, karena jumlah karakter handphone saya tidak mencukupi.

Demikian yang dapat saya sampaikan tentang Cara Belajar Membuat Css | Tahap Kedua, mohon maaf jika penyampaian artikel di atas sedikit membingungkan & sulit di pahami. Saya juga mengucapkan terima kasih sudah berkunjung ke blog sederhana ini.

Wassallamuallaikum Wr Wb..