Kursus Membuat Web

iklan

Selector CSS

Fungsi Selector CSS

Sintak CSS
Gambar Sintak CSS

Dengan Selector Anda bisa memilih dan memberikan style pada tag atau elemen HTML terpilih.

Selain digunakan untuk mendapati atau memilih tag atau elemen HTML, juga bisa memilih id, class, type, attribute, value dari attribute dan memberikannya style.

Selector Untuk Memilih Tag atau Elemen

Pilih tag atau elemen berdasarkan nama tag atau elemen yang ingin diberikan style.

Contoh, Anda dapat memilih semua tag atau elemen <p></p> dalam satu halaman web atau dalam satu dokumen web.

p
{
	color:red;
	text-align:center;
}
Lihat ...

Selector Untuk Memilih ID

Pilih attribute id yang akan diberikan style dengan menuliskan tanda pagar (#) lalu diikuti value dari attribute id tersebut.

Contoh, Anda dapat memilih attribute id dengan value (kotak) untuk diberikan style.

#kotak
{
	width:200px;
	height:200px;
	padding:10px;
	background-color:red;
}
Lihat ...

Selector Untuk Memilih Class

Pilih attribute class yang akan diberikan style dengan menuliskan tanda titik (.) lalu diikuti value dari attribute class tersebut.

Contoh, Anda dapat memilih attribute class dengan value (merah) untuk diberikan style.

.merah
{
	color:red;
}

Lihat ...

Anda juga dapat memilih tag atau elemen HTML tertentu yang terpengaruh oleh class terpilih.

Pada contoh dibawah ini hanya tag atau elemen <p></p> dengan attribute class merah yang akan terpengaruh dengan style yang diberikan, walaupun tag atau elemen <h1></h1> memiliki attribute class merah tetapi tidak terpengaruh dengan style yang diberikan.

p.merah
{
	color:red;
}
Lihat ...

Pengelompokan Selector

Untuk tag atau elemen HTML yang memiliki style yang sama, maka Anda bisa mengelompokkan selector tersebut.

h1{
    text-align: center;
    color: red;
}
h2 {
    text-align: center;
    color: red;
}
p {
    text-align: center;
    color: red;
}

Anda bisa mengelompokkan sintak diatas dalam satu kelompok

Pisahkan setiap selector dengan tanda koma (,)

lihat contoh sintak dibawah ini :

h1, h2, p{
    text-align: center;
    color: red;
}

Lihat ...

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015