tutorial css

Cara Penulisan Kode CSS

Tutorial Belajar CSS Bagian 2 : Cara Penulisan Kode CSS

Pada tutorial sebelumnya kita sudah berkenalan dengan css, jika kamu belum membacanya saya sarankan untuk membacanya terlebih dahulu agar dapat dengan mudah mengikuti tutorial css kedepannya.

Cara penulisan kode css ke html atau lebih tepatnya menginputkan kode css ada bebrapa macam. Secara garis besar dapat dibedakan menjadi tiga cara.

 

Inline CSS

Cara penulisan css yang pertama adalah penulisan secara inline. Cara ini menempatkan langsung kode css pada tag html.

Penulisan kode CSS secara inline memang sangat mudah, kita tinggal menambahkan atribut style kemudian mengisinya dengan property dan value css. Namun cara penulisan css ini tidak direkomendasikan untuk halaman html yang sudah kompleks, karena akan terlihat sangat berantakan.

Bahkan untuk halaman html sederhanapun kita tidak dianjurkan untuk menggunakan cara penulisan ini.

 

Internal CSS (embed)

Kemudian penulisan css yang kedua adalah secara Internal (embeded). Jika penulisan css secara inline yaitu langsung pada tag html, maka untuk menulis kode secara embed kode css ditempatkan pada bagian head html yaitu diantara tag <head> . . .  </head>.

Namun perlu diperhatikan bahwa penulisan css secara internal memerlukan tag tambahan, yaitu tag <style> . . </style> dan semua kode css berada diantara tag tersebut.

Perhatikan contoh berikut :

 

Eksternal CSS

Cara penulisan css yang ke tiga adalah secara eksternal, yaitu dengan cara memisahkan kode css dengan html. Kode css ditulis pada file dengan ekstensi dot css ( .css ).

Misalnya saya memiliki sebuah file html dengan nama index ( index.html ) dan kode css dengan nama file style ( style.css ). Nah file ini ( index.html ) nantinya akan saya link-kan dengan file style.css.

Mari kita praktekan. Pertama buatlah sebuah file html dengan nama index.html dan file css dengan nama styel.css.

Lalu buat struktur dasar html yang memuat tag p.

Index.html

 

Sekarang kita buat file style.css lalu isi dengan selector p, property dan value kemudian simpan pada folder yang sama dengan file index.html

Maksud dari kode css tersebut adalah saya ingin agar text yang ada di index.html berwarna biru. Sekarang coba jalankan file index.html di web browser.

Apakah textnya berwarna biru?

Tentu saja tidak :). Karena saya belum menghubungkan file index.html dengan file style.css yang baru saja kita buat.

Lalu bagaimana menghubungkannya?

Untuk menghubungkan file index.html dan style.css kita dapat menggunakan tag link pada html. Jika kamu belum tau mengenai tag link kamu dapat membacanya disini.

Caranya cukup mudah, kita tinggal meamnggil file style.css menggunakan tag link. Buka kembali file index.html lalu kita tambahkan baris kode berikut pada bagian head.

Index.html setelah perubahan

 

Sekarang coba jalankan kembali file index.html di web browser, tulisannya berwarna biru bukan? 🙂

Cara penulisan css secara eksternal inilah yang akan sering kita jumpai, karena kode html dan css tidak menyatu dalam satu halaman sehingga terkesan rapi. Namun dalam prakteknya nanti kamu bebas menggunakan cara penulisan yang mana saja.

 

Sekian pembahasan mengenai Cara Penulisan Kode CSS, lanjut tutorial berikutnya Selector , Property, dan Value CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *