Materi 2 : Metode Penulisan CSS
Metode Penulisan CSS - Pada materi sebelumnya, telah dibahas
tentang Mengenal CSS dan Fungsinya. Adapun untuk materi kali ini kita akan membahas
tentang tata cara penulisan CSS, walaupun pada materi sebelumnya sudah dibahas
tetapi materi kali ini adalah jenis-jenis cara penulisannya.
Metode penulisan CSS itu ada 3 jenis,
ada metode internal CSS, inline CSS dan metode eksternal CSS. Masing-masing metodenya akan kita bahas dibawah ini
Cara Penulisan CSS
Metode penulisan css di dalam
HTML itu ada tiga macam
1.
Internal
CSS
Metode internal CSS adalah
menuliskan baris kode css dengan dibungkus oleh tag style, lebih tepatnya kode
ini ditulis sebelum tag </head> penutup.
Perhatikan contoh penulisannya berikut ini
Diatas adalah contoh cara penulisan
css dengan metode internal CSS. Yaitu kita menuliskan kode css langsung pada
file projek HTML kita. Dan berikut ini adalah hasilnya
1.
Eksternal
CSS
Sedangkan untuk metode yang ke-2
ini adalah kita harus membuat file CSS secara terpisah yang nantinya kita akan
sambungkan dengan file HTML yang sudah dibuat sebelumnya. Perhatikan contoh
penggunaannya berikut ini
Perhatikan gambar di atas, pertama
buatlah sebuah file lalu save dengan nama style (terserah mau dinamai apa) yang
penting ekstensi filenya adalah .css(dot
css) [lihat gambar diatas]
Selanjutnya baris kode css kita
ketikan dalam file style.css yang telah kita buat. Berikutnya adalah
menghubungkan file css kedalam kode HTML kita.
Cara menghubungkan file css dengan
file HTML kita adalah dengan metode insert link, yaitu memasukan link file CSS
kita sebelum tag </head> penutup seperti gambar di atas dengan menambahkan
satu baris kode <link
rel="stylesheet" type="text/css"
href="style.css">
Dan berikut ini adalah hasilnya [akan
tetap sama dengan metode penulisan css yang pertama]
1.
Inline
CSS
Adapun metode yang terakhir adalah
dengan menambahkan langsung atribut style untuk tempat penulisan kode CSS kita
nanti. Perhatikan contoh penulisannya berikut ini
Lebih mudahnya
adalah dengan menuliskan baris kode CSS pada baris tag HTML yang akan kita hias
atau yang akan kita ubah. Caranya adalah menambahkan atribut style=”” setelah tag HTML.
Dan hasilnya akan
seperti gambar di bawah ini [sama dengan metode penulisan css yang pertama dan
kedua]
Kesimpulan
- Silahkan pilih metode penulisan CSS yang menurut kita lebih mudah
- Metode penulisan CSS yang paling sering digunakan adalah metode eksternal atau memisahkan antara file HTML dan CSS tapi kedua file tersebut masih dalam satu folder yang sama.
Post a Comment for "Materi 2 : Metode Penulisan CSS"