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;
}
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 :
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 :
E. MASALAH YANG DI TEMUKAN
Penggunaan Script External hanya untuk halaman yang sama , jika berbeda style nya harus buat file baru yang berisi script yang berbeda.
F. KESIMPULAN
Penggunaan Metode External Style lebih di rekomendasikan dari pada Inline Style dan Internal Syle
G. REFERENSI
https://www.duniailkom.com/tutorial-belajar-css-cara-menginput-kode-css-ke-halaman-html/
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;
}
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 :
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 :
E. MASALAH YANG DI TEMUKAN
Penggunaan Script External hanya untuk halaman yang sama , jika berbeda style nya harus buat file baru yang berisi script yang berbeda.
F. KESIMPULAN
Penggunaan Metode External Style lebih di rekomendasikan dari pada Inline Style dan Internal Syle
G. REFERENSI
https://www.duniailkom.com/tutorial-belajar-css-cara-menginput-kode-css-ke-halaman-html/
Sekian dan Terima Kasih karena sudah membaca Blog saya yang Sederhana
Ini 😁 Jika ada salah arti atau kata bisa beri komentar kalian di kolom
komentar.....
Tidak ada komentar:
Posting Komentar