Bab 2 – Inline, Internal, dan Eksternal Style
Indikator Materi :
1. Memahami inline style CSS
2. Memahami internal style CSS
3. Memahami Eksternal style CSS
Pada bab kali ini, akan dibahas materi tentang inline, internal dan eksternal style pada CSS.
Inline Style
Sesuai namanya, inline style pada CSS adalah menyisipkan kode CSS ke dalam tag html, kode diletakkan pada atribut style di dalam tag html. Contoh perintah seperti berikut :
<p style=”color: red;”>Ini Tulisan berwarna merah</p>
Pada contoh baris kode di atas, ketika dibuka di web browser, akan menampilkan tulisan paragraf “Ini Tulisan berwarna merah” yang nantinya warna tulisan menjadi warna merah.
Internal Style
Internal style pada prinsipnya adalah menaruh blok kode CSS ke dalam halaman html dengan menggunakan elemen <style>, di CSS yang lebih lama, bentuk style terdapat atribut tambahan seperti ini : <style type=”text/css”>, sedangkan di html 5, lebih disederhanakan menjadi tag <style>. Contoh bentuk internal style :
<style>
body {
color: darkgrey;
background-color: lightgrey;
}
</style>
Eksternal Style
Sesuai namanya, Eksternal style adalah konsep dimana halaman web memanggil file luar atau eksternal yang berisikan sekumpulan blok kode CSS, yang nama filenya berekstensi *.css. Kelebihan dari penggunaan file eksternal style / css ini adalah, 1 file css dapat dipanggil oleh beberapa halaman web jika menganut desain pada layout utama semuanya sama. Untuk penempatan pemanggilan parameter file eksternal style, baris perintah wajib diletakkan di atas perintah </head>. Contoh perintah eksternal style :
<link href=”filestyle.css” rel=”stylesheet”>
Kesimpulannya, penggunaan konsep inline, internal dan eksternal bergantung pada kebutuhan website, jika itu bukan blok kode yang digunakan untuk membangun layout utama dan tidak dipakai oleh beberapa halaman, mungkin bisa hanya menggunakan inline style, namun jika itu digunakan untuk banyak halaman, lebih cocok jika menggunakan konsep eksternal style.
TUGAS !
1. Tuliskan cara menerapkan inline style pada tag html <h1> untuk memberikan warna tulisan menjadi biru dan background warna hijau !
2. Sebutkan 3 website untuk belajar html dan CSS !