Selektor dan Properti : Pemrograman CSS Dasar - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Selektor dan Properti : Pemrograman CSS Dasar, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel css, Artikel html, Artikel Informatika, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Selektor dan Properti : Pemrograman CSS Dasar
link : Selektor dan Properti : Pemrograman CSS Dasar

Baca juga


Selektor dan Properti : Pemrograman CSS Dasar


CSS atau Cascading Style Sheets adalah bahasa pemrograman yang digunakan untuk mengatur tampilan dan desain visual dari halaman web. Dalam pemrograman CSS, ada dua hal yang perlu dikuasai, yaitu selektor dan properti. Selektor digunakan untuk menentukan elemen HTML mana yang akan diubah tampilannya, sedangkan properti digunakan untuk mengatur tampilan dan desain visual dari elemen HTML tersebut.

Dalam artikel ini, kita akan membahas pemrograman CSS dasar, khususnya tentang selektor dan properti. Mari kita mulai belajar!


Selektor CSS

Salah satu konsep dasar dalam pemrograman CSS adalah selektor. Selektor digunakan untuk menentukan elemen HTML mana yang akan diubah tampilannya. Ada beberapa jenis selektor CSS, antara lain:

Selektor Elemen

Selektor elemen adalah jenis selektor CSS yang paling sederhana dan paling sering digunakan. Selektor ini berdasarkan pada nama tag elemen HTML. Berikut ini adalah contoh penggunaan selektor elemen:

p {
color: blue;
}

Contoh di atas akan mengubah warna teks pada semua elemen <p> menjadi biru.

Selektor Kelas

Selektor kelas digunakan untuk memilih elemen HTML berdasarkan nama kelas yang telah ditentukan. Berikut ini adalah contoh penggunaan selektor kelas:

judul {
font-weight: bold;
}

Contoh di atas akan membuat teks pada elemen yang memiliki kelas "judul" menjadi tebal (bold).

Selektor ID

Selektor ID digunakan untuk memilih elemen HTML berdasarkan ID yang telah ditentukan. Berikut ini adalah contoh penggunaan selektor ID:

#header {
background-color: grey;
}

Contoh di atas akan mengubah warna latar belakang dari elemen yang memiliki ID "header" menjadi abu-abu.

Selektor Kombinasi

Selektor kombinasi digunakan untuk memilih elemen HTML dengan kombinasi selektor. Berikut ini adalah contoh penggunaan selektor kombinasi:

div p {
font-size: 16px;
}

Contoh di atas akan mengubah ukuran font pada semua elemen <p> yang berada di dalam elemen <div>.


Properti CSS

Properti CSS digunakan untuk mengatur tampilan dan desain visual dari elemen HTML. Ada banyak properti CSS yang dapat digunakan, antara lain:

  • Background-color: digunakan untuk mengatur warna latar belakang elemen HTML.
  • Color: digunakan untuk mengatur warna teks dari elemen HTML.
  • Font-size: digunakan untuk mengatur ukuran font dari teks pada elemen HTML.
  • Padding: digunakan untuk mengatur jarak antara batas elemen HTML dan konten di dalamnya.
  • Margin: digunakan untuk mengatur jarak antara batas elemen HTML dengan elemen lain di sekitarnya.

Baca Juga : Perbedaan HTML & CSS


Contoh Implementasi

Berikut ini adalah contoh implementasi pemrograman CSS dasar untuk mengubah tampilan dari sebuah halaman web:

HTML:

<!DOCTYPE html>

<html>

<head>

<title>Contoh Implementasi Pemrograman CSS Dasar</title>

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

</head>

<body>

<h1 class="judul">Belajar Pemrograman CSS Dasar</h1>

<p>Mari belajar tentang selektor dan properti dalam pemrograman CSS!</p>

<div class="box">

<p>Ini adalah contoh box dengan pemrograman CSS dasar.</p>

</div>

</body>

</html>


CSS:

.judul {

color: blue;

}


.box {

background-color: grey;

padding: 20px;

margin: 10px;

}


Dalam contoh di atas, kita menggunakan selektor kelas (.judul) untuk mengubah warna teks pada elemen h1 menjadi biru. Selain itu, kita juga menggunakan selektor kelas (.box) untuk mengatur warna latar belakang, jarak antara batas dan konten, serta jarak antara elemen tersebut dengan elemen lain di sekitarnya.





Demikianlah Artikel Selektor dan Properti : Pemrograman CSS Dasar

Sekianlah artikel Selektor dan Properti : Pemrograman CSS Dasar kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Selektor dan Properti : Pemrograman CSS Dasar dengan alamat link https://dev-create.blogspot.com/2023/03/selektor-dan-properti-pemrograman-css.html