Komputer Aplikasi Teknologi Informasi

Pertemuan 9
CSS
§ CSS singkatan dari Cascading Style Sheet, yakni dokumen yang berisi definisi
style untuk sebuah dokumen HTML atau untuk mengatur tampilan dari dokumen
HTML, meliputi layout dokumen, pewarnaan dan tampilan font dan teks dan lain
sebagainya. Penulisan CSS baiknya ditulis terpisah dari konten HTML, hal ini
dilakukan untuk meningkatkan daya akses konten pada web dan mengurangi
kerumitan dalam penulisan kode dan struktur dari dokumen HTML.

• CSS adalah kumpulan kode program yang digunakan mendesain atau

mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah desain
dari text, warna, gambar dan latar belakang dari (hampir) semua kode tag HTML.

“HTML for content (struktur), CSS for Presentation (tampilan)”.

Mengapa Harus Menggunakan CSS ?
• HTML dirancang tidak ditujukan untuk mendesain sebuah halaman web, tapi
hanya untuk menampilkan konten saja. Pada saat HTML beranjak ke versi 3.2,
diperkenalkan tag yang digunakan untuk mengatur tampilan sebuah teks,
seperti jenis font yang digunakan, warna, dan ukuran. Tapi dengan adanya tag ini,
malah jadi menyulitkan proses development, karena tag ini mesti disematkan di
banyak halaman untuk mendapatkan hasil style yang sama. Bayangkan ketika kita
sudah memiliki banyak halaman web, belasan atau puluhan, lalu kemudian hendak
mengedit beberapa style saja misalkan ukuran font dan ingin semua halaman
mendapatkan perubahan yang konsisten. Maka kita harus memperbaharui tag
tersebut di setiap halaman satu per satu!
• Untuk itu, dibuatlah CSS, yang memisahkan style dari halaman web, sehingga
antara konten pada HTML dan desain tampilan pada dokumen CSS dapat
dikerjakan di dua tempat berbeda. Dengan kata lain, dokumen HTML cukup berisi
konten saja, dan satu dokumen CSS dapat disematkan pada setiap dokumen
HTML agar semuanya menampilkan style yang sama dan konsisten.
Penerapan CSS pada HTML
• CSS biasanya disimpan di dalam sebuah file berekstensi .css dan
disematkan di dalam dokumen HTML untuk memberikan style pada
halaman tersebut. Meski demikian, kita tetap dapat menambahkan
sintaks CSS langsung didalam dokumen HTML, di dalam tag untuk
mengakomodir penerapan style yang hanya digunakan di dalam
dokumen tersebut. Kita juga dapat menyematkan sintaks CSS
langsung di dalam atribut style pada suatu tag HTML untuk
menerapkan style yang hanya digunakan pada tag itu saja.
 Struktur Penulisan CSS
CSS ditulis dengan format penulisan seperti berikut:
selector { property:value }

selector { property:value; property:value }

ØSelector adalah bagian CSS yang berfungsi untuk

menunjukan bagian mana yang hendak diatur/diformat.
ØProperty adalah untuk menunjukan bagain property dari selector yang hendak
diatur.
ØValue adalah nilai dari property yang digunakan.

Property dan value CSS ditulis di antara kurung kurawal. Bila property CSS yang
digunakan lebih dari satu, maka pisahkan dengan titik koma.
 Sintaks Kode CSS
• Style sheet didefinisikan dalam bentuk rule, terdiri dari:
• Selector : Tag HTML yang akan dikenal CSS
• Declaration : property dan nilai (Value) yang akan ditentukan untuk tag bersangkutan

Selector { Property : Value }]

Sebuah selector dapat memiliki lebih dari satu deklarasi, dimana setiap
deklarasi harus diakhiri oleh tanda titik koma (;)
• Contoh rule :
h1 { color:blue ; font-family:arial; }
Keterangan:
• Selector : h1
• Property : color
• Value : blue
• Seluruh elemen (tag) HTML dapat digunakan sebagai selector
Fungsi CSS

CSS diperlukan karena kebutuhan akan halaman web yang semakin

kompleks. Pada awalnya bisa membuat suatu paragraf bewarna merah dengan
menulis langsung kode tersebut didalam tag HTML, atau membuat latar belakang
sebuah halaman dengan warna biru. Contoh kode HTML untuk hal itu adalah sebagai
berikut:
Kasus diatas menggunakan tag <font> untuk membuat beberapa kata di dalam paragraf tersebut
berwarna merah. Untuk paragraf dengan jumlah sedikit, tinggal copy-paste tag <font color=”red”>
pada kata-kata tertentu.
Namun jika website tersebut memiliki katakanlah 50 artikel seperti diatas, dan karena sesuatu hal anda
ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk
mengubahnya satu persatu, halaman per halaman.
Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten. Untuk paragraf yang sama, berikut
kode HTML bila ditambahkan kode CSS:
Dalam contoh CSS diatas, tag <font> diubah menjadi tag <span>. Tag <span> sendiri merupakan tag yang tidak bermakna,
namun bisa di kostumasi menggunakan CSS. Tag span ditambahkan dengan atribut atribut class=”warna”. Atribut class
berguna untuk memasukkan kode CSS pada tag <style> di bagian head.

Jika kita ingin merubah seluruh warna menjadi biru, maka tinggal mengubah isi dari CSS color: red menjadi color:blue, dan
seluruh tag yang memiliki class=”warna” akan otomatis berubah menjadi biru.
Cara Memasang Kode CSS ke Halaman HTML
CSS memungkinkan kita merubah tampilan dari halaman, tanpa mengubah isi dari halaman.
Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline
Style, Internal Style Sheets, dan External Style Sheets.

1. Metode Inline Style

Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan
atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:
 Dalam kode diatas, disisipkan atribut style pada tag <h2>, nilai dari atribut style ini
adalah kode CSS yang ingin diterapkan.
Penggunaan tag CSS seperti ini walaupun praktis, namun tidak disarankan, karena
kode CSS langsung tergabung dengan HTML, dan tidak memenuhi tujuan dibuatnya CSS agar
desain terpisah dengan konten.
2. Metode Internal Style Sheets

Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets digunakan untuk
memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML. Atribut
style yang sebelumnya berada di dalam tag, dikumpulkan pada pada sebuah tag <style>.
Tag style ini harus berada pada bagian <head> dari halaman HTML.

Contoh penggunaan metode internal style sheets CSS:

 Contoh metode internal style sheets diatas sudah jauh lebih baik daripada inline style, karena
kita sudah memisahkan CSS dari HTML. Seluruh kode CSS akan berada pada tag head dari HTML.

Namun kekurangan menggunakan internal style sheets, jika kita memiliki beberapa halaman
dengan style yang sama, maka kita harus membuat kode CSS pada masing-masing halaman tersebut.
Hal ini dapat diatasi dengan menggunakan metode external style sheets.
3. Metode External Style Sheets
Metode External Style Sheets digunakan untuk membuat kode CSS kedalam sebuah file tersendiri yang
terpisah dari halaman HTML.
Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.

Simpan dengan nama belajar.css :

Simpan lah pada folder yang sama dengan halaman HTML berikut :
<link rel="stylesheet" href="css/style.css" type="text/css">

keterangan :

<LINK merupakan tag pembuka yang diakhiri dengan tanda kurang dari ">
REL="STYLESHEET", fungsi ini menerangkan bahwa halaman akan di kenal efek style sheet.
HREF="nama_file.css", di dalam tag ini kita meletakan alamat file dokumen style sheet yang akan kita
panggil.
TYPE="text/css", Menerangkan bahwa file yang akan kita panggil berupa file css
Hasil Output exterstylesheet.html
Terima Kasih