Home » Website » Cara Menggunakan Simple Selector CSS Untuk Mengatur Tampilan Website

Cara Menggunakan Simple Selector CSS Untuk Mengatur Tampilan Website

Daftar Isi

Mengenal Fungsi Selector

Selector digunakan untuk memilih nama elemen HTML yang akan di atur tampilannya. Nama selector dapat menggunakan nama dari sebuah elemen HTML atau nama tersendir yang di berikan oleh pengguna. Namun, kita perlu mengetahui bagaimana cara penulisan selector agar dapat berfungsi dengan benar.

Penulisan selector sendiri dikutip dari situs https://www.w3schools.com di kategorikan menjadi 4 yaitu: simple selectors, combinator selectors, pseudo-class selectors, pseudo-elements selectors, dan attribute selectors. Namun, pada artikel ini kita akan membahas satu kategori yaitu simple selectors.

Simple selectors merupakan cara penulisan dasar selectors CSS.  Cara penggunaannya memilih nama elemen dasar HTML, baik menggunakan nama elemen, id, dan class untuk mengatur tampilannya.

Simple Selectors Elemen Dasar HTML

Berikut ini adalah contoh penulisan simple selectors yang menggunakan nama elemen dasar HTML.

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

Keterangan:

  • Baris 1-4 merupakan kode CSS yang berfungsi untuk mengatur tampilan pada setiap teks yang di bungkus dengan elemen

    menjadi rata tengah dan berwarna merah.

  • Baris 1 bertuliskan “p” merupakan nama selector yang di ambil dari nama elemen

    pada kode HTML.

  • Baris 2 tulisan “text-align” merupakan nama property yang berfungsi untuk mengatur perataan paragraf.
  • Setiap menuliskan nilai property harus di ikuti tanda “:” kemudian di ikuti dengan value dari nama property dan di akhiri dengan semicolon “;” setelah menuliskan value property.
  • Baris 3 tulisan “color” berfungsi untuk mengatur warna tulisan, nilai property color berisi nama warna tulisan atau menggunakan kode ASCII.

Agar lebih memahami bagaimana cara menggunakan simple selectors menggunakan basic elemen HTML, Anda ketikkan kode berikut dan tampilkan di browser lalu lihat hasilnya.

				
					<!DOCTYPE html>
<html>
<head><style>p{text-align:center;color:red}</style></head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
				
			

Simple Selectors Atribut Id

Setelah Anda memahami simple selectors menggunakan elemen dasar HTML, selanjutnya Anda harus memahami cara penulisan selectors Id. Selectors Id menggunakan nilai atribut Id dari elemen untuk memilih elemen tertentu.

Untuk memilih elemen dengan Id tertentu, Anda harus menambahkan karakter hash “#” dan di ikuti dengan Id elemen. Berikut ini adalah cara penggunaan selectors Id.

				
					#para1 {
  text-align: center;
  color: red;
}
				
			

Keterangan:

  • Aturan CSS di atas diterapkan ke elemen HTML dengan id=”para1″.
  • Baris 1-4 merupakan kode CSS yang berfungsi untuk mengatur tampilan pada setiap teks yang di bungkus dengan atribut Id “para1” menjadi rata tengah dan berwarna merah.
  • Baris 1 bertuliskan “#para1” merupakan nama selector yang diambil dari nilai atribut Id yang di gunakan pada suatu elemen. Karakter hash “#” merupakan cara penulisan selectors yang diambil dari atribut Id.
  • Baris 2 tulisan “text-align” merupakan nama property yang berfungsi untuk mengatur perataan paragraf.
  • Baris 3 tulisan “color” berfungsi untuk mengatur warna tulisan, nilai property color berisi nama warna tulisan atau menggunakan kode ASCII.

Berikut adalah contoh penggunaan selectors Id untuk mengatur tampilan elemen. Untuk mengetahui hasilnya, Anda ketik di teks editor dan tampilkan hasilnya di browser Anda.

				
					<!DOCTYPE html>
<html>
<head><style>#para1{text-align:center;color:red}</style></head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
				
			

Simple Selectors Atribut Class

Selector class digunakan untuk memilih elemen HTML dengan atribut class tertentu. Untuk memilih elemen dengan atribut class digunakan karakter titik (.) dan di ikuti dengan nama class.

Berikut adalah contoh penulisan selectors class untuk mengatur perataan paragraf dan mengatur warna tulisan pada paragraf.

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

Keterangan:

  • Aturan CSS di atas diterapkan ke elemen HTML dengan class=”center”.
  • Baris 1-4 merupakan kode CSS yang berfungsi untuk mengatur tampilan pada setiap teks yang di bungkus dengan atribut class “center” menjadi rata tengah dan berwarna merah.
  • Baris 1 bertuliskan “.class” merupakan nama selector yang diambil dari nilai atribut Class yang di gunakan pada suatu elemen. Karakter titik (.) merupakan cara penulisan selectors yang diambil dari atribut Class.
  • Baris 2 tulisan “text-align” merupakan nama property yang berfungsi untuk mengatur perataan teks.
  • Baris 3 tulisan “color” berfungsi untuk mengatur warna tulisan, nilai property color berisi nama warna tulisan atau menggunakan kode ASCII.

Agar lebih memahami bagaimana menerapkan selectors class untuk mengatur tampilan pada elemen HTML, ketikkan kode berikut ini di teks editor dan jalan di browser Anda.

				
					<!DOCTYPE html>
<html>
<head><style>.center{text-align:center;color:red}</style></head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 
</body>
</html>

				
			

Selain contoh diatas, ada beberapa cara penulisan nama selectors. Misalkan Anda juga bisa mengatur hanya elemen tertentu yang di atur tampilannya.

1. Mengatur Elemen Tertentu Dengan Selector Class

Berikut adalah contoh penggunaan selectors class untuk mengatur hanya elemen paragraf yang dapat di ubah dari nama selector class center.

				
					<!DOCTYPE html>
<html>
<head><style>p.center{text-align:center;color:red}</style></head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 
</body>
</html>

				
			

2. Mengatur Elemen Secara Universal

Aturan CSS di bawah ini akan memengaruhi setiap elemen HTML di halaman:

				
					<!DOCTYPE html>
<html>
<head><style>*{text-align:center;color:blue}</style></head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

				
			

3. CSS Grouping Selectors

Selector grouping merupakan penulisan nama selector yang dikelompokkan berdasarkan property atau gaya yang sama.

Berikut adalah contoh nama selectors yang belum di kelompokkan sehingga penulisannya lebih panjang.

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

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

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

Contoh penulisan di atas lebih panjang. Oleh karena itu, alangkah baiknya di tulis lebih singkat dengan meminimalkan penulisan kode dengan menggunakan selectors grouping.

Berikut adalah contoh penulisan kode CSS dengan selectors grouping, untuk mengelompokan selector, pisahkan setiap selektor dengan koma (,). Untuk melihat contohnya perhatikan kode berikut ini:

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

Selanjutnya, untuk melihat lebih lengkap penerapannya dalam mengatur tampilan pada elemen HTML, ketikkan kode berikut pada teks editor dan jalanakan di browser Anda.

				
					<!DOCTYPE html>
<html>
<head><style>h1,h2,p{text-align:center;color:red}</style></head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

				
			

Kesimpulan dari pembahasan ini bahwa penulisan simple selector dapat dilakukan dengan berbagai cara yaitu menggunakan nama elemen dasar HTML, nama elemen dengan atribut Id atau Class, menggunakan karakter bintang (*) untuk mengatur secara keseluruhan elemen, dan menggabungkan beberapa selectors yang memiliki pengaturan tampilan yang sama.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments