Dasar-Dasar CSS

19.27  Taupik b@3  No comments


Cascading Style Sheets (CSS) adalah mekanisme sederhana untuk menambahkan gaya (misal huruf, warna, spasi) ke dalam dokumen web. Tujuannya adalah untuk memisahkan struktur dari gaya, sehingga pada saat kita menulis HTML tidak perlu kita memikirkan bagaimana gaya dari dokumen tersebut. Gaya tampilan dari dokumen akan ditangani oleh CSS.

Sintak dari CSS berbeda dengan HTML. Apabila HTML menggunakan tag dan attribute, maka CSS menggunakanselector, dimana selector memiliki declarations. Declarations memiliki properties dan ke dalam properties ini dimasukkanvalue. Sintak-sintak CSS ini ada yang diselipkan di dalam dokumen HTML ada juga yang berupa file tersendiri yang dapat diakses oleh HTML. Secara garis besar anatomi dari aturan CSS adalah sebagai berikut:

Langkah-langkah dalam membuat sintak CSS:
  1. Tentukan selector untuk aturan CSS yang akan dibuat.
  2. Ikuti selector dengan menulis simbol ( {).
  3. Masukkan nama property, ikuti dengan colon (:).
  4. Ikuti colon dengan spasi, masukkan nilai dari property, dan akhiri pasangan properti/value dengan semicolon(;).
  5. Teruskan ke baris selanjutnya, dan tuliskan pasangan property/value. Akhiri dengan semicolon.
  6. Ketika semua declarations berisi semua property yang diinginkan, akhiri declaration dengan simbol (}).
    7. Contoh lengkap penulisan sintak CSS dapat diperhatikan pada gambar berikut ini:
  7. Untuk menentukan satu deklarasi untuk beberapa "selector", pisahkan tiap "selector" dengan koma, kemudian tuliskan deklarasi untuk semuanya. contoh penulisannya:
    h1, h2, h3 { font-family: Arial, Helvetica, sans-serif}
  8. Apabila kita ingin menentukan suatu gaya tampilan dimana gaya tersebut hanya untuk tag tertentu saja, pisahkan sejumlah "selector" dengan spasi. Contoh:
    h1 b { color: red } 
    Penulisan gaya seperti di atas disebut "descendant style" dimana gaya seperti ini hanya akan diaplikasikan terhadap text yang "bold" dan menggunakan heading level 1.
  9. Untuk menggunakan sintak CSS hanya di dalam suatu tag, masukkan atribut "style" terhadap tag yang akan diatur gayanya. Contoh:
CSS ini diaplikasikan terhadap HTML dengan 2 cara yaitu dengan menyelipkan sintak CSS di dalam kode HTML, atau membuat file khusus CSS yang dapat diakses oleh HTML. Contoh menyelipkan sintak CSS ke dalam kode HTML:
  1. Dalam bagian "head" di dalam dokumen HTML, masukkan tag <style>.
  2. Tentukan atribut "type" untuk tag <style> dan tentukan nilainya yaitu "text/css".
  3. Tuliskan sintak CSS ini di dalam tag <stye>, seperti contoh berikut ini:
Untuk membuat sintak CSS dalam bentuk file eksternal, ikuti langkah-langkah berikut ini:
  1. Buka dokumen baru di dalam text editor, misal notepad, dan masukkan gaya-gaya yang akan ditentukan.
  2. Save file tersebut dengan extensi ".css".
  3. Buka file HTML yang dokumennya akan diatur tampilannya oleh file css. Di dalam bagian head pada dokumen HTML, masukkan tag <link>, masukkan atribut "rel" dengan value "stylesheet" kemudian atribut type dengan value-nya yaitu "text/css" dan atribu "href" dengan value-nya yaitu link ke file css yang sudah dibuat. 
    contoh
    <html>
    <head>
    <title> External Style Sheets </title>
    <link rel="styelesheet" type="text/css" href="contoh.css" >
    </head>
    <body>
    </body>
    </html>

    Dokumen yang kemudian dibuat tampilannya akan mengikuti gaya yang ditentukan oleh file css yang sebelumnya telah dirujuk

Posted in:

0 komentar:

Posting Komentar