CSS

&
CSS Framework
CSS
• Cascading Style Sheets (CSS) adalah sebuah bahasa yang digunakan
untuk menampilkan style dari sebuah dokumen HTML.
• CSS menjelaskan bagaimana elemen HTML harus ditampilkan.
Persiapan
• Ekstrak file week_3 (bahan
sebelum masuk).rar ke suatu
folder, misalnya ke d:\
• Didalamnya terdapat file “file File latihan.rar
latihan.rar” ekstrak lagi file diekstrak
tersebut

Contoh apabila Bahan diekstrak di d:\

Persiapan
• Jalankan web server (apache)

• Buat folder week_3 di htdocs,

sehingga menjadi
htdocs/week_3

• Masuk ke folder week_3

• Buatlah folder css di week_3,
sehinga menjadi
htdocs/week_3/css
Persiapan
• Salinlah file latihan_1.html
sampai latihan_6.html ke
htdocs/week_3

• Buka browser dan ketikkan

localhost/week_3/latihan_1.html
3 cara penerapan CSS
1. Langsung disisipkan pada kode html
• Sangat Tidak dianjurkan, karena membuat kode acak-acakan (html
digabung css)
• Pengaturan hanya berlaku di satu tag, sehingga untuk setiap tag harus
diatur lagi.
3 cara penerapan CSS
2. Langsung disisipkan pada
bagian Head, menggunakan
tag style
• Sudah lebih baik, tetapi masih
menggabungkan struktur
dengan tampilan pada satu file.
• Pengaturan hanya berlaku di
satu halaman, sehingga untuk
halaman lain harus diatur lagi.
3 cara penerapan CSS
3. Disimpan pada file terpisah
• Paling baik
• Pengaturan dapat dipakai banyak file html
Catat/capture baris ini

File gaya.css

Isi href, harus sesuai dengan

Lokasi dan nama file cssnya.
File halamandepan.html
Format css
selektor
Nama atribut
• Suatu pengaturan css terdiri Nilai atribut
dari:
• Selektor : menentukan
tag/elemen yang akan diatur
• Atribut:
• Nama: bagian tampilan yang akan
diubah, mis. Warna, panjang, lebar,
dll.
• Nilai: nilai yang akan diset ke
atribut, mis. Biru, hijau, dst.
• Kumpulan pengaturan untuk
suatu selektor di dimasukkan
dalam tanda { }
Persiapan
• Pada folder week_3/css
• Buatlah file baru bernama gaya.css

• Buka file latihan_1.html

• Buatlah link ke file gaya.css (lihat catatan/capture)
Komentar pada CSS
• Berbeda dengan komentar
HTML, css menggunakan tanda
/* ini komentar */
• Bisa multi baris
Edit file gaya.css

Mulailah membuat komentar untuk selektor dan atribut yang diajarkan!

Troubleshoot
• Dalam latihan kedepan
(atau sekarang) akan
sering muncul error,
• file css sudah dibuat tetapi
halaman tidak berubah.
• Harus diperiksa apakah
halaman html terhubung
dengan cssnya.
• Pada browser, Klik kanan
halaman -> view page
source (lihat kode
sumber)
Troubleshoot
• Source code halaman
akan ditampilkan.
• Klik pada bagian href
dari css
• Browser harusnya
menampilkan file css
kita

• Kalau muncul objek not

fould berarti file cssnya
tidak ditemukan.
Troubleshoot

• Perbaiki pada tag <link>

• Setelah itu uji lagi
• Refresh/reload browser
• View page source
• Klik linknya
• Kalau sudah benar, maka
akan ditampilkan kode css
kita.

Apabila sudah benar, Code css kita ditampilkan dilayar

Latihan
• Aturlah tag h1 menjadi

• Aturlah paragraph menjadi

Selektor dan atribut
class
• Dalam membuat
halaman, seringkali
dibutuhkan untuk
mengatur sekelompok
elemen sekaligus.
• Misalnya untuk mengatur
agar tiga paragraph
disamping menjadi
berwarna yang berbeda.
Selektor dan atribut
class
• Untuk mengatur beberapa
elemen sekaligus, pada elemen-
elemen tersebut tambahkan
atribut class.
• Tambahkan atribut class, hanya
pada tiga paragraph yang
dimaksud
• jangan ke semua paragraph
Edit latihan_1.html
• Selektor untuk mengatur
berdasarkan class adalah
.namakelasnya{
}
Tambahkan pada gaya.css
 Selektor dan atribut id
• Untuk mengatur hanya satu elemen, pada
elemen tersebut tambahkan atribut id.
• Selektor untuk mengatur berdasarkan id
adalah
#namaidnya{
}

Pada suatu halaman, id harus unik, tidak boleh sama

Cascade
• Cascade = air terjun bertingkat
• CSS mengatur secara bertingkat.
• Rulenya adalah:
• pengaturan lebih khusus menimpa pengaturan lebih umum.
• Suatu elemen akan mengikuti pengaturan css dengan urutan sebagai
berikut:
1. Ikuti pengaturan tag
2. Ikuti pengaturan class
• Jika ada yang konflik dengan pengaturan tag, maka timpa pengaturan tersebut
3. Ikuti pengaturan id
• Jika ada yang konflik dengan pengaturan class, atau tag, maka timpa pengaturan tersebut

[1]
Cascade
• Paragraf 4 dan 5 adalah tag <p> sehingga hanya mengikuti pengaturan
dengan selector p
Cascade
• Paragraf 1,2 dan 3 karena juga adalah tag p sehingga juga mengikuti pengaturan
selektor p, tetapi juga mengikuti pengaturan class=“paragrafkhusus”

ditimpa
Cascade
• Paragraf 2 karena juga adalah tag p sehingga juga mengikuti pengaturan selektor p, tetapi juga
mengikuti pengaturan class=“paragrafkhusus”, dan pengaturan id=“paragrafkedua”

ditimpa
 Color Scheme
• Untuk membuat pemilihan warna yang baik bisa menggunakan color
scheme

Googling: color scheme generator

[2]
Selektor
• Penggunaan selector sangatlah luas, dasar penggunaannya
Selektor Keterangan
*{ Semua elemen/tag
}
Namatag{ Tag bernama Namatag
}
.namakelas{ Elemen yang memiliki atribut
} class=“namakelas”
#namaid{ Elemen yang memiliki atribut
} id=“namaid”

Harap tabel ini ditulis/capture

Persiapan Latihan selektor
• Buat file css baru bernama selektor.css
• Simpan file tersebut di folder htdocs/week_3/css Isi file selektor.css

• Edit file latihan_2.html agar menggunakan style dari file selektor.css

• Nilai href harus ke selektor.css, bukan gaya.css lagi!!

• Selanjutnya latihan dilakukan dengan hanya mengubah bagian selektor

pada file selektor.css,
• Tidak boleh mengubah isi file latihan_2.html
Latihan Selektor
• Selektor * berarti
semua elemen
Latihan Selektor
• Ubah bagian selektor agar
menghasilkan tampilan
berikut

Tampilan browser
Latihan Selektor
• Ubah bagian selektor agar
menghasilkan tampilan
berikut
Latihan Selektor
• Ubah bagian selektor agar
menghasilkan tampilan
berikut
Latihan Selektor
• Ubah bagian selektor agar
menghasilkan tampilan
berikut
Selektor
• Selektor bisa digabungkan menggunakan tanda koma ,
Contog Penggabungan Keterangan
Mengatur namatag1 dan namatag2 Namatag1, namatag2{
}
Jumlah tag yang diatur bisa banyak Namatag1, namatag2, namatag3, dst{
}

Jenis selektor bukan hanya tag, tetapi semua jenis selektor dapat digunakan

Mis. Mengatur tag1, id=“idnya”, class=“kelas”, Tag1, #idnya, .kelas, taglagi, .kelaslagi{
taglagi, class=“kelaslagi” }

Harap tabel ini ditulis/capture

Latihan Selektor
• Ubah bagian selektor agar
menghasilkan tampilan
berikut
Latihan Selektor
• Ubah bagian selektor agar
menghasilkan tampilan
berikut
Selektor
• Membuat selektor lebih spesifik

Contog Penggabungan Keterangan

Namatag.namakelas{ Mengatur tag namatag tetapi hanya
} yang class=“namakelas”
Namatag1 > namatag2{ Mengatur namatag2 yang berada
} didalam namatag1
Namatag1 + Namatag2{ Mengatur satu namatag2 yang berada
} tepat disebelah namatag1
Nematag1 ~ Namatag2{ Mengatur semua namatag2 yang
} berada tepat disebelah namatag1

Harap tabel ini ditulis/capture

 .kelasA
Atur kelas A

tr.kelasA
Atur kelasA yang tag tr
 strong
Atur tag strong

p > strong
Atur tag strong yang berada didalam tag p
 tr.kelasA ~ tr
Atur semua tag tr yang terletak setelah
Tag tr yang kelasA

tr.kelasA + tr
Atur satu tag tr yang terletak setelah
Tag tr yang kelasA
• Terdapat banyak
kombinasi dari selektor
yang dapat digunakan,
misalnya yang sering
digunakan adalah
membuat striped tabel.

• tr:nth-child(even)
• memilih tr yang genap
CSS Box Model
• Padding : jarak antara tulisan/gambar ke border (transparan)
• Border : garis pembatas
• Margin : jarak anatara satu elemen dengan elemen lainnya (transparan)
• Sehingga tulisan/gambar dengan lebar 100pixel, akan ditampilkan dilayar
menjadi : 100px + 2x padding + 2x border + 2x margin
[3]
 Padding=0

Padding=25, border=25, margin=25

border=1 margin=0
Persiapan
• Pada folder week_3/css
• Buatlah file baru bernama boxmodel.css

• Buka file latihan_3.html

• Buatlah link ke file boxmodel.css (lihat catatan/capture)
Pengaturan padding
padding
• Urutan dengan empat nilai,
sesuai dengan arah jarum jam
(atas, kanan, bawah, kiri)
• Padding: 20px 10px 5px 10px;
Margin
• Margin disingkat dengan
cara yang sama
Border
• Khusus border dapat
menyingkat lebih banyak
lagi:

Perintah yang disingkat

Pengaturan layout website
Tag jenis Block dan Inline
• Terdapat dua jenis tag
• Block: mengambil satu baris penuh
• Tidak mengizinkan ada elemen lain di baris yang sama
• Contoh: heading (h1-h6), <form>, <div>, dll
• Inline: tidak memerlukan satu baris penuh
• Boleh sebaris dengan elemen lain (yang sesama inline)
• Contoh: <img>, <a>, <strong>, <span>, dll
• Terlihat saat dibuat
border,
• tag-tag jenis block akan
mengambil satu baris
penuh
• Tag jenis inline tidak
Tag Div dan Span
• Tag Div dan Span,
biasanya digunakan
untuk mengatur layout
dari website.
• Misalnya website
berikut sebenarnya
terdiri dari tiga bagian
besar
Persiapan
• Pada folder week_3/css
• Buatlah file baru bernama layout.css

• Buka file latihan_4.html

• Buatlah link ke file layout.css (lihat catatan/capture)
Tag Div dan Span
• Hal ini dibuat
menggunakan tag <div>

Edit file Latihan_4.html

Tag Div dan Span
• Didalam bagian ini, bisa
ada sub-bagian, sub-
sub-bagian, dst
Tag Div dan Span
• Tambahkan isi
sementara
Tag Div dan Span
• Mulai atur dari bagian-
bagian utama

Layout.css
Tag Div dan Span
• Kemudian atur sub-
bagian
• Langkah
selanjutnya
adalah
mengisi
bagian-
bagian.
Letakkan
komponen
pada div
masing-
masing.
 Warna awal

Warna akhir

• Warna pada
website biasanya
adalah gradasi
warna.
• Misalnya pada Warna awal
website ini terdapat Warna akhir
dua gradasi warna,
untuk setiap warna
gunakan colorpicker
untuk mengambil
• Awal dan akhir
warna
Gunakan aplikasi color picker!
 Warna awal Warna akhir

Border yang sudah tidak dibutuhkan dapat dihapus/dijadikan komentar

Menggunakan CSS Framework
• Mengatur layout dan tampilan dapat
memakan waktu yang sangat lama untuk
memberikan hasil yang diinginkan.
• Untuk lebih mudah dapat digunakan CSS
framework
• Terdapat banyak sekali CSS framework

[4]
Install Bootstrap
• Download aplikasi bootstrap di
http://getbootstrap.com/
• Pilih Download Bootstrap

• Ekstrak file yang didownload

(bootstrap-x.x.x.dist.zip),
• Masuk ke folder hasil ekstrak sehingga
mendapatkan tiga folder
• Salin ketiga folder tersebut ke folder
aplikasi kita, (htdocs/week_3)
Install Bootstrap
• Download aplikasi jquery ke https://jquery.com/download/
• Pilih versi compressed, biasanya bernama jquery-x.x.x.min.js
• Setelah didownload, salin file tersebut ke aplikasi kita
• Gabungkan ke folder js (htdocs/week_3/js)
• Isi folder week_3 dan
week_3/js harus menjadi
seperti pada gambar

Isi folder htdocs/week_3

Isi folder htdocs/week_3/js

Cara menggunakan bootstrap
• Buka file latihan_5.html
• Tambahkan link ke file css bootstrap (lihat gambar)
• Tambahkan link ke file js jquery dan bootstrap (lihat gambar)

Nama file jquery bisa berbeda dengan yang anda gunakan, lihat di folder js!
• Menggunakan css framework
sangat memudahkan.
• Misalnya coba tambahkan
class=“table”

Edit file latihan_5.html

• Untuk membuat menjadi
striped cukup menambahkan
kelas
• Bootstrap memfasilitasi
interaktifitas
• Misalnya untuk membuat
hover (highlight yang
mengikuti gerak mouse)
Sistem Grid untuk Pengaturan Layout
Halaman
• Ada banyak sekali fitur
tampilan dan
interaktifitas yang bisa
langsung digunakan
dengan mudah pada
Bootstrap.
• Yang terpenting adalah
fasilitas dalam mengatur
layout (tata letak) dari
halaman web.

[5]
Sistem Grid untuk Pengaturan Layout
Halaman
• Bootstrap Layout membagi layar menjadi grid, dengan total lebar
halaman adalah 12 grid.

[5]
• Format pengaturan grid, setiap baris ditandai dengan
• <div class=“row”>
• Satu halaman bisa terdiri dari satu atau lebih baris
• Dalam suatu baris bisa terdapat satu atau lebih kolom
• <div class=“col-*-*”>
• Tanda * akan diisi dengan lebar (dalam grid) kolom
• Dalam satu baris, nilai jumlah total dari col harus berjumlah 12
Persiapan
• Buka file latihan_6.html
• Salin isi tag <head> dari latihan_5.html
• Buat file layoutbootstrap.css, kemudian buat linknya (lihat gambar)

Edit file latihan_6.html

Sistem Grid untuk Pengaturan Layout
Halaman
• Untuk halaman kita,
karena terdiri dari tiga
baris utama, maka:

Edit file latihan_6.html

[5]
 class=“Col-md-6”
• Selanjutnya untuk sub- • md adalah kelas grid,
bagian • xs (ukuran handphone), sm (ukuran tablet),
md (ukuran desktop), lg (large desktop)
• Perhatikaan bahwa
semua total jumlah col
adalah bernilai 12
7+5 = 12, 6+6=12

[5]
 Tambahkan id

Coba Persempit dan Perlebar jendela browser, layoutbootstrap.css [5]

halaman akan menyesuaikan ukuran browser
Kesimpulan
• Cara penggunaan yang css yang terbaik adalah menggunakan file terpisah.
• Pengaturan CSS dilakukan secara bertingkat dengan rule:
• Aturan yang lebih spesifik menimpa aturan yang lebih umum
• Selektor dapat bermacam-macam
• Semuatag, satu Tag, kelas, id, gabungan, spesifik, dll.
• Setiap elemen memiliki: padding, border, margin.
• Penulisan css dapat dipersingkat.
• Div dan span biasanya digunakan untuk mengatur layout.
• Untuk mempermudah dan mempercepat pembangunan layout dapat
menggunakan CSS framework.
Source
[1]. http://nyfalls.com/dev/wp-content/uploads/2013/03/Seneca-
Cascade-Mills-Falls-01.jpg
[2]. http://paletton.com/
[3]. http://www.w3schools.com/css/css_boxmodel.asp
[4]. http://usablica.github.io/front-end-frameworks/compare.html
[5]. http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp