Web Tutorial
Now Reading
CSS Basic – Inklusi
0

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:

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

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

Atribut CSS <stye>

Atribut yang terkait dengan elemen <style>

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.

<element style = "...style rules....">

Atribut

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.

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

Atribut

Atribut yang terkait dengan elemen <style>

Contoh

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

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

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

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

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.

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

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

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

Contoh

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

<head>
   @import "mystyle.css";
</head>

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.

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

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

<html>
   <head>
      <style>
         p {
            color: red;
            /* Masukkan komentar disini - Bier Pinter */
            text-align: center;
         }
         /* Ini adalah multi-line komentar - Bier Pinter */
      </style>
   </head>
   <body>
      <p>Hello World!</p>
   </body>
</html>

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,

What's your reaction?
Luar Biasa
0%
Suka Sekali
0%
Keren
0%
Kagum
0%
Jelek
0%
Tidak Suka
0%
About The Author
Carollous Dachi

Leave a Response