Pada bab awal CSS dasar ini kita akan mempelajari bagaimana cara memasukan kode css ke html atau memanggil kode css ke html. Perlu kita ketahui bahwa css adalah bahasa yang beda dengan html dan php, fungsinya pun berbeda seperti pada awal pembahasan yaitu lebih mengarah ke front-end desain.
Cara Memasukan Kode CSS ke HTML
Lalu bagaimanakah cara memasukan kode css ke html? agar kode css terpanggil atau bisa digunakan untuk ditambahkan ke dalam kode html ada 4 metode yang bisa digunakan, yaitu linking (external) stylesheets, embedded stylesheets, inline stylesheet dan Imported Stylesheets.
Dari ke-empat metode untuk menambahkan css kedalam html tersebut akan kita bahas satu-persatu, namun sekali lagi dalam programming kita tidak berbicara tentang mana yang lebih baik, tetapi tergantung kebutuhan.
Linking (External) Stylesheets
Cara ini sering digunakan untuk mempermudah penulisan kode css, karena bagian penulisan akan terpisah dengan kode html langsung sehingga terlihat lebih rapih. Untuk memasukan kode css ke html dengan menggunakan metode eksternal stylesheets yaitu dengan menggunakan tag <link> yang diarahkan ke file stylesheets terpisah dengan ekstensi .css, berikut ini kode untuk menambahkan file teks css ke dalam html diletakan diantara tag <head> dan </head>.
<head>
  <link type="text/css" href="..." media="..." />
</head>Code language: HTML, XML (xml)Berikut ini detail penjelasan atribut yang digunakan di tag <link>
| Atribut | Nilai | Keterangan |
|---|---|---|
| type | text/css | Digunakan untuk menentukan jenis bahasa file yang akan dibaca oleh komputer (MIME Type) |
| href | URL | Letak file css yang ingin ditambahkan ke dalam html |
| media | screen, tty, tv, projection, handheld, print, braille, aural, all | Untuk menentukan spesifikasi device yang akan ditampilkan kode css, secara default menggunakan media all |
Sebagai contoh kode eksternal link agar lebih mudah dipahami, contohnya sebagai berikut…
<link stype="text/css" href="css-file.css" media="all">Code language: HTML, XML (xml)Letak file css disesuaikan dengan penempatan file tersebut, dan untuk menggunakan atribut media dapat disesuaikan dengan kebutuhan.
Embedded Stylesheets
Lain halnya dengan metode embedded stylesheets, dimana kode css disatukan dengan kode html, cara ini jika dalam pengkodingan tentu kurang efisien namun dalam beberapa kondisi hal ini sering dilakukan tetapi tidak selalu digunakan, berikut ini cara memasukan kode css ke html dengan metode embedded stylesheets.
<head>
  <style type="text/css" media="...">
    ... kode css ...
  </style>
</head>Code language: HTML, XML (xml)Sama seperti cara memasukan kode css ke html dengan menggunakan metode eksternal stylesheets, yaitu diletakan diantara tag pembuka <head> dan penutup </head> namun tidak dengan menggunakan tag <link> melainkan langsung dengan menggunakan tag <style> yang diakhiri dengan penutup.
Inline Stylesheets
Metode inline stylesheet ini berbeda diantara kedua metode diatas, untuk memasukan kode css ke html dengan metode inline ini yaitu dengan cara kode css dibenamkan langsung ke dalam element html, atau diarahkan langsung ke dalam element html dengan menggunakan atribut style, berikut ini contohnya.
<element style="...">Code language: HTML, XML (xml)Sebagai contoh…
<h1 style="color: #ff0000">Ini adalah tag heading warna merah</h1>Code language: HTML, XML (xml)Import Stylesheets
Cara import ini sebenarnya sama dengan eksternal stylesheet, dimana file teks css diletakan secara berbeda di luar kode html, hanya saja cara ini dipanggil dengan menggunakan perintah @import pada css.
<head>
  <style type="text/css">
    @import url('css-file.css');
  </style>
</head>Code language: HTML, XML (xml)Untuk lokasi file css disesuaikan dengan letak penempatan kode css, ketika menentukan lokasi yang salah atau tidak sesuai maka file css tidak akan berfungsi.
Demikian tutorial penjelasan cara memasukan atau menambahkan file css kedalam html, semoga dapat bermanfaat dan dipahami dengan mudah.
TSAMARAH ANANDA DWI OKTAMI