Kembali ke Daftar Isi

Apa itu CSS dan Bagaimana Cara Menggunakannya?

Apa itu CSS?

CSS adalah pendekan dari Cascading Style Sheets, ia merupakan skrip yang digunakan untuk mengubah tampilan yang digunakan oleh bahasa markup seperti HTML.

Bagaimana Cara Menggunakannya?

CSS hanya akan bekerja jika kamu menyematkannya di dalam HTML. Untuk menyematkannya, ada 3 metode yang perlu kamu ketahui.

Inline

Metode ini yang paling mudah. Kamu hanya perlu menuliskannya langsung di elemen HTML.

Adapun cara penulisannya adalah dengan menambahkan atribut style="" di elemen. Sintaknya seperti berikut:

<p style="ini tempat stylemu"></p>

Contohnya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <p style="color: green">Teks ini berwarna hijau.</p>
  </body>
</html>

Internal

Sama halnya dengan inline, kamu bisa langsung menuliskan sintaks css dalam HTML. Bedanya, internal TIDAK ditulis pada elemen, melainkan ditulis di elemen <head> atau <body> di dalam elemen <style></style>.

Sintaknya:

<style>
  elemenmu {
   kode1;
   kode2;
  }
</style>

Perhatian

Penulisan tiap-tiap kode css, wajib diakhir dengan tanda titik-koma (semicolon).

Contohnya:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      p {
        color: green;
      }
    </style>
  </head>
  <body>
    <p>Teks ini berwarna hijau.</p>
  </body>
</html>

External

Sesuai namanya metode ini memisahkan skrip CSS dan HTML-mu sendiri-sendiri. Tujuannya agar projekmu lebih rapi.

Sintaknya sama seperti inline, hanya saja kamu tidak lagi menulis elemen <style></style>. Kamu cukup membuat satu berkas css lalu panggil ia di elemen <head>.

Cara memanggilnya kamu cukup menaru skrip berikut di <head>:

<link rel="stylesheet" href="/alamat/css/mu.css">

Contoh:

Pertama-tama kamu harus membuat dua berkas CSS dan HTML dengan nama style.css dan css_external.html.

FILEstyle.css
p {
 color: green;
}
FILEcss_external.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
		<link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p>Teks ini berwarna hijau.</p>
  </body>
</html>