Cara Mengaitkan atau Menghubungkan file HTML dan CSS

Ada beberapa cara untuk mengaitkan atau menghubungkan file html dengan css, salah satunya adalah Embed. Embed adalah cara penulisan file CSS langsung di dalam file HTML. Selain Embed ada dua cara lagi yaitu, Inline dan External. Dalam ketiga cara ini kalian bisa menggunakan sesuai kebutuhan kalian. Berikut adalah penjelasan ketiga cara tersebut.

( baja juga : Belajar Mengoperasikan Windows dengan CMD )

Embed

Seperti yang sudah di jelaskan tadi Embed adalah cara penulisan file CSS langsung di dalam file HTML dengan menggunakan tag <Style> pada document HMTL biasa diletakkan dibawah tag <title>.

<!DOCTYPE html>
<html>
<head>
     <title> HTML dan CSS </title>

     <style>
          h1 {
              color: salmon;
          }
     </style>

</head>
<body>
      <h1>
 Ngoding Tutorial </h1>
</body>
</html>

Inline

Penggunaan Inline tidak jauh berbeda dengan Embed, tapi Inline ditulis langsung pada tag yang akan diberi style CSS.

<!DOCTYPE html>
<html>
<head>
      <title> HTML dan CSS </title>
</head>
<body>
      <h1 style="color: salmon;"> Ngoding Tutorial </h1>
</body>
</html>

External

Cara yang ketiga tidak sama dengan kedua cara di atas tadi, jika kedua cara diatas ditulis langsung pada dokument HTML, sebaliknya untuk cara ini. External adalah file CSS yang terpisah dengan file HTML? Loh kok terpisah? Gimana dong cara menghubungkannya? Untuk menghubungkannya kalian hanya perlu memberi tag <link> pada dokument HTML.

HTML

<!DOCTYPE html>
<html>
<head>
      <title> HTML dan CSS </title>
      <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
       <h1> Ngoding Tutorial </h1>
</html>

CSS

h1 {
 color: salmon;
}

Pada href itu adalah link yang menuju pada halaman CSS kalian, jika file HMTL dan CSS kalian berada dalam satu folder tuliskan saja nama filenya dan Ectensinya. Ingan Ectensi file harus dituliskan!.

Nah itulah beberapa cara menghubungkan HTML dengan CSS semoga bermanfaat. Enjoy Coding J

Cara Mengaitkan atau Menghubungkan file HTML dan CSS

10 Responses to "Cara Mengaitkan atau Menghubungkan file HTML dan CSS"