3 Cara Pemanggilan CSS Di HTML

3 Cara Pemanggilan CSS Di HTML

Kali ini saya akan membagikan artikel mengenai cara pemanggilan css di html. Karena hal ini merupakan hal dasar.

Ada tiga cara untuk memanggil css ke dalam html. Yaitu

  • Inline, pemanggilan yang dilakukan langsung di dalam tag HTML.
  • Internal, pemanggilan yang dilakukan didalam file HTML tersebut, tepatnya didalam tag head
  • Eksternal, pemanggilan yang dilakukan melaui file berbeda, jadi file html dan cssnya dipisah.

Nah, saya akan membahas satu persatu pemanggilanya.

Inline

Pemanggilan dengan Inline, yaitu pemanggilan yang dilakukan langsung didalam tag html tersebut.

Caranya dengan menambahkan atribut style, lalu menuliskan kode cssnya.

Contoh.

<div style="background-color: blue; color: white; padding: 4rem">
 Inline CSS
</div>

Hasilnya

Inline CSS

Cara ini cocok digunakan untuk css yang tidak terlalu banyak, jika banyak gunakanlah internal atau eksternal.

Internal

Internal yaitu pemanggilan yang dilakukan didalam file html tersebut, tepatnya di dalam tag head.

Cara pemanggilanya yaitu dengan memasukan kode css didalam tag style

Contoh.

<!doctype html>
<html>
<head>
  <title>Internal</title>
  <meta charset=utf-8>
  <style>
   div{
    background-color: red;
    color: white;
    padding: 4rem
   }
  </style>
</head>
<body>

 <div>
  Internal CSS
 </div>

</body>
</html>

Hasilnya

Internal CSS

Cara ini cocok digunakan untuk jika kalian tidak mau repot-repot membuat file baru untuk css.

Eksternal

Cara pemanggilan eksternal yaitu dengan memisahkan file html dan css, lalu file css tersebut dihubungkan di html.

Cara menghubungkanya yaitu dengan tag link, dan diletakan didalam tag head.

<link rel="stylesheet" type="text/css" href="namafile.css">

Contoh.

file html

<!doctype html>
<html>
<head>
  <title>Eksternal</title>
  <meta charset=utf-8>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

 <div>
  Eksternal CSS
 </div>

</body>
</html>

file css

div{
 background-color: black;
 color: white;
 padding: 4rem
}

Hasilnya

Eksternal CSS

Cara ini merupakan cara yang paling bagus, dan saya menyarankan menggunakan cara ini.

Dari cara diatas, saya menyarankan menggunakan metode Eksternal. Karena ini tidak akan membuat file html menjadi berat.

Sekian dari saya semoga bermanfaat.

Related Post

Comments

X