Implementasi CSS pada HTML
Pada awal-awal perkembangan web, teknik layout dan mempercantik tampilan tidak begitu menjadi perhatian. Seiring dengan perkembangan versi HTML, muncullah Cascading Style Sheet (CSS) yang merupakan suatu cara untuk memperindah web kita.
Kemunculan teknik CSS untuk pertama kali diperkenalkan pada HTML versi 3.2, namun belum sepenuhnya optimal dan bahkan masih banyak browser-browser internet yang belum mendukung teknologi css.
Dalam pembahasan tutorial kali ini, kita akan mengdiskusikan bagaimana cara menggunakan css pada HTML.
Terdapat empat cara dalam penerapan CSS:
Penerapan model Inline ditujukan untuk baris tertentu. Jadi seperti contoh diatas, kita hanya mengeset paragraf untuk kalimat "text" berwarna merah, jika terdapat paragraf lain tidak akan berwarna merah, melainkan default warna dari tag <p> yaitu hitam.
Pada contoh diatas : tag paragraf <p> akan berbeda antara halamn web home.htm dengan profil.htm. Namun untuk satu halaman, katakanlah paragraf yang berada pada file home.html semuanya akan diset kuning dengan margin-left 12 px dan jika terdapat link akan diset warna merah.
Pemanggilan kode css dalam html :
l
Sedangkan untuk file format.css berupa :
Kemunculan teknik CSS untuk pertama kali diperkenalkan pada HTML versi 3.2, namun belum sepenuhnya optimal dan bahkan masih banyak browser-browser internet yang belum mendukung teknologi css.
Dalam pembahasan tutorial kali ini, kita akan mengdiskusikan bagaimana cara menggunakan css pada HTML.
Terdapat empat cara dalam penerapan CSS:
a. Inline
Dilekatkan langsung pada tag HTML dengan menggunakan style attribute.Penerapan model Inline ditujukan untuk baris tertentu. Jadi seperti contoh diatas, kita hanya mengeset paragraf untuk kalimat "text" berwarna merah, jika terdapat paragraf lain tidak akan berwarna merah, melainkan default warna dari tag <p> yaitu hitam.
b. Internal
Penerapan css ditulis setelah tag head dan menggunakan tag <style>..</style>. Jenis penerapan ini digunakan jika setiap halaman web memiliki karakteristik tampilan yang saling berbeda.Pada contoh diatas : tag paragraf <p> akan berbeda antara halamn web home.htm dengan profil.htm. Namun untuk satu halaman, katakanlah paragraf yang berada pada file home.html semuanya akan diset kuning dengan margin-left 12 px dan jika terdapat link akan diset warna merah.
c. Penggunaan sintaks @import di dalam elemen
Penerapan dengan model ini sangat jarang digunakan, karena bila mengload banyak css maka akan membutuhkan waktu yang lama dalam mengdownload file css tersebut.d. eksternal
Model penerapan ini ideal digunakan untuk menyeragamkan tampilan pada semua halaman web. Cara penggunaannya dengan <link>, dimana diletakkan dalam blok tag<head></head>.Pemanggilan kode css dalam html :
l
Sedangkan untuk file format.css berupa :
Model penulisan secara eksternal paling sering digunakan. Jadi, file css dipisah dari file html.
Silahkan klik penjelasannya dalam bentuk PDF