--> Skip to main content

Implementasi CSS pada HTML

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:

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

Oldest Post
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar