Tutorial Belajar CSS Bagian 3 : Cara Menyisipkan Kode CSS di HTML

0
26

Pada tutorial sebelumya, kita sudah belajar Tutorial Belajar HTML5 Bagian 19 : Cara Membuat Kode CSS di HTML, selanjutnya kita aka megembang materi ini bagaimana cara menyisipkan kode CSS di HTML.

Ada 4 cara untuk memanggil style CSS pada dokumen HTML.

Metode yang paling umum digunakan adalah CSS inline dan CSS Eksternal.

Interal CSS – Elemen <style>

Anda dapat membuat kode CSS ke dalam dokumen HTML menggunakan elemen <style>.

Tag ini ditempatkan di dalam tag <head> … </head>.

Kode yang telah disusun menggunakan sintaks ini akan diterapkan ke semua elemen yang berada di dokumen HTML. Berikut adalah susunan kode umum dari css :

<!DOCTYPE html>
<html>
   <head>
      <style type = "text/css" media = "all">
         body {
            background-color: linen;
         }
         h1 {
            color: maroon;
            margin-left: 40px;
         }
      </style>
   </head>   
   <body>
      <h1>Ini adalah heading.</h1>
      <p>Ini adalah paragraph.</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Atribut

Atribut yang terkait dengan elemen <style> adalah :

AtributNilaiDeskripsi
typetext/cssMenentukan bahasa style sheet sebagai tipe konten (tipe MIME). Ini adalah atribut wajib.
mediascreen
tty
tv
projection
handheld
print
braille
aural
all
Menentukan perangkat tempat dokumen akan ditampilkan. Nilai default adalah all. Ini adalah atribut pilihan (tidak wajib).

Inline CSS – Atribut Style

Anda dapat menggunakan atribut gaya dari elemen HTML apa pun untuk menentukan aturan gaya. Aturan ini hanya akan diterapkan ke elemen itu.

Berikut adalah bentuk sintaks umum :

<element style = "...kode style....">

Atribut

Nilai dari atribut style adalah kombinasi dari deklarasi style yang dipisahkan oleh titik koma (;).

Berikut adalah contoh inline CSS berdasarkan sintaks di atas :

<html>
   <head>
   </head>

   <body>
      <h1 style = "color:#36C;"> 
         Ini adalah inline CSS 
      </h1>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

CSS Eksternal – Elemen <link>

Elemen <link> dapat digunakan untuk memanggil file stylesheet eksternal dalam dokumen HTML Anda.

Metode eksternal adalah membuat file CSS terpisah dengan ekstensi .css.

Anda menentukan semua aturan style dalam file teks ini dan kemudian Anda dapat meyisipkkan file ini dalam dokumen HTML menggunakan elemen <link>.

Berikut adalah sintaks umum penggunaan file CSS eksternal :

<head>
   <link type = "text/css" href = "..." media = "..." />
</head>

Atribut

Atribut yang terkait dengan elemen <style> adalah :

AtributNilaiDeskripsi
typetext cssMenentukan bahasa style sheet sebagai tipe konten (tipe MIME). Atribut ini wajib diisi.
hrefURLMenentukan lokasi file style sheet. Atribut ini wajib diisi.
mediascreen
tty
tv
projection
handheld
print
braille
aural
all
Menentukan perangkat tempat dokumen akan ditampilkan. Nilai default adalah all. Ini adalah atribut pilihan.

Buatlah sebuah file CSS styleku.css yang memiliki aturan berikut :

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

Setelah menyimpan file dengan nama stylesaya.css, kemudian panggil file tersebut ke dalam dokumen HTML sebagai berikut :

<head>
   <link type = "text/css" href = "styleku.css" media = "all" />
</head>

Import CSS – Aturan @import

@import digunakan untuk mengimpor style sheet eksternal dengan cara yang mirip dengan elemen <link>. Berikut adalah sintaks umum dari penggunaan @import.

<head>
   @import "URL";
</head>

URL di sini berfungsi untuk mementukan lokasi file style sheet. Anda juga dapat menggunakan sintaks lain.

<head>
   @import url("URL");
</head>

Berikut adalah contoh yang menunjukkan cara mengimpor file CSS ke dalam dokumen HTML :

<head>
   @import "styleku.css”;
</head>

Prioritas Aturan CSS

Kita telah membahas 4 cara menggunakan kode CSS dalam dokumen HTML.

Semua kode dalam CSS memiliki prioritas tertinggi.

Contoh, tag <style> … </style> memiliki prioritas yang lebih tinggi dibandingkan kode CSS secara eksternal.

Aturan CSS apa pun yang dituliskan dalam tag <style> … </style> akan lebih diprioritaskan dan akan menimpa aturan yang ditentukan dalam file CSS eksternal.

Aturan apa pun yang ditentukan dalam file CSS eksternal memiliki prioritas terendah, dan aturan yang ditentukan dalam file ini hanya akan diterapkan jika 2 aturan di atas tidak digunakan.

Menangani Browser lama

Masih banyak browser lama yang belum support CSS.

Jadi, kita harus berhati-hati saat menulis kode CSS di dokumen HTML.

Kode berikut menunjukkan bagaimana Anda dapat menggunakan tag komentar untuk menyembunyikan CSS dari browser lama :

<style type = "text/css">
   <!--
      body, td {
         color: blue;
      }
   -->
</style>

Komentar CSS

Sering kali, Anda mungkin perlu memberi komentar tambahan di blok CSS Anda.

Jadi, sangat mudah untuk mengomentari bagian mana pun di CSS.

Anda dapat dengan mudah meletakkan komentar di dalam /*….. Ini adalah komentar dalam CSS ….. * /.

Anda dapat menggunakan / * …. * / untuk mengomentari blok yang terdiri dari beberapa baris dengan cara yang sama seperti yang Anda lakukan dalam bahasa pemrograman C dan C ++.

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            color: red;
            /* Ini adalah komentar 1 baris */
            text-align: center;
         }
         /* Ini adalah komentar multi-line*/
      </style>
   </head>

   <body>
      <p>Halo Dunia!</p>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Ada memahami bagaimana cara menyisipkan kode CSS di dokumen HTML.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.