Cara Memasukan Kode CSS Ke HTML

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.

Baca juga:  Pengertian Selector Css

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.

Baca juga:  Pengertian CSS (Cascading Style Sheets)

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>

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">

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>

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="...">

Sebagai contoh…

<h1 style="color: #ff0000">Ini adalah tag heading warna merah</h1>

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>

Untuk lokasi file css disesuaikan dengan letak penempatan kode css, ketika menentukan lokasi yang salah atau tidak sesuai maka file css tidak akan berfungsi.

Baca juga:  Cara Penulisan Kode CSS

Demikian tutorial penjelasan cara memasukan atau menambahkan file css kedalam html, semoga dapat bermanfaat dan dipahami dengan mudah.