Modul Web Programming - Pertemuan 2-3
Diunggah oleh
cloud.085730102088Modul Web Programming - Pertemuan 2-3
Diunggah oleh
cloud.085730102088Modul Pertemuan 2
CASCADING STYLE SHEETS (CSS)
Tujuan
1. Siswa dapat memahami tentang konsep CSS
2. Memahami aturan penulisan pada CSS
3. Memahami selector sebagai pengontrol design
4. Memahami pembuatan background
A. KONSEP
Apa itu CSS ?
• Feature untuk membuat dynamic HTML.
• Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template)
• Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan berwarna
biru)
• Support di semua browser
Aturan penulisan :
• Value / nilai untuk property tidak boleh dalam tanda petik. contoh : color : green;
• Nama property bersifat case sensitive. color : green; property : color | value : green
Cara Penggunaan CSS :
Misalkan kita punya stylesheet untuk <body> dengan ketentuan sebagai berikut :
color: yellow; font-family: Arial, Helvetica, sans-serif;
Maka dapat diaplikasikan sebagai berikut ini :
• External Style Sheet
Bentuk : <link rel=“stylesheet” type=“text/css” href=“css_files.css”>
dimana :
✓ <link, merupakan tag pembuka diakhiri dengan tanda “>”
✓ rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet
✓ type=“text/css”, file yang dipanggil berupa css
✓ href=“css_files.css”, alamat dokumen stylesheet yang dipanggil
Contoh penggunaan : style.css (nama file)
Modul Pertemuan 2-3 rev.docx 1
Pemanggilan di kode / file html :
• Internal Stylesheet
• Inline Stylesheet
B. Aturan Penulisan Pada CSS
Syntaxis CSS dibagi dalam 3 bagian, yakni selector {property : value} , dimana :
selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).
property : atribut yang akan diubah
Cara penulisan :
FONT-FAMILY : sans-serif;
FONT-SIZE : small;
Cara penulisan yang salah :
FONT-FAMILY : “sans-serif”;
FONT-SIZE : „small‟;
Modul Pertemuan 2-3 rev.docx 2
Cara mendeklarasikan kelompok : (tanda koma serta &)
H1, H2 {color : green};
H3, H4 & H5 {color : red};
Cara menuliskan komentar :
• Menggunakan tanda : /* ….. */
• Menggunakan tanda : <!-- .......... -->
Bentuk Ukuran :
Ukuran Keterangan
em Untuk menentukan ukuran yang pecahan (desimal)
ex x-height, digunakan untuk menentukan ukuran yang sifatnya vertikal
Pixels, menentukan ukuran yang bersifat pixel (layar monitor) seperti
px
ukuran huruf.
C. Selector Sebagai Pengontrol Desain
Sekarang kita akan mencoba latihan mengatur desain menggunakan selector pada inline stylesheet. Silakan
buat file baru dengan nama latihan_selector.html , kemudian ketik kode sebagai berikut untuk merubah
tampilan pada <body>
Selanjutnya kita akan mencoba untuk mengatur desain yang lebih dinamis dengan menggunakan class dan
id. Apa itu class dan id pada CSS ? Class dan id bisa di bilang sebagai penanda pada html, maksud penanda di
sini adalah element-element html dapat di beri tanda dengan class atau id. untuk apa di beri tanda ? agar
dapat di manipulasi menggunakan css atau javascript. bayangan sederhananya jika anda memiliki lima buah
kotak, semua kotak yang anda miliki berwarna biru, kemudian anda ingin mengubah warna kotak yang ketiga,
di sinilah letak kegunaan class dan id, untuk memberikan tanda atau nama pada kotak anda agar bisa di ubah
dan kotak yang lain tidak akan berubah.
Perbedaan dari class dan id adalah class di panggil pada css atau javascript dengan menggunakan tanda titik
“.”, dan id di panggil pada css atau javascript dengan tanda pagar “#”, ada kelebihan di sini untuk class, yaitu
class dapat di berikan pada banyak element html dan dapat di panggil sekaligus, sedangkan id hanya dapat
bekerja pada satu penandaan saja, maksudnya satu nama id hanya bisa di berikan pada satu element saja,
Modul Pertemuan 2-3 rev.docx 3
perhatikan pada contoh berikut untuk memberikan pemahaman lebih tentang class dan id pada HTML. (file
latihan_selector.html)
Perhatikan pada contoh di atas, kotak 1, kotak 2 dan kotak 3 kita beri tanda dengan class yang kita beri nama
“kotak”, dan kotak 4 kita beri tanda dengan id yang kita beri nama kotak juga. maka perbedaannya di sini akan
tampak, bahwa class bisa di panggil sekaligus, ini di buktikan dengan kotak 1,2 dan 3 di beri tanda class yang
sama yaitu class kotak. dan kotak 4 kita beri tanda dengan id kotak. selanjutnya pada css juga dapat anda
lihat, class di panggil dengan tanda titik “.” dan id di panggil dengan tanda pagar “#”.
Modul Pertemuan 2-3 rev.docx 4
D. Memformat Halaman Web (Margin, Padding & Background)
Selanjutnya kita akan memberikan format margin untuk elemen body pada file latihan_selector.html,
tambahkan property margin-top, margin-bottom, margin-left dan margin-right untuk tag <body> seperti
gambar berikut ini :
Style di atas akan memberikan pengaturan margin halaman (1cm,2cm,1cm,2cm), coba buka file
latihan_selector.html menggunakan browser / refresh halaman, kemudian amati perubahan apa yang terjadi.
Selanjutnya tambahkan property padding untuk tag <body> seperti gambar berikut ini :
Kemudian refresh halaman / buka file latihan_selector.html dan amati perubahannya. Dapat disimpulkan
bahwa margin digunakan untuk menata letak dari sisi luar, sedangkan padding digunakan untuk menata letak
dari sisi dalam. Perhatikan gambar berikut ini, untuk kotak berwarna biru adalah konten / isi dari tag yang
diberi padding.
Modul Pertemuan 2-3 rev.docx 5
Selanjutnya kita akan menambahkan backgroun pada halaman latihan selector, background web dapat
berupa gambar atau hanya warna. Untuk backround warna telah kita tambahkan untuk tag body
menggunakan property “background-color”. Lalu bagaimana jika kita ingin memberikan warna background
gradient / gradasi ? Maka silakan ubah property background-color menjadi property background dengan
value linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,54,121,1) 41%, rgba(0,212,255,1) 100%); seperti
gambar berikut :
Kemudian refresh halaman / buka file latihan_selector.html dan amati perubahannya. Selanjutnya kita akan
memberikan background berupa gambar pada halaman web. Silakan ubah value pada property background,
isikan alamat / url gambar kita, sebagai contoh logo MAN Sidoarjo dengan alamat
“https://ppdb.mansidoarjo.sch.id/image/logomansda.webp”, sehingga menjadi seperti gambar berikut ini :
Catatan :
Anda juga dapat mengubah ukuran gambar / logo pada background menggunakan property “background-
size”, contoh => background-size: 50px;
Modul Pertemuan 2-3 rev.docx 6
E. Post Test
• Lakukanlah perubahan pada file (latihan_selector.html) sebelumnya untuk mengubah warna kotak 1 &
3 menjadi warna kuning / gold, kotak 2 & 4 menjadi warna merah dengan menggunakan selector
sehingga menjadi seperti gambar berikut ini.
