CSS

Apa itu CSS ?

Arti CSS

CSS adalah kependekan dari Cascading Style Sheet yang berarti susunan lembar gaya yang digunakan untuk mengubah-suaikan elemen HTML.

Pengertian CSS

Perhatikan contoh elemen HTML dibawah ini.
#1 Memberi gaya elemen dengan cara menggunakan atribut style didalam tag elemen.
<p style='color:blue'>
  Ini adalah teks kalimat paragraf berwarna biru.
</p>

Contoh kode diatas dalam materi CSS disebut dengan inline CSS, atau memberi gaya pada elemen menggunakan atribut style (penulisannya menjadi satu baris dengan elemen / inline) .


#2 Memberi gaya elemen dengan cara memisahkan atribut style dari tag elemen.
<p>
  Ini adalah teks kalimat paragraf berwarna biru.
</p>
<style>
  p {color: blue;}
</style>

Pada contoh kedua, atribut style dipisahkan dari elemen dan dijadikan sebagai tag <style> yang berisi pengaturan gaya pada elemen.
Kedua contoh diatas memberikan hasil tampilan yang sama.

Berdasarkan penjelasan serta 2 contoh kode diatas, dapat ditarik kesimpulan bahwa CSS adalah :
Menyusun lembar gaya elemen HTML secara terpisah dari elemennya yaitu didalam tag <style>.

Oleh karena penggunaan tag style terpisah dari elemen maka, membutuhkan lokasi tersendiri untuk menyusun kode-kode style (kode CSS) tersebut agar tetap tersinkron dengan elemen.

Ada 2 metode penempatan susunan lembar gaya (CSS) :

1. Ditempatkan didalam dokumen / di halaman yang sama, yaitu didalam tag <head> ini disebut CSS internal atau local CSS.
<html>
<head>
<style> Disini letak style CSS
<body>
<elemen> Disini letak elemen yang di-style

2. Ditempatkan diluar dokumen / di halaman lain, ini disebut sebagai CSS eksternal.

Penggunaan CSS eksternal ini memang benar-benar terpisah dari dokumen sehingga membutuhkan tautan untuk menghubungkan style CSS dengan elemen. Yaitu menggunakan tag <link> dalam elemen <head>.

Contoh penempatan tag <link> didalam elemen <head> :
<html>
<head> <link href='http://url.halaman.css' rel='stylesheet'/>
<style> Disini letak style CSS
<body>
<elemen> Disini letak elemen yang di-style

Setelah memahami apa itu CSS, materi selanjutnya akan membahas bagaimana cara memberi gaya suatu elemen misal : memberi latar belakang, mengatur ukuran, jarak dan style lainnya menggunakan CSS.

Komentar