www.WarungProgram.com
Tempat Belajar Bahasa Pemrograman Dari Dasar
Tempat Belajar Bahasa Pemrograman Dari Dasar
Penulis : Zulfikar Kategori : Belajar CSS
Sebelumnya kita sudah belajar Pengenalan Coding Dasar CSS, Sekarang kita akan belajar Cara Menggunakan CSS di HTML.
Tutorial ini merupakan Tutorial ke 3 dari Seri Tutorial Belajar CSS Dari Dasar silahkan menuju link tersebut bagi yang ingin memulai dari dasar.
Ada beberapa cara untuk bisa menggunakan CSS di dalam html untuk mempercatik tampilan sebuah halaman website, di antaranya :
Menggunakan Element <style> atau Embed CSS
Pada Cara yang pertama ini, kita bisa menggunakan element <style> yaitu dengan cara menulis coding css di dalam elemen<style> yang di letakan di dalam tag <head> html. Berikut contoh coding nya :
<html>
<head>
<style>
h1 {
color:blue;
}
</style>
</head>
<body>
</body>
</html>
Pada contoh coding css di atas kita menyisipkan coding css menggunakan element <style> di dalam tag <head>.
Coding css di atas di gunakan untuk memberikan warna biru pada text untuk tag html <h1> atau Heading 1.
Inline Style
Cara yang kedua kita bisa menggunakan inline style yaitu langsung memberikan sentuhan coding css pada elemen html dengan menggunakan attribut style, berikut contoh coding nya :
<html>
<head>
</head>
<body>
<h1 style = "color:red;"> Ini Judul </h1>
</body>
</html>
Pada contoh di atas kita memberikan warna merah pada elemen html <h1> menggunakan inline CSS.
External CSS
Saat ini cara yang paling umum adalah Menggunakan External CSS.
Karena dengan cara ini file – file yang membangung sebuah website bisa lebih terstruktur.
Selain itu juga kita cukup menuliskan coding css 1 kali di sebuah file yang bisa digunakan berkali-kali di beberapa halaman website.
Dengan cara ini kita membuat file ber ekstensi .css yang terpisah dari file .html , lalu kita menyisipkan file .css nya dengan element <link>di dalam tag <head> biar ga bingung berikut contoh nya :
Pertama kita buat file berektensi .css yang kita beri nama style.css
File style.css
h1 {
color:blue;
}
Lalu kita buat file html nya kita beri nama index.html di dalam folder yang sama dengan file style.css lalu menyisipkan file style.css yang sudah kita buat sebelumnya.
File index.html
<html>
<head>
<link type = "text/css" href = "style.css" />
</head>
<body>
</body>
</html>
Pada contoh di atas kita memanggil file style.css menggunakan element <link>.
Dari beberapa cara di atas bisa digunakan sesuai kebutuhan.
Biasa nya cara inline style dan embed hanya di gunakan untuk perubahan kecil pada sebuah halaman website.
Saya rasa cukup untuk seri tutorial ini, silahkan di coba dan di praktekan.
boleh minta tutorial yang lain, mas? terimakasih
boleh dong mas, silahkan daftarkan email nya biar dapet notifikasi saat ada tutorial baru…