Tutorial CSS untuk Pemula: Cara Memasukkan Kode CSS ke dalam File HTML



Halo gan. Di postingan sebelumnya kita sudah membahas aturan penulisan kode atau syntax pada CSS. Lalu apa yang akan kita bahas di postingan kali ini?

Kali ini kita akan membahas cara memasukkan atau menginputkan kode CSS ke dalam file HTML.

tutorial css untuk pemula

Cara memasukkan kode CSS ke dalam file HTML

Ada 3 cara untuk memasukkan kode CSS ke dalam file HTML:

..cara inline style,

..cara internal style sheet dan,

..cara eksternal style sheet.

Kita bahas satu per satu.

Cara inline style

Cara yang pertama yaitu inline style. Cara ini langsung menempelkan kode CSS ke tag HTMLnya dengan menggunakan atribut style.

Jadi, kode CSSnya tergabung menjadi elemen HTML.

..langsung ke contoh kodenya.
<!DOCTYPE html>
<html>
  <head>
    <title>Memasukkan kode CSS dengan cara inline style</title>
  </head>

  <body>
    <h1 style="color:red;background:black">Ini adalah elemen heading (h1) yang diubah warna huruf dan latar belakangnya oleh kode CSS dengan cara inline style</h1>
  </body>
</html>

Simpan filenya yang berisi kode di atas dengan nama inline-style.html. Lalu jalankan dengan web browser.

tutorial css untuk pemula

Jeng.. jeng.. berubah kan? Warna hurufnya menjadi merah dan latar belakangnya menjadi hitam.

..sesuai dengan kode CSS yang kita tempel di tag h1 di atas.

Cara internal style sheet

Cara yang kedua yaitu dengan internal style sheet. Cara ini sudah memisahkan kode CSS yang ditempel di tag HTML (cara inline style).

Kode CSS diletakkan di dalam tag <style>.. tag <style> ini posisinya ada di dalam tag <head>.

Jadi, kode CSS dengan elemen HTML sudah terpisah namun kode CSS masih di dalam file HTML.

..belum benar-benar memisahkan antara konten dan tampilan. Ingat, HTML is for content. CSS is for presentation.

Kita ambil contoh kode yang sama dengan kode CSS inline style tapi ada beberapa yang harus diubah.
<!DOCTYPE html>
<html>
  <head>
    <title>Memasukkan kode CSS dengan cara internal style sheet</title>
    <style>
    h1 {
        color:red;
        background:black;
    }
    </style>
  </head>

  <body>
    <h1>Ini adalah elemen heading (h1) yang diubah warna huruf dan latar belakangnya oleh kode CSS dengan cara inline style</h1>
  </body>
</html>

Simpan dengan nama file internal-style-sheet.html. Lalu jalankan dengan web browser. Hasilnya pun akan sama dengan cara inline style.

tutorial css untuk pemula

Eksternal style sheet

Cara yang terakhir yakni eksternal style sheet. Dengan cara ini, kode CSS dan kode HTML benar-benar terpisah.

..karena, kode CSS dibuat file tersendiri dan dengan ekstensi file tersendiri, yakni .css.

Kode CSS yang sudah dibuat tersendiri, akan dipanggil oleh file HTML sesuai dengan nama filenya. Ada 2 cara pemanggilan file CSS oleh file HTML:

..dengan tag <link>.. dan

..dengan tag <style> plus @import CSS.

Posisi kode keduanya, ada di dalam tag <head>.

Jadi, kode akan lebih rapi dan terorganisir. Cara inilah yang sesuai dengan konsep HTML is for content, CSS is for presentation.

Seperti ini contoh kode dengan tag <link>.
<!DOCTYPE html>
<html>
  <head>
    <title>Memasukkan kode CSS dengan cara eksternal style sheet</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>Ini adalah elemen heading (h1) yang diubah warna huruf dan latar belakangnya oleh kode CSS dengan cara inline style</h1>
  </body>
</html>

Seperti ini contoh kode dengan tag <style> dan @import CSS.
<!DOCTYPE html>
<html>
  <head>
    <title>Memasukkan kode CSS dengan cara inline style</title>
    <style>
    @import url(style.css);
    </style>
  </head>

  <body>
    <h1>Ini adalah elemen heading (h1) yang diubah warna huruf dan latar belakangnya oleh kode CSS dengan cara inline style</h1>
  </body>
</html>

Simpan dengan nama file eksternal-style-sheet.html.

Dan ini kode CSS yang disimpan dengan nama style.css.
h1 {
  color:red;
  background:black;
}

Lalu jalankan dengan web browser. Hasilnya pun akan sama.

tutorial css untuk pemula

Cara mana yang direkomendasikan banget?

Kita sudah coba ketiga cara di atas untuk menghasilkan tampilan yang sama.Lalu manakah yang direkomendasikan banget?

Jawabannya adalah..

..eksternal style sheet.

Kenapa? banyak alasannya.

..yang pertama, kode jadi lebih rapi. Terpisah antara kode HTML dan kode CSS.

..yang kedua, jika ada perubahan tampilan salah satu elemen HTML yang jumlahnya banyak, maka kita cukup dengan mengubah 1 selector saja di kode CSS.

..yang ketiga, memudahkan orang lain yang ikut mengerjakan pembuatan web dengan kita karena file dan kodingan terstruktur rapi.

Sampai sini selesai pembahasan kita kali ini tentang memasukkan kode CSS ke dalam file HTML.

Next, kita akan membahas jenis selector yang ada di CSS..



Tag : Tutorial CSS
0 Komentar untuk "Tutorial CSS untuk Pemula: Cara Memasukkan Kode CSS ke dalam File HTML"