Seperti janji saya kemarin disini saya membuat satu lagi cara penulisan tentang cara penulisan CSS yaitu dengan Cara Menggunakan External Style CSS, dimana cara penggunaan CSS yang paling disarankan dan paling fleksibel adalah dengan metode external style CSS. Dengan metode ini, seluruh kode CSS ditempatkan pada file terpisah. Setiap halaman HTML yang membutuhkan style CSS tinggal memanggilnya menggunakan tag <link>.
External style CSS dengan <link> element
Untuk Cara Menggunakan External Style CSS, yang pertama adalah dengan menggunakan tag <link>. Agar lebih mudah dipahami, langsung saja kita paktek dengan contoh kode program. Buatlah sebuah file teks baru menggunakan text editor, kemudian ketik kode CSS berikut:
h1 {
color: red;
}
p {
font-size: 18px;
color: silver;
}
Simpan teks tersebut dengan nama style.css dan simpan di folder belajar_css (atau pada satu folder dengan dokumen HTML yang akan dibuat). File ini adalah file external CSS. Teman-teman boleh menggunakan nama apa saja, selama akhiran filenya adalah “*.css”.
Untuk dapat menjalankan kode CSS di atas, tambahkan tag berikut di bagian <head> HTML:
Tag <link> digunakan untuk menghubungkan halaman HTML saat ini dengan file external, dimana salah satunya adalah CSS. Atribut href berfungsi sebagai alamat dari file CSS yang akan diinput. Karena file style.css berada di dalam folder yang sama, maka saya tinggal menulisnya sebagai href=”style.css”
Jika teman-teman meletakkan file style.css ditempat lain (misalnya di dalam sebuah folder), maka penulisan nilai href harus sesuai dengan alamat file tersebut. Dalam istilah HTML, kita bisa menggunakan alamat relatif seperti href=”css/style.css” maupun alamat absolute seperti href=”http://www.kursuswebsite.org/style.css”.
Atribut rel merupakan singkatan dari relationship, digunakan untuk menjelaskan kepada web browser hubungan file yang akan di-link kan. Nilai rel=”stylesheet” berarti file yang akan di-link adalah file stylesheet. Selain itu, ketika menggunakan tag <link> teman-teman juga akan mendapati beberapa sumber menambahkan atribut type=”text/css”. Atribut type digunakan untuk memberitahu web browser bahwa file stylesheet yang di link adalah CSS.
Dalam HTML5 atribut ini tidak lagi diperlukan, karena secara default web browser menggunakan CSS sebagai stylesheet. Walau demikian, anda juga boleh menuliskan atribut ini, sehingga penulisan tag <link> menjadi:
<link href="style.css" rel="stylesheet" type="text/css" >
Perhatikan bahwa tag <link> adalah self closing tag, sehingga tidak membutuhkan tag penutup. Berikut kode HTML lengkap dengan penambahan tag <link>:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Belajar CSS <strong>Cara Menggunakan External Style CSS</strong></title> <link href="style.css" rel="stylesheet"> </head> <body> <h1>Belajar CSS</h1> <p> <strong>Cara Menggunakan External Style CSS</strong>. </p> </body> </html>
Teman-teman perhatikan saja tag link yang berada pada tag head ya, karena tag link itu lah yang memanggil file eksternal CSS kita, dan seperti ini lah Cara Menggunakan External Style CSS, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.
The post Cara Menggunakan External Style CSS appeared first on Kursus Website Terbaik.