Cara menulis CSS - Referensi CSS

CSS bisa ditulis di tiga tempat berbeda.

Pada file terpisah dengan ekstensi .css
Bersamaan di file HTML tersebut dengan tag <style>
Sebagai atribut di setiap elemen HTML

1. Menulis CSS di file terpisah

CSS bisa diletakkan pada file terpisah dari HTML. Kita memberi nama filenya dengan ekstensi .css.

Cara menyambungkan file CSS dengan HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="namafile.css">
</head>
<body>

<h1>Koding Yuk!</h1>

</body>
</html>

sumber lokasi file CSS diletakkan pada atribut href di tag link.

<link rel="stylesheet" href="namafile.css">

Yang umumnya diletakkan di antara tag head pada HTML.

Sumber gambarnya bisa dari file lokal atau URL penuh.

Perhatikan cara mengambil lokasi relatif dari suatu file di sini, tergantung lokasinya.

2. Menulis CSS di file yang sama

Menulis CSS juga boleh di file HTML yang sama. Di mana kita meletakkannya di antara tag <style>.

See the Pen by Sekolah Koding (@sekolahkoding) on CodePen.

3. Menulis CSS pada baris elemen HTML

CSS juga bisa dimuat pada elemen HTML yang ingin dihias dengan atribut style. Disebut juga sebagai inline-tyle

See the Pen by Sekolah Koding (@sekolahkoding) on CodePen.

Contoh kode inline CSS

<p style="color:blue; text-align:center;">Koding Koding Koding</p>

Cara mana yang harus dipilih?

Tidak perlu bingung, yang mana pun valid. Ini hanya saran, agar file kamu lebih rapi lebih baik memisahkannya (cara pertama), agar kamu bisa membedakan saat bekerja dengan HTML atau CSS. Ini juga membuatnya lebih ringan dipandang mata.