CSS (lanjutan)

21 November 2016
 Pengaturan Font
Menentukan Jenis FONT
• Pengaturan font diatur melalui properti font-
family.
• Font yang selalu tersedia di browser
Font Keterangan

Serif Didefinisikan sebagai font yang memiliki dekorasi (terdapat ekor atau kaki),
misal pada Times New Roman
Sans-serif Didefinisikan sebagai font tanpa dekorasi, misal Arial

Monospace Didefinisikan sebagai font dengan lebar setiap huruf sama, misal Courier

Cursive Didefinisikan sebagai font tulisan tangan, misal pada comic sans MS atau
Brush Script
Fantasy Didefinisikan sebagai font dengan gaya yang lebih atraktif
 Pengaturan Font (con’t)
Menentukan Ukuran Font
• Ukuran font diatur melalui font-size
• Satuan ukuran font yang biasa digunakan
adalah px (pixel). Selain itu ada percent
(%), inchi (in), Ems (em) yang berarti 2x
dari ukuran font awal, point (pt)  1/72
inci, pica (pc)  12 titik, milimeter (mm),
centimeter (cm)
• Browser berpengaruh pada ukuran font
 Pengaturan Font (con’t)
• Untuk memiringkan sebuah teks diatur
melalui font-style. Nilai properti normal
dan italic(miring).
• Untuk menebalkan sebuah teks diatur
melalui font-weight. Nilai properti normal
dan bold(tebal).
Contoh:
.huruf {
font-style: italic;
font-weight: bold;
}
 Pengaturan Teks
• Mengatur perataan teks
Nilai Properti Keterangan

Center Teks diletakkan di tengah

Right Teks diatur rata kanan

Left Teks diatur rata kiri

Justify Teks diatur rata kanan dan kiri

Contoh:
h1{
text-align: center;
}
.kiri {
text-align: left;
}
dst.
 Pengaturan Teks
• Mengatur batas kiri, kanan, atas, bawah
Nilai Properti Keterangan

padding-top Jarak terhadap batas atas

padding-bottom Jarak terhadap batas bawah

padding-left Jarak terhadap batas kiri

padding-right Jarak terhadap batas kanan

padding-left padding-top
Contoh:
.format{
padding-
right
padding-top: 1cm;
padding-right: 1cm;
padding-bottom: 1cm;
padding-left: 1cm;
}
padding-bottom
 Pengaturan Teks
• Kemungkinan nilai pada padding
Jumlah Nilai Keterangan
dalam
Padding
1 Batas kiri, batas kanan, batas atas, dan batas bawah diisi dengan nilai
yang sama
2 Nilai pertama menentukan nilai untuk batas atas dan batas bawah serta
nilai kedua menentukan nilai untuk batas kiri dan batas kanan
3 Nilai pertama menentukan nilai batas atas, nilai kedua menentukan
batas kiri dan kanan, nilai ketiga menentukan batas bawah
4 Secara berturut-turut menentukan batas atas, batas kanan, batas
bawah, batas kiri
 Pengaturan Teks
• Properti Margin. Hampir sama dengan
padding, tetapi jarak yang diatur memiliki
efek di luar bingkai elemen
Contoh:
.margin{
margin-left: 1cm;
border: solid; Properti border
} akan mempermudah
.padding { pemahaman
padding-left: 1cm; terhadap perbedaan
border: solid; margin dan padding
}
 Pengaturan Teks
• Perbedaan antara properti padding dan
margin

padding-left padding-top margin-top

padding-
right

margin-right

padding-bottom
margin-left
margin-bottom
 Mengatur Identasi
• Untuk menampilkan sebuah awal paragraf
menjorok ke kakan, dapat digunakan text-
indent
Ilustrasi Contoh 2:
Contoh 1:
p{
text-indent: 50px; text-indent
}

Contoh 2:
p{
text-indent: -30px;
padding-left: 30px;
}
padding-left
 Huruf Kapital
• Properti text-transform bermanfaat untuk
melakukan konversi teks
Properti Keterangan
Capitalize Setiap awal kata diubah menjadi huruf
kapital
Lowercase Setiap teks diubah menjadi huruf kecil
Uppercase Setiap teks diubah menjadi huruf kapital
None Teks ditampilkan tanpa konversi

Contoh:
.capital{
text-transform: capitalize;
}
 Mengatur Bingkai
• Untuk memunculkan bingkai pada sebuah
elemen HTML, dapat menggunakan properti
border (border-left, border-right, border-top,
border-bottom)
• Properti tersebut dapat diisi dengan beberapa
value. Contoh:
border: 2px solid blue;
– 2px menyatakan ukuran ketebalan bingkai
– Solid menyatakan bentuk bingkai (berupa garis utuh)
– Blue menyatakan warna bingkai
Mengatur Bingkai (con’t)
 Mengatur Ketebalan Bingkai
• Ketebalan bingkai dapat diatur melalui properti
border-width, border-left-width, border-top-
width,border-right-width, atau border-bottom-
width.
• Nilai yang digunakan dapat berupa nilai seperti 2px
atau menggunakan konstanta:
– Thin berarti tipis;
– Medium berarti sedang;
– Thick berarti tebal.
 Gambar
• Gambar sebagai latar belakang diatur dengan
menggunakan background-image
body{
background-image: url(gambar.jpg);
}
• Apabila ingin menampilkan gambar secara berulang
dapat ditambahkan pengaturan sebagai berikut:
background-repeat: no-repeat;
- repeat-x berarti diulang pada arah horizontal
- repeat-y berarti diulang pada arah vertikal
 Gambar (con’t)
• Posisi gambar dituliskan sebagai berikut:
background-position: right top;

Arah horizontal Arah vertikal

Penjelasan:
• top, center, bottom untuk posisi vertikal
• left, center, right untuk posisi horizontal

• Dapat juga dituliskan dengan nilai:

background-position: 40px 40px;
Latar belakang ditaruh pada posisi kolom 40 piksel
dan baris 40 piksel terhadap ujung kiri atas elemen
yang mewadahinya.
 Navigasi
• Navigasi berguna untuk membuat link atau
menu di halaman HTML
• Link dapat dibuat dengan elemen a (dapat
juga menggunakan teks ataupun gambar)
 Navigasi (con’t)
• Pseudo-kelas yang biasa digunakan untuk navigasi:
Pseudo-kelas Keterangan
Active Menyatakan keadaan pada elemen saat elemen diklik
Focus Keadaan yang menyatakan bahwa elemen sedang
mendapat focus (misalnya siap menerima masukan
dari keyboard)
Hover Menyatakan bahwa penunjuk mouse sedang berada di
atas elemen
Link Menyatakan link yang berlum pernah dikunjungi
Visited Menyatakan link yang pernah dikunjungi
 “Kerjakan, meskipun akan ada
kesalahan. Karena kesalahan
juga bagian dari sebuah proses”

Terimakasih
 Ld.Farida
 Referensi
• Kadir (2011), From Zero to a Pro CSS, Tip dan
Trik untuk Menyertakan Cascading Style Sheet
dalam Halaman Web, Penerbit Andi: Yogyakarta