www.WarungProgram.com

Tempat Belajar Bahasa Pemrograman Dari Dasar


Cara Menggunakan CSS di HTML

Penulis : Zulfikar Kategori : Belajar CSS

Cara Menggunakan CSS di HTML

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.

Silahkan Daftarkan Email Kamu Agar Selalu Update Saat Ada Tutorial Terbaru

*
*

Dapatkan Tutorial Terbaru Dari WarungProgram.com

Tutorial Lainnya