CSS Basic - Inklusi

CSS Basic – Inklusi

      Tak ada komentar pada CSS Basic – Inklusi

Bagian inti dari sebuah pemrograman CSS adalah sintaks. Tanpa adanya sintaks yang diterapkan, fungsi CSS tidak dapat bekerja. Pada pertemuan sebelumnya, aku sudah menjelaskan secara dasar apa itu Sintaks dan bagaimana menerapkan sintaks kedalam website. Sekarang kita akan masuk pada bagian CSS Basic – Inklusi.

Ada empat cara untuk mengaitkan style CSS dengan dokumen HTML Anda. Metode yang paling umum digunakan adalah Inline CSS dan External CSS.

Embedded CSS – Elemen <Style>

Embedded CSS atau bisa diartikan CSS tertanam. Kamu dapat menempatkan aturan CSS kedalam dokumen HTML menggunakan elemen <style>. Tag ini ditempatkan didalam tag <head> //diakhiri </head>. Dalam memasukkan elemen kedalam HTML, jangan lupa memberikan tanda penutup ( / ). Aturan yang didefenisikan dengan menggunakan sintaks ini akan diterapkan ke semua elemen yang ada pada dokumen.

Dibawah ini adalah contoh embed CSS berdasarkan sintaks diatas:

Dibawah ini adalah hasil dari penggabungan HTML dan CSS dari sintaks yang ada diatas.

Atribut CSS <stye>

Atribut yang terkait dengan elemen <style>

AtributNilaiDeskripsi
TypeText / CSSMenentukan bahasa sheet style sebagai tipe konten (tipe MIME). Ini diperlukan atribut.
MediaScreen, tty, tv, projection, handheld, print, braille, aural.Menentukan perangkat yang akan ditampilkan pada dokumen. Nilai default adalah semua. Ini adalah atribut opsional.

Inline CSS – Atribut Gaya

Kamu dapat menggunakan atribute gaya (style) dari setiap elemen HTML untuk menentukan aturan style. Aturan ini hanya akan diterapkan pada elemen style. Berikut dibawah ini, contoh sintaks generik.

Atribut

AtributNilaiDeskripsi
StyleStyle rulesNilai atribut gaya adalah kombinasi deklarasi gaya yang dipisahkan oleh titik koma (;).

Contoh

Berikut ini adalah contoh dan hasil dari Inline CSS berdasarkan sintaks diatas.

CSS Eksternal – Elemen <link>

Elemen <link> dapat digunakan untuk menyertakan file stylesheet eksternal dalam dokumen HTML kamu.

Lembar gaya / style sheet eksternal adalah file teks yang terpisah dengan ekstensi .css. Kamu mendefenisikan semua aturan style  dalam file teks ini dan kemudian kamu dapat menyertakan file ini dalam dokumen HTML menggunakan elemen <link>.

Berikut adalah sintaks generik termasuk file CSS eksternal.

Atribut

Atribut yang terkait dengan elemen <style>

AtributNilaiDeskripsi
TypeText / CSSMenentukan bahasa sheet style sebagai tipe konten (tipe MIME). Atribut ini diperlukan.
HrefURLMenentukan file style sheet yang memiliki aturan Style. Atribut ini diperlukan.
MediaScreen, tty, tv, projection, handheld, print, braille, aural.Menentukan perangkat yang akan ditampilkan pada dokumen. Nilai default adalah semua. Ini adalah atribut opsional.

Contoh

Pertimbangkan file stylesheet sederhana dengan nama bierpinter.css yang memiliki aturan berikut.

Sekarang kamu bisa memasukkan file bierpinter.css ini kedalam dokumen HTML sebagai berikut.

CSS Yang Diimpor – @import Rule

@import digunakan untuk mengimpor stylesheet eksternal dengan cara yang mirip dengan elemen <link>. Berikut adalah sintaks genetik untuk aturan @import.

URL diatas adalah url dari file stylesheet yang memiliki aturan style. Kamu juga bisa menggunakan cara lain untuk memasukkan sintaks CSS @import.

Contoh

Berikut adalah contoh yang menunjukkan kepada kamu bagaimana mengimpor file stylesheet kedalam dokumen HTML.

CSS Rules Overriding

CSS Rules Overriding atau bisa diartikan sebagai Mengesampingkan Aturan CSS berfungsi untuk mengganti aturan stylesheet.

Berikut ada 3 hal untuk mengganti aturan stylesheet:

  1. Setiap stylesheet inline mengambil perioritas tertinggi. Jadi, ini akan menimpa aturan yang ditentukan dalam tag <style></style> atau aturan yang didefenisikan dalam file stylesheet eksternal manapun.
  2. Setiap aturan yang didefenisikan dalam tag <style></style> akan mengganti aturan yang ditentukan dalam file stylesheet eksternal manapun.
  3. Setiap aturan yang didefenisikan dalam file stylesheet eksternal akan mengambil perioritas terendah, dan aturan yang didefenisikan dalam file ini akan ditetapkan hanya jika dua aturan diatas tidak berlaku.

Handling Old Browsers

Handling Old Browser atau bisa dikatakan Menangani Browser Lama. Kamu bisa lihat, banyak pengguna internet yang masih menggunakan browser lama atau versinya belum di update sama sekali. Hal ini membuat beberapa CSS tidak dapat dimengerti oleh browser tua tersebut.

Sintaks dibawah ini akan menunjukkan bagaimana kamu dapat menggunakan tag komentar / comments untuk menyembunyikan CSS dari browser tua.

CSS Comments

CSS Comments / CSS komentar dapat membantu kamu dalam menandai tiap-tiap elemen CSS dengan memberikan nama pada setiap bagian CSS. Kamu dapat memasukkan tanda /* … */ untuk mengomentari blok multi-baris. Sintaks ini juga terdapat di bahasa pemrograman lainnya, seperti: C#, C++, java, dll.

Komentar tidak akan muncul, jika HTML dan CSS sedang dijalankan. CSS Comments hanya akan terlihat jika kamu sedang mengedit file stylesheet.

Contoh

Inilah Materi CSS Basic – Inklusi yang membahas tentang Inklusi. Kamu bisa like artikel ini dan share ke teman-teman kamu jika ini berguna dan bermanfaat bagi mereka. Terima kasih,

Tinggalkan Balasan