-->

Iklan bawah header

Belajar CSS : Cara Penulisan Selector CSS

Penulisan selector css

Sebelumnya kita sudah mempelajari jenis-jenis selector CSS, Seperti Element Type Selector, Class Selector, ID Selector, Attribute Selector dan Universal Selector. Nah Untuk tutorial kali ini kita akan membahas bagaimana cara menggunakan beberapa selector secara bersamaan agar struktur html yang akan di beri css bisa lebih spesifik.

Tak perlu basa basi lagi, langsung saja kita masuk ke pembahasannya.

Cara Penulisan Selector CSS

Bisa kalian perhatikan pada contoh script HTML dibawah ini :


<!DOCTYPE html>
<html>
    <head>
    <title>Belajar Selector CSS</title>
</head>
<body>
  <h2 class="judul">Belajar CSS Mudah di <a href="https://www.offaweb.com">Warung Belajar</a></h2>
  <p><strong>CSS</strong> adalah singkatan dari <em>Cascading Style Sheet</em> yang digunakan untuk memanipulasi tampilan dari kode html yang telah ditulis untuk membuat web.</p>
  <p id="offaweb">  <a href="https://www.offaweb.com">Offaweb</a> Menyediakan Beberapa tutorial yang berhubungan dengan web seperti HTML dan CSS</p>
  <p class="contoh">beberapa materinya antara lain :</p>
  <h3>Materi HTML</h3>
	<table id="table1" border="1">
	<tr>
		<th>No</th>
		<th>Pembahasan</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Belajar HTML Part 1 Mengenal HTML</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Belajar HTML Part 2 Membuat File HTML</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Tutorial HTML Part 3 Pengertian Tag, Elemen dan Attribute di HTML</td>
	</tr>
	</table>
  
  <h3>Materi CSS</h3>
  
    <table id="table2" border="1">
	<tr>
		<th>No</th>
		<th>Pembahasan</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Belajar CSS Part 1 Mengenal Fungsi CSS</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Belajar CSS Part 2 Mengenal Selector, Property, dan Value CSS</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Belajar CSS Part 3 Cara Penulisan Kode CSS pada HTML</td>
	</tr>
	</table>
	
 </body>
</html>

Setelah script htmlnya dibuat, selanjutnya kita akan buat beberapa contoh penggunaan selector css :

Tag h2 dan h3 menjadi warna merah

Untuk merubah warna teks pada tag h2 dan h3, bisa dengan menuliskan selecotnya satu persatu seperti berikut ini :


h2
{
color:blue;
}
h3
{
color:blue;
}

Karena value pada property yang akan digunakan sama, sehingga dapat dituliskan seperti dibawah ini:


h2,h3
{
color: red;
}

Tag <strong> pada tag <p>

Ukuran font pada teks "CSS" yang berada pada tag paragraf dan tag <strong > akan dirubah menjadi 15px, maka code CSSnya sebagai berikut :


p strong
{
font-size: 15px;
}

Tag <em> pada tag <p>

Kita akan merubah warna teks yang berada pada tag <em> pada paragraf pertama menjadi warna biru, berikut script cssnya :


p em
{
color:blue;
}

Selector yang kita tuliskan adalah tag selector p dan em

Teks dengan menggunakan ID offaweb oada tag <p>

Kita akan merubah warna teks pada paragraf kedua yang menggunakan attribute id dengan value offaweb menjadi warna kuning, maka code css yang kita tuliskan seperti ini:


p#offaweb
{
color: yellow;
}

Teks dengan menggunakan class contoh pada tag <p>

Pada paragraf ketiga yang menggukan class="contoh" kita akan mengubah warnanya menjadi warna hijau


p.contoh
{
color:green;
}

Attribute [href] pada paragraf kedua

Warna link pada paragraf kedua akan kita rubah warnanya menjadi warna orange, maka script cssnya sebagai berikut :


p#offaweb [href]
{
color: orange;
}

Tag table dengan ID table1

kita akan merubah warna background pada tabel yang menggunakan id="table1", script cssnya sebagai berikut :


table#table1
{
backgroud-color:#ccc;
}

Setelah melihat beberapa contoh diatas, sekang kita tuliskan keseluruhan kode HTML dan cssnya, untuk cssnya akan kita gunakan mode internal.

<!DOCTYPE html>
<html>
    <head>
    <title>Belajar Selector CSS</title>
	<style type="text/css">
	h2,h3
    {
	color:red;
    }
    p strong
    {
	font-size:15px;
    }
    p em
    {
	color:blue;
    }
    p#offaweb
    {
	color:yellow;
    }
    p.contoh
    {
	color:green;
    }
    p#offaweb [href]
    {
	color:orange;
    }
    
    table#table1
    {
	background-color:#ccc;
    }
	</style>
</head>
<body>
  <h2 class="judul">Belajar CSS Mudah di <a href="https://www.offaweb.com">offaweb</a></h2>
  <p><strong>CSS</strong> adalah singkatan dari <em>Cascading Style Sheet</em> yang digunakan untuk memanipulasi tampilan dari kode html yang telah ditulis untuk membuat web.</p>
  <p id="offaweb">  <a href="https://www.offaweb.com">Offaweb</a> Menyediakan Beberapa tutorial yang berhubungan dengan web seperti HTML dan CSS</p>
  <p class="contoh">beberapa materinya antara lain :</p>
  <h3>Materi HTML</h3>
	<table id="table1" border="1">
	<tr>
		<th>No</th>
		<th>Pembahasan</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Belajar HTML Part 1 Mengenal HTML</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Belajar HTML Part 2 Membuat File HTML</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Tutorial HTML Part 3 Pengertian Tag, Elemen dan Attribute di HTML</td>
	</tr>
	</table>
  
  <h3>Materi CSS</h3>
  
    <table id="table2" border="1">
	<tr>
		<th>No</th>
		<th>Pembahasan</th>
	</tr>
	<tr>
		<td>1</td>
		<td>Belajar CSS Part 1 Mengenal Fungsi CSS</td>
	</tr>
	<tr>
		<td>2</td>
		<td>Belajar CSS Part 2 Mengenal Selector, Property, dan Value CSS</td>
	</tr>
	<tr>
		<td>3</td>
		<td>Belajar CSS Part 3 Cara Penulisan Kode CSS pada HTML</td>
	</tr>
	</table>
	
 </body>
</html>

Simpan script tersebut, lalu jalankan di browser:

Penulisan selector

Demikianlah cara menggabungkan beberapa selector css. semoga bermanfaat.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel