Selektor CSS dengan menggunakan nama elemen HTML merupakan cara yang paling sederhana dalam melakukan penataan gaya pada halaman HTML. Cara ini dilakukan dengan cara menyebutkan nama elemen HTML kemudian mengatur style yang akan diterapkan pada elemen tersebut yaitu dengan menyebutkan nama properti disertai dengan nilainya.
Nama elemen HTML yang digunakan merupakan nama elemen HTML standart yang biasa digunakan dalam menyusun halaman HTML. Nama elemen tersebut dapat berupa div, paragraf, article, header dan lainnya. Anda cukup menyebutkan nama elemen tersebut kemudian mengatur gaya yang akan dibuat.
Namun dalam dalam menuliskan gaya pada elemen, harus mengikuti aturan penulisan sintaks CSS.
CSS
1
Previous Pageelemen_html{property1:value1; property2:value2;}
Pada contoh berikut, terdapat elemen HTML heading1 <h1> yang menggunakan gaya warna huruf merah (red). Kemudian elemen div <div> menggunakan warna huruf maroon.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:red;}
div{color:maroon;}
</style>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<div>Kindness makes you the most beautifull person in the world, no matter what you look like.</div>
</body>
</html>
Selektor turunan dapat diterapkan saat menemukan suatu elemen HTML yang menginduk pada elemen lainnya. Misalnya di dalam suatu elemen HTML <div> terdapat elemen lain seperti paragraf (<p>), ataupun span <span>. Untuk menerapkan suatu gaya pada elemen HTML yang menginduk pada elemen tertentu dapat menggunakan selektor turunan. Penulisan selektor turunan dilakukan dengan menuliskan nama elemen induk kemudian spasi kemudian nama elemen anak.
CSS
1
div p{color:blue; border:solid 1px FireBrick;}
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:red;}
div{color:maroon;}
div p{color:blue; border:solid 1px FireBrick;}
</style>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<div>
Ini adalah bagian isi dari elemen div
<p>Ini adalah bagian isi dari elemen paragraf</p>
</div>
</body>
</html>
Jika beberapa buah elemen HTML mempunyai gaya yang sama, untuk mempermudah dan mempercepat penulisan gaya dapat menggunakan selektor secara berkelompok. Misalnya terdapat elemen HTML italic (<i>), bold <b> mempunyai style yang sama yaitu memiliki warna huruf biru (blue) dan border. Maka kedua buah elemen tersebut dapat digabungkan penulisannya. Penulisan selektor berkelompok dilakukan dengan menuliskan nama elemen HTML pertama kemudian koma kemudian nama elemen kedua.
CSS
1
b, i{color:blue; border:solid 1px FireBrick;}
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<style>
h1{color:red;}
div{color:maroon;}
b, i{color:blue; border:solid 1px FireBrick;}
</style>
<title>Belajar Style Sheet Pada CSS</title>
</head>
<body>
<h1>Belajar Style Sheet Pada CSS</h1>
<div><b>Kindness</b> makes you the most <i>beatifull person</i> in the world, no matter what you look like.</div>
</body>
</html>
Tutorial CSS
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
