Cascading Style Sheet (CSS)

Materi Bisa Download DISINI

Kompetensi Dasar:

3.7 Menerapkan style pada halaman web

4.7 Membuat kode html untuk menampilkan style tertentu pada halaman web

Materi Pokok :

1. Konsep Cascading Style Sheet.

2. Aturan Penulisan Kode CSS.

3. Penggabungan Kode CSS dengan Dokumen HTML.

Cascading Style Sheet (CSS)

Cascading Style Sheet (CSS) adalah suatu bahasa yang bekerja sama dengan dokumen HTML untuk mendefinisikan cara bagaimana suatu isi halaman web ditampilkan atau dipresentasikan.

Presentasi ini meliputi style atau gaya teks, link, maupun tata letak (layout) halaman. Dengan adanya teknologi seperti ini, kita dapat memilah atau memisahkan antara kode untuk isi halaman web dan kode yang diperlukan khusus untuk menangani tampilan.

Aturan Penulisan Kode CSS

Kode CSS tersusun atas selector dan deklarasi. Selector adalah tag HTML yang akan diberi atau dikenai CSS, sedangkan deklarasi adalah properti dan nilai yang akan ditentukan untuk tag bersangkutan.
Sebagai contoh, perhatikan kode CSS berikut:

body {

background: black;
}

Keterangan :
Body disebut sebagai selector.
Background: black; disebut sebagai deklarasi.
Background adalah properti dari tag <body> yang akan diset nilainya, sedangkan black adalah nilai yang digunakan atau akan diisikan ke dalam atribut background.

Sebuah selector dapat memiliki lebih dari satu deklarasi, dimana setiap deklarasi harus diakhiri oleh tanda titik koma atau semicolon (;). Dalam membuat kode CSS kita menjumpai satu atau beberapa selector yang memiliki deklarasi yang sama dengan selector lainnya. Untuk itu deklarasi cukup ditulis sekali saja, akan tetapi daftar selector-nya saja yang harus disebutkan satu persatu dengan memisahkannya menggunakan tanda koma. Berikut ini contoh kode yang akan menunjukkan hal tersebut.

body, td, h2 {

background: black;

color: red;

}

Pada contoh kode di atas, deklarasi akan berlaku untuk tag <body>, <td>, dan <h2>.

Penggabungan Kode CSS dengan Dokumen HTML

Proses penggabungan kode CSS dengan dokumen HTML dapat dilakukan melalui 3 (tiga) cara, yaitu:

Embedded Styles: Menuliskan kode CSS pada bagian header dokumen HTML.

Linked Styles: Menuliskan kode CSS pada file terpisah dan dipanggil melalui tag <link> dari dokumen HTML.

Inline Styles: Menuliskan kode CSS langsung pada tag yang akan diubah atau diatur style-nya.

1. Embedded Styles

Pada cara ini, semua kode CSS ditulis di dalam tag <style> dan </style> dan ditempatkan pada bagian header dari dokumen HTML (di dalam tag <head>). Attribut TYPE pada tag <style> harus diisi dengan “text/css”.

<html> <head> <title>Embedded Styles</title> <style type=”text/css”> body { background: blue; color: pink; } </style> </head> <body> ... </body> </html>

2. Linked Styles

Cara ini merupakan cara yang paling banyak digunakan dan direkomendasikan. Pada cara ini, kode CSS akan ditulis secara terpisah pada file tersendiri (dengan ekstensi .css). File tersebut selanjutnya dapat dikaitkan atau dihubungkan dengan dokumen HTML melalui tag <link>. Dengan demikian, kode CSS dalam file .css tersebut dapat digunakan oleh beberapa dokumen HTML yang ingin menerapkan style.
Tag <link> yang digunakan untuk memanggil file .css diletakkan pada bagian header dokumen HTML, dengan bentuk umum penggunaan seperti berikut:

Contoh:
File style.css

body { background: blue; color: white; }

File sample.html

<html> <head> <title>Linked Styles</title> <link rel=”stylesheet” href=”style.css” type=”text/css”> </head> <body> ... </body> </html>

Dengan menggunakan cara style.css, ada beberapa keuntungan yang diperoleh, yaitu:

Kode (baik CSS maupun HTML) tampak lebih rapi dan mudah untuk dibaca atau dipahami.

Lebih mudah dikembangkan atau dimodifikasi.

Kode CSS dapat digunakan oleh dokumen-dokumen HTML lain yang ingin menerapkan style tersebut.

Perubahan pada file.css akan berpengaruh terhadap semua dokumen HTML yang menerapkannya. Artinya perubahan style hanya dilakukan sekali pada file.css-nya saja.

3. Inline Styles

Pada cara ini, kode CSS ditulis atau dimasukkan ke dalam atribut STYLE pada tag yang akan digunakan. Cara ini merupakan cara yang tidak direkomendasikan karena kode akan tampak rumit dan susah untuk dibaca.

Berikut ini contoh penggunaan inline styles di dalam tag HTML:

<h2 style=”color: red; border-bottom: 1px solid red;”> Heading 2 Pertama</h2> <h2>Heading 2 Kedua</h2>

Pada contoh di atas, tag <h2> pertama menggunakan style dan tag <h2> kedua tidak. Jika Anda ingin tag <h2> kedua juga menerapkan style yang sama, maka Anda perlu menuliskannya seperti berikut:

<h2 style=”color: red; border-bottom: 1px solid red;”> Heading 2 pertama</h2> <h2 style=”color: red; border-bottom: 1px solid red;”> Heading 2 kedua</h2>

Latihan

Embedded Styles

Latihan 6.1 (css-embedded.html)

Linked Styles

Latihan 6.2 (style.css)

(sample.html)

Inline Styles

Latihan 6.3 (css-inline.html)

Tugas Kelompok

1) Buatlah sebuah halaman website tentang tiket penjualan dan penjadwalan ! Misal. Tiket Penjualan Pertandingan Sepak Bola beserta jadwal pertandingannya.

2) Diharapkan tiap kelompok berbeda judulnya dengan kelompok lain.

3) Buatlah tampilannya menggunakan CSS dengan penggabungan Embedded Styles, Linked Styles, dan Inline Styles !

4) Pada tampilan desain, boleh menggunakan icon-icon sebagai pendukung dari tampilannya.