Belajar Html: Belajar Melampirkan Styling Pada Dokumen Html

Faiz nurullah
November 07, 2021


 

 Setelah kita mempelajari aturan penulisan CSS selanjutnya kita akan mempelajari bagaimana melampirkan sebuah styling CSS pada dokumen HTML. terdapat tiga cara melampirkan styling pada dokumen html diantaranya adalah sebagai berikut:

 1.External Styling Sheet

  External style sheet merupakan berkas yang terpisah di dalam suatu file yang berekstensi .css dan berkas ini pun nanti dihubungkan pada dokumen HTML. Cara ini merupakan cara yang paling efisien dalam menampilkan sebuah styling seat kepada dokumen html karena bisa digunakan bukan hanya satu berkas html namun lebih dari satu.

Untuk menghubungkan file CSS dengan dokumen html kita dapat menggunakan elemen <link> Pada <head> didalam berkas html. Contoh penulisan-nya sebagai berikut:

<head> <title>Document Title</title> <link href="style.css" rel="stylesheet"></link> </head>

 Pada penulisan berkas CSS di atas terdapat atribut Rel yang bernilai stylesheet sebagai relationship antara berkas style.css dengan dokumen HTML. Pada contoh diatas pun kita hanya menggunakan File yang berasal dari berkas lokal yang ada di komputer kita. Pada nilai href kita dapat hubungkan sebuah url yang berisi file CSS juga.

2.Embedded Style Sheet

 Embedded style sheet merupakan cara menampilkan sebuah stylesheet dengan menggunakan elemen <style> yang biasanya terdapat pada <head> di dalam berkas html.

<head> <title>Document Title</title> <style> /* * Rules styling dituliskan di sini */ </style> </head>


 3.Inline Style

 Inline style merupakan styling yang diterapkan pada elemen html dengan menggunakan atribut style:

<p style="color: red;">Programmer</p>


  Begitulah cara melakukan atau melampirkan suatu file CSS agar dapat terhubung dengan dokumen html sehingga kita dapat mengatur sebuah styling ke dalam sebuah halaman website. Dalam melampirkan sebuah berkas CSS terdapat 3 macam cara tentu dengan kelebihan dan kekurangan-nya masing-masing.