Scribd
Unggah
24 tayangan5 halaman

Pertemuan 1

CSS digunakan untuk mendefinisikan format tampilan tag HTML dalam dokumen. CSS dapat diterapkan secara embedded, inline, atau terkait melalui file eksternal. CSS juga memungkinkan penerapan gaya yang berbeda untuk elemen tertentu melalui penggunaan kelas dan ID.

Diunggah oleh

Alvin Pramesti
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
24 tayangan5 halaman

Pertemuan 1

CSS digunakan untuk mendefinisikan format tampilan tag HTML dalam dokumen. CSS dapat diterapkan secara embedded, inline, atau terkait melalui file eksternal. CSS juga memungkinkan penerapan gaya yang berbeda untuk elemen tertentu melalui penggunaan kelas dan ID.

Diunggah oleh

Alvin Pramesti
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 5

CASCADING STYLE SHEET (CSS)

1. Cascading Style Sheet


Cascading style sheet (CSS) merupakan sekumpulan aturan yang
menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.
Rekomendasi CSS menguraikan tiga jenis style:
 Embedded: properti style diletakkan di dalam satu blok di dokumen
HTML.
 Inline: properti style diterapkan secara langsung per baris atau per elemen
HTML.
 Linked: properti style diletakkan di file berekstensi css dan dikaitkan
dengan dokumen HTML.

Selain mengulas tentang pemanfaatan CSS, bagian ini juga menekankan


pada pembuatan desain dengan menggunakan division. Bagaimanapun, untuk
menghasilkan desain halaman web yang baik, penggunaan tabel tidak
disarankan dan sebagai gantinya adalah dengan memanfaatkan division.

2. Pengenalan CSS

CSS (Cascading Style Sheet) dapat menerapkan suatu format ketika lebih
dari satu style berlaku. Misalkan kita menginginkan semua paragraph harus
memiliki font biru, namun secara khusus menginginkan satu kata agar berwarna
merah. CSS bisa melakukan itu.
File index.html

File stylesheet.css

A. LATIHAN

1. Menggunakan Style Sheet


Sebagaimana diketahui, ada tiga pendekatan yang bisa digunakan untuk

1
mengimplementasikan style sheet. Bagian ini akan menjelaskan langkah
penerapan ketiga pendekatan tersebut.
 Inline
Pada pendekatan ini, kita menerapkan style per baris atau per tag melalui
atribut style.

Pendekatan inline sangat cocok digunakan untuk pemberian style khusus pada
beberapa tag saja.

2
 Embeded
Pada pendekatan ini, keseluruhan aturan style didefinisikan ke dalam satu blok
baru kemudian digunakan di elemen-elemen HTML.

Gambar 1. Tampilan penerapan embedded style

3
Terlihat bahwa pendefinisian style berdampak pada seluruh elemen paragraf.
Bagaimana jika hanya ingin memberikan style pada elemen tertentu.
Untuk lebih menspesifikasikan pemberian style, kita bisa menggunakan atribut
class atau id. Tekniknya, class dinotasikan dengan titik (.); id dinotasikan dengan
pagar (#).

Gambar 2. Embedded style spesifik

4
Sebagai tambahan, kita juga bisa mendefinisikan sebuah aturan untuk lebih dari
satu tag. Perhatikan contoh berikut:

Style di atas akan berlaku untuk semua tag <b>, <p>, dan <a> yang ada di
halaman web.

 Linked
Pendekatan ini mirip dengan embedded, kecuali style-nya diletakkan di file
terpisah dan berekstensi css. Pemisahan style ini juga menjadikan pendekatan ini
sangat efektif dan efisien, khususnya ketika akan digunakan oleh lebih dari satu
dokumen.
Langkah-langkah pembuatan file css diperlihatkan sebagai berikut:
1. Buka editor teks.
2. Ketikkan rule style seperti berikut:

3. Simpan di satu folder dengan ekstensi css, misalnya style.css.


Setelah selesai mendefinisikan file style, kita bisa menggunakannya di dokumen
HTML melalui suatu link.

Anda mungkin juga menyukai