Membuat File CSS Yang Terpisah Dari HTML (External CSS)

Niguru.com | Niguru.com | Kamis, 5 Nov 2020 | Pada posting sehari sebelumnya, Niguru.com sudah menjelaskan mengenai cara untuk mengatur tampilan website dengan CSS (Cascading Style Sheets). Dengan CSS pengaturan tampilan website bisa dilakukan dengan hanya sekali edit pada area style saja.

Pada posting kali ini Niguru.com akan menjelaskan cara untuk membuat file CSS terpisah (berupa file eksternal), namun tetap memiliki fungsi yang sama dengan file yang menyatu dengan halaman HTML.

Sintaks untuk file CSS eksternal:

body_atau_tag{properti;}

kemudian disimpan dalam file berekstensi (extension) .CSS.

Lebih sederhana bukan? Tidak perlu tag <style> </style>  untuk mengapit script CSS.

Dan sintaks integrasi CSS pada HTML adalah:

<link rel="stylesheet" href="nama_file.css">

Perhatikan cara penulisan dan pembuatan file .CSS pada contoh berikut ini:

body{background-color:black;

font-family:tahoma;

color:white;}

h1{color:orange;}

abc{font-size:40px;}

 

Simpan dengan nama niguru.css (boleh disimpan dengan nama lain):

 

Kemudian contoh untuk HTML:

<link rel="stylesheet" href="niguru.css">

<h1>Belajar CSS</h1><br>

<abc>

Ini halaman web setelah pengaturan CSS

</abc>

 

Simpan dengan nama test05.html (boleh disimpan dengan nama lain):

 

Buka browser dan jalankan file test05.html. Hasilnya:

Demikianlah penjelasan cara untuk membuat file CSS secara eksternal, serta cara linking file tersebut pada halaman HTML.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)