Pseduo-Class
Adalah sebuah kelas semu yang dimiliki oleh elemen HTML, yang
membuat kita dapat mendefinisikan style pada keadaan tertentu dari elemen
tersebut. Pseduo-class terbagi menjadi beberapa type, sebagai berikut :1. Yang berhubungan dengan link
a) : link
Style default pada sebuah link
(a yang memiliki href)
b) : hover
Style ketika kursor mouse berada diatas sebuah link / elemen
c) : active
Style ketika sebuah link di klik (keadaan aktif)
d) : visisted
Style ketika sebuah link sudah pernah di kunjungi sebelumnya
(menggunakan browser yang sama)
2. Yang berhubungan dengan posisi elemen (ada pada css 3)
a) : first-child Memilih elemen pertama dari sebuah parent (elemen
pembungkusnya )
b) : last-child
Memilih elemen terakhir dari sebuah parent (elemen
pembungkusnya )
c) : nth-child(n)
Memilih elemen ke (n) dari sebuah parent (elemen pembungkusnya )
n bisa berarti urutan 1,2,3,….. atau pola (2n),(3n+2), atau ganjil dan
genap, even & odd
d) : first-of-type
Memilih elemen pertama dari sebuah jenis / tipe tag
e) : last-of-type
Memilih elemen terakhir dari sebuah jenis / tipe tag.
PADDING, MARGIN DAN BORDER
Dalam CSS dikenal istilah ‘Box Model’. Perhatikan gambar berikut ini:
Keterangan gambar :
•Padding : Menentukan jarak komponen body ke border atau Ukuran jarak
bagian dalam .
• Border : Adalah garis tepi dari komponen
• Margin : Adalah Ukuran jarak bagian luar atau ukuran jarak sesudah Border
CSS menggunakan konsep ini dalam mengatur tag-tag HTML. Pada
gambar, bayangkan area ‘Content’ misalnya adalah sebuah paragraph.
Obyek paragraph ini akan dianggap CSS memiliki area padding, border, dan
margin disekitarnya. Keberadaan area-area ini berguna untuk pengaturan
tata letak. Misalnya ingin diatur agar 2 buah gambar yang terletak
berdampingan tidak terlalu rapat, maka kita dapat memperbesar lebar dari
area margin agar jarak antara gambar lebih lebar.
• Padding
ditulis dengan CSS padding:6px 6px 6px 6px; urutan nilai angkanya adalah
atas, kanan, bawah dan kiri, atau bisa menggunakan penulisan lengkap
seperti berikut ini :
padding-left:6px; ➔ini adalah untuk pengaturan padding bagian kiri
padding-right:6px; ➔ ini adalah untuk pengaturan padding kanan
padding-top:6px; ➔ untuk bagian atas dan
padding-bottom:6px; ➔ untuk bagian bawah, Ingat satuan px(pixels) bisa
kamu ganti
sesuai satuan yang lain yang sesuai
• Border
Ditulis dengan CSS border:1px dotted #00cc00; ➔ urutan penggunaanya
adalah ukuran border, style border dan warna border, atau bisa
menggunakan penulisan lengkap seperti berikut ini :
border-width:1px; ➔ ini adalah ketebalan border sebesar 1pixel
border-style:dotted; ➔ ini adalah jenis bordernya yang bisa diganti dengan
tipe dashed, solid, double, groove, ridge, inset, outset dan lainnya
border-color:#f1f1f1; ➔ ini adalah warna dari border. kamu bisa
mengganti code warnanya (Di Tools Color).
• Margin
Ditulis dengan CSS margin:5px 5px 5px 5px; ➔ urutanya atas, kanan,
bawah dan kiri,
atau bisa menggunakan penulisan lengkap seperti berikut ini :
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
Latihan CSS :
- Salin script berikut ini, lalu simpan di folder lat_css diakhiri dengan,.css
/* css carikan a,di dalam li yang merupakan
anak pertama*/
li:first-child a{
color:green;
}
/* css carikan a,di dalam li yang merupakan
anak terakhir*/
li:last-child a{
color:green;
}
/* css carikan a, di dalam li yang merupakan
anak genap*/
li:nth-child(even) a{
color:green;
}
/* css carikan a, di dalam li yang merupakan
anak ganjil*/
li:nth-child(odd) a{
color:violet;
}
/* css carikan p, di dalam halaman yang urutannya pertama*/
p:first-of-type {
color: red;
}
/* css carikan p, di dalam halaman yang urutannya terakhir*/
p:last-of-type {
color: orange;
}
- Salin script berikut ini, lalu simpan di folder modul_web1 dengan
nama latihan_css.html
<!DOCTYPE html>
<html>
<head>
<title> Latihan CSS</title>
<link rel="stylesheet" type="text/css" href="style_css.css">
</head>
<body>
<a href="#" class="hello">Hello World</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
<li><a href="#">Link 10</a></li>
</ul>
<p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dan
penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks
sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil
sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh
huruf. </p>
<p> Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan
huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun
1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan
kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak
Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem
Ipsum.</p>
</body>
</html>
Hasil yang akan ditampilkan dibrowser :
