Website tanpa ada nya styling seperti warna, positioning dll terasa aneh ya, nah makanya kita mempelajari menggunakan CSS dan Apa itu CSS..
Mari Mengenal CSS
CSS (Cascading Style Sheet) digunakan untuk mempercantik tampilan dari halaman website kita.
Jadi, dengan kita menggunakan CSS.. tampilan halaman website kita sekarang bisa lebih menarik lagi ya..
Penggunaan CSS pada HTML
Nah sekarang bagaimana kita untuk menggunakan CSS pada HTML kita ? Yuk kita bahas aja..
Untuk menggunakan CSS pada HTML yaitu ada 3 cara :
- Menggunakan CSS External
- Menggunakan CSS Internal
- Dan yang terakhir menggunakan CSS Inline (kurang di rekomendasikan)
Penggunaan CSS External
Yang dimaksud dengan CSS External itu adalah CSS yang berbeda file dengan HTML kita. Jadi disini kita memiliki 2 file yaitu file HTML dan file CSS sepert gambar dibawah ini.
Nah pada gambar ini, kita memiliki file CSS nya dengan nama style.css, jadi file CSS ini memang sudah berada diluar dari file HTML nya.
Langkah berikutnya, kita harus menghubungkan file HTML nya dengan file CSS nya, seperti gambar dibawah ini..
Jadi untuk menghubungkan file CSS nya, kita menggunakan code
<link rel=”stylesheet” href=”style.css”> yang didalam href nya lah bisa kita tuliskan nama file CSS external kalian ya.. penulisan tidak boleh salah..
Penggunaan CSS Internal
Nah sekarang kita bisa menggunakan juga CSS Internal, apa sih yang dimaksud dengan CSS Internal ??
CSS Internal yang dimaksud adalah, kita bisa menuliskan code CSS tanpa membutuhkan file CSS External lohh,.. Bagaimana caranya ? Yuk simak aja selanjutnya..
Penulisan CSS Internal berada didalam element <head>, seperti ini contoh penulisannya..
Output nya
Lebih simple kan untuk CSS Internal, tetapi akan bisa membuat Panjang line penulisan di file HTML kita, maka nya kalau emang lebih baik menggunakan CSS External saja ya..
Penggunaan CSS Inline
Sekarang kita akan membahas cara penggunaan CSS Inline, sebenarnya ini CSS yang kurang direkomendasikan kalau sudah menggunakan banyak Property CSS.
Seperti ini penulisan CSS Inline
Penulisannya didalam Tag HTML nya yaa, diawali dengan style, lalu diikuti dengan property CSS lainnya, Sehingga Outpunya seperti ini
Dari segi output memang tidak ada bedanya, tetapi dari segi penulisannya, inline sangat tidak direkomendasikan yaa..
