Assalamu'alaikum Warahmatullaahi Wabarakatuh.
Pada artikel sebelumnya kita telah mempelajari tentang komentar. Kali ini kita akan membahas styling. Sebenarnya kita pernah membahas sepintas pada Belajar HTML Part 5 - Pengaturan Style. Namun di sini kita akan lebih memperdalamnya, khususnya bagaimana cara mengombinasikan HTML dengan CSS.
Sebelumnya, apa itu CSS? Anda bisa membacanya di artikel saya Belajar CSS Part 1 - Mengenal CSS dan Sintaks Dasar CSS.
Langsung saja, terdapat 3 cara dalam mengombinasikan HTML dengan CSS. Yaitu dengan Inline Styling, Internal Styling, dan External Styling.
A. INLINE STYLING
Teknik yang pertama adalah inline styling. Yaitu dengan menyisipkan style secara langsung pada elemen tertentu. Untuk inline styling ini sebenarnya kita telah mempelajarinya pada Part 5 Tapi tidak ada salahnya kita di sini sedikit mengulas kembali. Misalnya, coba ketik script berikut :
<p style="color: blue;">
Paragraf ini akan berubah menjadi warna biru.</p>
Simpan script tersebut dan jalankan pada browser. Berikut hasilnya :
Teknik inline styling ini biasa digunakan jika sebuah elemen memiliki kebutuhan style khusus.
B. INTERNAL STYLING
Jika inline styling digunakan untuk satu elemen khsusus, internal styling digunakan untuk satu dokumen yang sama.
internal styling ditulis di dalam tag <head> dengan menggunakan tag <style>. Lebih jelasnya silahkan ketik script di bawah ini :
<!DOCTYPE html><html> <head> <title>Kombinasi HTML dan CSS</title> <style> body {background: green;} h1 {color: blue;} p {font-family :jokerman;} </style> </head> <body> <h1>
Judul ini berwarna biru</h1> <p>
Paragraf ini ditulis dalam font Jokerman</p> </body> </html>
Simpan file tersebut kemudian jalankan pada browser. Berikut hasilnya :
Bisa kita lihat, apa yang didefinisikan pada tag <style> akan digunakan di seluruh dokumen HTML yang kita tulis. Demikian bisa difahami bahwa satu script internal styling dapat digunakan untuk satu halaman.
C. EXTERNAL STYLING
Dengan teknik external styling, kita akan membuat satu buah file terpisah yang telah berisi kode-kode CSS, kemudian kita akan memanggil file tersebut dari file HTML kita.
Langkah pertama yang akan kita lakukan yaitu membuat file CSS-nya. Silahkan ketik script berikut :
body {
background: green;
}h1 {
color: blue;
} p {
font-family :jokerman;
font-size : 24px;
}
Kemudian simpan misalnya dengan nama style.css. Jangan lupa menambahkan ekstensi .css dalam penamaan sebuah file css.
Selanjutnya kita akan memanggil file tersebut dari file HTML kita. Silahkan ketik script di bawah :
<!DOCTYPE html> <html> <head> <title>Kombinasi HTML dan CSS</title> <link rel="style/css" href="style.css" /> </head> <body> <h1>
Judul ini berwarna biru</h1> <p>
Paragraf ini ditulis dalam font Jokerman dan ukuran font 24</p> </body> </html>
Kemudian kita simpan file tersebut pada folder yang sama dengan file style.css. Kemudian kita jalankan file HTML yang kita buat barusan. Berikut hasilnya :
Penggunaan external link ini adalah jika sebuah style CSS dibutuhkan dalam banyak file HTML. Dimaksudkan agar kita tidak harus mengetik kode style tersebut satu per satu di setiap file HTML kita, namun dengan cukup satu kali penulisan kode, kita bisa memanggil file CSS tersebut untuk setiap HTML kapan pun kita membutuhkannya.
Demikian Belajar Kombinasi HTML dengan CSS. Mudah-mudahan bermanfaat. Terima kasih,
Wassalamu'alaikum Warahmatullaahi Wabarakatuh
artikelnya sangat membantu kak.
ReplyDeleteCSS