Skip to content

Pesona Informatika

Belajar programming, tech tips, dan catatan teknik informatika

Menu
  • Home
  • Android
  • Programming
    • Belajar Python
    • Belajar c++
    • Kumpulan contoh program Java
    • Belajar CSS Pemula Dari Awal
    • Belajar JavaScript
    • Belajar ReactJS
  • Operating System
  • Tips&Trick
  • Other Notes
Menu

Belajar CSS ( 3. Selector )

Posted on

Selector Pada CSS

Kali ini kita akan belajar css selector. Selector adalah bagian yang memungkinkan kita untuk memillih dan memanipulasi dari elemen suatu HTML. Selector dapat digunakan untuk mencari dan memilih elemen dari suatu HTML berdasarkan id dan class.

contoh:


<!DOCTYPE html>
<html>
<head>
<style>
     p {
       text-align: center;
       color: blue;
     } 
</style>
</head>
<body>
    <p>setiap paragraf telah kita manipulasi menjadi rata tengah dan berwarna biru</p>
    <p>Iya kan</p>
    <p>Semangat belajar</p>
</body>
</html>

hasil

Id Selector

Pemilihan id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu. Id harus unik dalam sebuah halaman, sehingga pemilihan id digunakan jika kita ingin memilih satu, elemen yang unik. Untuk memilih elemen dengan id tertentu, menulis karakter hash, diikuti oleh id dari elemen. Gaya aturan di bawah ini akan diterapkan pada elemen HTML dengan id = “belajar” contoh:


<!DOCTYPE html>
<html>
<head>
<style>
    #belajar {
       text-align: center;
       color: red;
    }
</style>
</head>
<body>
<p id="belajar">Hello World!</p>
<p>paragraf ini tidak tidak kena efek dari selector</p>
</body>
</html>

hasil

Kelas Selector

Pemilih kelas memilih elemen dengan atribut kelas khusus. Untuk memilih elemen dengan kelas tertentu, menulis karakter periode, diikuti oleh nama kelas: Dalam contoh di bawah, semua elemen HTML dengan class = “center” akan pusat-blok:


<!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>

hasil

Anda juga dapat menentukan bahwa elemen HTML hanya khusus harus dipengaruhi oleh kelas.


<!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>ini juga tidak terkena efek css</p>
<p class="center">This paragraph will be red and center-aligned.</p> 

</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Akhi Syabab
Akhi Syabab

Programmer python yang punya banyak ambisi.
Remote developer at remoteworker.id Software Agency

Like our page, please… :D

Pesonainformatika

Sebuah site  untuk menyimpan dan dokumentasi apapun yang kami pelajari yang berhubungan dengan teknologi komputer khususnya pemrograman dan tentang perkuliahan.

©2023 Pesona Informatika | Design: Newspaperly WordPress Theme
Go to mobile version