Selektor ID

Selektor ID digunakan untuk merujuk elemen HTML dengan ID tertentu dan memberikan gaya khusus pada elemen tersebut. ID adalah atribut unik yang hanya boleh diberikan pada satu elemen per halaman.

Menambahkan ID pada elemen HTML

<!DOCTYPE html>
<html>
<head>
    <title>Contoh Selektor ID</title>
</head>
<body>
    <div id="konten">
        <h1>Selamat datang!</h1>
        <p>Ini adalah contoh pemakaian selektor ID.</p>
    </div>
</body>
</html>

Pada contoh di atas, kami menambahkan atribut id dengan nilai "konten" pada elemen <div>.

Membuat CSS untuk Selektor ID

Buatlah file CSS terpisah atau masukkan kode CSS dalam tag <style> di dalam <head> dokumen HTML Anda.

#konten {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
}

Kode CSS di atas akan mengubah gaya elemen dengan ID "konten". Ini akan memberikan latar belakang berwarna biru muda, padding 20px, dan teks yang terpusat.

Memanggil File CSS atau Menyisipkan Kode CSS

Jika Anda memiliki file CSS terpisah, Anda perlu menyisipkannya dalam dokumen HTML dengan menggunakan tag <link> di dalam <head>:

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

Jika Anda ingin menyisipkan kode CSS langsung dalam HTML, letakkan kode CSS di dalam tag <style> di dalam <head>:

<head>
    <style>
        #konten {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>

Lihat Hasilnya

Buka halaman web Anda, dan elemen dengan ID "konten" sekarang akan memiliki gaya CSS yang telah Anda tentukan.

Ini adalah contoh singkat tentang cara menggunakan Selektor ID dalam CSS. Anda dapat mengganti ID dan properti CSS sesuai dengan kebutuhan proyek Anda. Semoga bermanfaat! ????

PREVIOUS
NEXT