A). Pendahuluan
Setelah kemarin kita membahas Metode Internal Style yang cara penulisan scriptnya harus tiap halaman . Kali ini kita akan mencoba cara yang lebih praktis jika kita membuat beberapa halaman yaitu menggunakan Metode External Style , langsung saja kita bahas sekarang...
B). Pengertian
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style
sheet language) yang mengontrol format tampilan sebuah halaman web yang
ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS
digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang
CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL
bahkan ANDROID.
Metode External Style Sheets digunakan untuk ‘mengangkat’
kode CSS tersebut kedalam sebuah file tersendiri yang terpisah
sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS,
tinggal ‘memanggil’ file CSS tersebut.
C). Maksud dan Tujuan
Dapat memahami Penggunaan Metode External Style CSS
D). Pembahasan
Ada dua cara input Metode External Style , bisa menginputkan lewat @import dan menggunakan tag <link> .
*Script "sinau.css"
h2 {
background-color:red;
color:yellow;
}
Ok, langsung saja kita bahas mulai dari :
1. @import
Untuk metode @import external style sheets ini, kita menyisipkan
@import url(sinau.css); pada tag <style>. contoh script nya :
<!DOCTYPE html>
<html>
<head>
<title>Contoh External Style CSS Menggunakan @import</title>
<style type="text/css">
@import url(sinau.css);
</style>
</head>
<body>
<h2>
Text ini akan bewarna kuning dan background warna merah
</h2>
<h3>
Contoh External Style CSS Menggunakan @import
</h3>
</body>
</html>
Hasil dari script :
2. tag <link>
Pada metode link external style sheets ini, kita menggunakan
atribut href pada tag <link>, yang akan berisi alamat dari halaman
CSS, dalam hal ini sinau.css.
contoh scriptnya :
<!DOCTYPE html>
<html>
<head>
<title>Contoh External Style CSS Menggunakan tag Link</title>
<link rel="stylesheet" type="text/css" href="sinau.css">
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
<h3>
Contoh External Style CSS Menggunakan tag Link
</h3>
</body>
</html>
Hasil dari script :
E). Masalah yang Dihadapi
Penggunaan Script External hanya untuk halaman yang sama , jika
berbeda style nya harus buat file baru yang berisi script yang berbeda.
F). Hasil Kesimpulan
Penggunaan Metode External Style lebih di rekomendasikan dari pada Inline Style dan Internal Syle.
https://www.duniailkom.com/tutorial-belajar-css-cara-menginput-kode-css-ke-halaman-html/
Cukup sekian informasi yang dapat saya berikan pada hari ini, semoga bisa bermanfaat dan berguna buat orang lain. Jika ada
kesalahan kata saya mohon maaf. Terima kasih telah mengunjungi blog saya,
dan jangan lupa untuk mengikuti dan membaca selalu postingan di blog
saya yang saat ini masih biasa-biasa saja.
~ Wassalamu'alaikum Wr. Wb. ~
Postingan
Tidak ada komentar:
Posting Komentar