CSS adalah cascading style sheet yang berfungsi untuk mengatur tampilan element pada web. Dengan menggunakan CSS, suatu tampilan web akan semakin menarik dalam hal GUI (Graphic User Interface). Terdapat 3 model dalam penulisan CSS pada code HTML. Antara lain :
- Inline CSS
Penulisan cara pertama ini berada di dalam suatu tag html dan biasanya diikuti dengan nama atribut style untuk mengawalinya. Berikut adalah contoh penulisan CSS dengan model inline.<h1 style="color:red">Testing</h1>
Pada contoh di atas, kita menggunakan element heading dengan mengubah warna huruf menjadi merah menggunakan model inline CSS. Maka hasilnya akan menjadi sebagai berikut.
See the Pen
Inline CSS by codenya.com (@codenyacom)
on CodePen. - Internal CSS
Penulisan cara kedua adalah menulikan code CSS di dalam file tersebut. Bukan dalam bentuk attribut style. Namun berada di antara tag <style> … </style>. Breikut ini adalah contoh penulisan CSS dalam model internal CSS.Test Internal CSS
Pada code CSS di atas, terletak di bagian atas tag heading. Code CSS tersebut akan memproses semua tag <h1> menjadi warna font merah. Maka hasilnya akan menjadi sebagai berikut.
See the Pen
Internal CSS by codenya.com (@codenyacom)
on CodePen. - External CSS
Model yang ketiga kali ini hampir sama dengan poin 2. Namun kali ini code CSS berada pada file lain. Agar code CSS terebut berfungsi dengan baik, kita harus meng-import code CSS terebut. Berikut adalah codenya untuk meng-import file CSS.<link rel="stylesheet" type="text/css" href="ambil-css.css">
Element di atas, diletakkan di antara tag <head> … </head>. Setelah itu kita membuat file CSS. Kemudian berikut adalah codenya yang ada di dalam file CSS tersebut.
h1 { color: red; }Setelah itu simpan Code di atas dengan nama ambil-css.css. Apabila dituliskan, maka hasilnya akan menjadi sebagai berikut.
See the Pen
External CSS by codenya.com (@codenyacom)
on CodePen.
Mudah Anda pahami bukan? Apabila Anda kurang paham, silahkan beri komentar di bawah postingan ini. Demikainlah penjelasan singkat mengenai Model Penulisan CSS. Semoga bermanfaat untuk Anda.
Leave a Reply