DISKON TERBATAS! Masukkan kupon "skillbaru" saat checkout di kelas apa saja

Logo Koala Skodev mengetik

Skodev

Belajar coding dalam bahasa Indonesia

CARA MENULIS CSS

CSS bisa ditulis di tiga tempat. Bersama file HTML, sebagai file terpisah CSS sendiri atau inline alias langsung pada elemen HTMLnya

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.

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.

👈🏼 Apa itu CSS
Struktur penulisan CSS 👉🏼