Belajar HTML dan CSS part III - The CSS

9:38 PM belajar blog , belajar web , dasar css , tutorial css , tutorial html 3 Comments

halo teman-teman semuanya, pada kali ini saya akan mencoba menjelaskan tentang basic- basic dari css. Sebelumnya, saya sudah menge-post tentang part I dan part II. Bagi teman-teman yang belum baca monggo dibaca nggih, sukur-sukur kalau pengetahuannya bertambah setelah bacanya, hehehe..

1. Belajar HTML dan CSS part I
2. Belajar HTML dan CSS part II

Pada kesempatan ini, saya ingin menjelaskan sedikit mengenai CSS, apa itu CSS, apakah fungsinya, apa struktur dasarnya, dan bagaimana cara kerjanya.

Jadi, apa itu CSS? CSS adalah salah satu dari rangkaian code yang digunakan oleh seorang web desainer dalam membuat sebuah halaman web. Fungsi dari CSS itu sendiri adalah sebiah code yang dikhususkan untuk memberi style terhadap halaman web yang sedang dibuat, seperti memberi background warna, style, ukuran, dan kondisi font, hingga memberi animasi terhadap halaman web (ini untuk CSS 3 dan HTML 5 ya, masih belum dibahas di sini :3 ). Dari fungsi tersebut, dapat disimpulkan bahwa CSS itu adalah code yang digunakan untuk menghias tampilan halaman web yang sedang kita buat agar dapat terlihat menarik dan interaktif sehingga pengunjung web kita tidak merasa bosan dengan tampilan yang monoton dan tidak kapok untuk mengunjunginya lain kali. Hal ini menjadi point tambahan sebuah halaman web untuk menjadi terkenal di samping sebuah halaman web harus memiliki content yang jelas dan berguna bagi pembacanya. Code CSS dapat ditempelkan pada setiap tag HTML secara langsung, dideklarasikan dalam satu bagian pada file HTML, maupun dibuat pada file berbeda berekstensi CSS dan kemudian dipanggil dari file HTML.

Okeh, sejauh ini itulah yang saya dapat jelaskan tentang CSS, mungkin teman-teman bisa mencari sumber lain sebagai tambahan penjelasan saya yang masih nubie ini, hehe...

Selanjutnya, CSS memiliki struktur dasar, layaknya sebuah tag HTML. Dalam sebuah tag CSS, ada beberapa komponen, yaitu selector, property, dan value. Struktur komponen dalam sebuah code CSS adalah sebagai berikut:

selector { property: value; }

Dapat dilihat syntax css di atas adalah struktur syntax dasar CSS itu sendiri. Jangan ngerasa sulit dulu yah, karena kalo teman-teman sudah mengusasai apa arti struktur tersebut saya yakin pasti akan mudah ke depannya...
Jadi, sebuah instruksi pada CSS memiliki tiga komponen dasar, yaitu selector, property, dan value dari property itu sendiri. Untuk penjelasan lebih lengkapnya bisa dilihat dari uraian saya di bawah ini:

1. Selector
Pada kode CSS, selector digunakan sebagai objek tempat style CSS akan kita implementasikan. Misalnya kita ingin memberi warna font berwarna merah pada semua content yang ada pada tag body, maka selector yang dituliskan adalah body. Pada selector, ada tiga bentuk object yang dapat kita tuju, yaitu pada object tag, identifier, dan class.
Untuk objek berbentuk tag html, maka kita dapat langsung menyebutkan tag tersebut sebagai selector, misalkan untuk semua <h1> size font akan dibuat 15px maka penulisan selector akan seperti di bawah ini:

h1 { font-size: 15px; }

Ingat bahwa untuk selector yang mengarah ke tag html langsung, maka semua tag yang dipilih akan mengalami efek style tersebut. Jadi pada contoh di atas semua tag h1 akan memiliki ukuran font sebesar 15 pixel.

Untuk objek yang memiliki identifier, maka disisipkan tanda '#' sebelum nama identifier diketikkan. Misalkan untuk h1 yang memiliki identifier bernama headline akan memiliki font size sebesar 15px, maka penulisannya adalah:

#headline { font-size: 15px; }

Keunggulan penggunaan selector berupa identifier adalah objek yang dituju hanya yang memiliki nama/identifier tersebut.

Untuk objek yang memiliki class, maka disisipkan tanda '.' sebelum nama identifier diketikkan. Misalkan untuk h1 yang memiliki class bernama anggota-judul akan memiliki font size sebesar 15px, maka penulisannya adalah:

.anggota-judul { font-size: 15px; }

Berbeda dengan identifier, class dapat berupa kumpulan tag sehingga style yang kita buat dapat ditujukan untuk beberapa tag yang memiliki class yang sama.

2. Property
Property merupakan tipe instruksi yang kita berikan pada selektor. Misalkan kita ingin memberi warna font merah pada tag body, maka property yang digunakan adalah color.

3. Value
Value merupakan nilai dari property yang kita gunakan. Meneruskan contoh dari property, misalkan kita ingin memberi warna font merah pada tag body, maka value yang diberikan adalah Red sehingga gabungan dari selector, property, dan value akan seperti di bawah ini:

body { color:Red; }

Oke, sekian penjelasan saya kali ini, saya berharap teman-teman terbantu dengan penjelasan ala kadarnya ini. Apabila ada kesalahan pada penulisan kali ini mohon koreksinya karena di sini kita belajar bersama-sama, bahasa gaulnya CMIIW gitu :3
terima kasih atas kunjungannya dan ikuti terus blog saya untuk postingan yang berikutnya :D