Cara Menambahkan CSS


Cara menambahkan CSS atau jenis jenis CSS wajib kalian pahami terlebih dahulu sebelum kalian mulai menggunakan CSS. Setelah sebelumnya kita sudah membahas mengenai Selector, kini kita akan membahas Belajar Cara Menambahkan CSS atau bisa kita sebut juga Jenis jenis CSS.

Bagi kalian yang belum membaca artikel atau materi sebelumnya mengenai Selektor pada CSS, kalian bisa membaca nya terlebih dahulu.

Baca Juga - > Belajar Selektor pada CSS

Bagaimana cara menambahkan CSS pada HTML kita ?

Ada 3 cara untuk menambahkan CSS atau 3 jenis CSS. Apa saja itu ?

  1. External CSS
  2. Internal CSS
  3. Inline CSS
Yang mana akan kami jelaskan satu persatu disini.

External CSS.

Dengan External CSS, kalian dapat menambahkan atau memberikan style CSS dengan cara memisahkan antara file HTML dan CSS nya sendiri. Contohnya, saya memiliki dua file yang mana satu file untuk HTML dan satu file lagi khusus untuk CSS.

Cara menghubungkan satu file tersebut dengan file CSS, kita cukup memberikan alamat/lokasi file css kita di dalam tag <link>. Contoh nya kalian dapat melihat di bawah ini.

Contoh ( File HTML nya )


  <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>Ini Heading</h1>
<p>Ini paragrf.</p>

</body>
</html>

Yang mana pemberian tag <link> nya tepat di atas tag </head>

Contoh ( File CSS nya )

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Dan ekstensinya untuk File CSS yaitu .css . Perlu kalian ingat, ekstensi nya .css ya

Internal CSS

Dengan internal CSS, kalian dapat menambahkan style css hanya menggunakan satu file html tersebut yang mana pemberian style terjadi sebelum tag </head> dan diapit tag <style> ... </style>

Contoh nya :


<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Dan hasil nya seperti ini.
Internal CSS

Inline CSS

Mungkin dari namanya kalian sudah bisa menebak ya. Inline CSS, dilihat dari namanya, Inline CSS ini memiliki arti satu baris atau garis. Yang mana pemberian style css nya langsung pada element atau tag yang ingin di beri style.

Untuk menggunakan Inline CSS untuk menambahkan stylenya kita cukup menambahkan atribut style pada element atau tag yang dituju. Yang mana di dalam atribut style akan terdapat banyak property dari css nantinya.

Kita langsung melihat contohnya saja, agar kalian tidak kebingungan.

Contoh.



<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Hasil dari penulisan diatas seperti ini.
Inline CSS

Kali ini kita sudah selesai mempelajari Cara menambahkan CSS atau jenis jenis CSS walaupun disini tidak menjamin kalian akana langsung paham dan bisa, tapi setidaknya kalian sudah mengerti dan paham, tentang konsep nya. 


Jadi kalian bisa belajar lebih dalam lagi sendirian. Dan apabila kalian ada yang tidak paham, bisa bertanya ke kami. Cukup sekian, Terima kasih dan sampai jumpa.

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Posting Komentar

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Post a Comment (0)

Lebih baru Lebih lama

ads

ads