Pengenalan CSS
Pengenalan CSS
Pengenalan CSS adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 1 dari 1. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML for Kids, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML for Kids mencakup 1 pelajaran total.
Pendahuluan 1
Halo,
Di bab sebelumnya, kita telah mempelajari apa itu CSS dan alasan kita harus menggunakannya. Sekarang saya ingin memberikan pengantar singkat dengan contoh sederhana.
Mari kita mendefinisikan halaman HTML sederhana.
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>Gaya Sebaris
Sekarang, mari kita mengubah warna tajuk Hello CSS menjadi merah. Untuk itu, kita akan menggunakan atribut style yang dapat ditambahkan ke hampir semua tag HTML.
Dengan atribut ini, kita dapat mendefinisikan gaya secara sebaris pada setiap elemen.
Saat melihat bagian pratinjau, kita akan melihat bahwa warna tajuk berubah menjadi merah.
color: red;
Kita telah memberi warna pada fon elemen dengan definisi gaya.
<h1 style="color:red;">Hello CSS</h1>Gaya Sebaris 2
Anda mungkin ingat bahwa kita telah mengatakan bahwa kita menggunakan atribut untuk memberikan perilaku dan informasi tambahan kepada tag dalam HTML.
Salah satu atribut style yang paling penting adalah penggunaan atribut style untuk mendefinisikan gaya bagi tag.
Gaya Sebaris 3
Sekarang mari kita menambahkan gaya baru. Kita dapat memperbesar ukuran teks dengan font-size.
Saat mendefinisikan beberapa gaya, kita perlu memisahkan gaya-gaya tersebut dengan titik koma.
Pada contoh di bawah, gaya warna dan font-size dipisahkan oleh titik koma.
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>Definisi Gaya
Sintaks penting saat menambahkan gaya.
styleName: styleValue;
Mari kita mengingat kembali bahwa kita perlu menetapkan gaya seperti di atas.
Contoh
Sekarang mari kita mengembangkan contoh kita sedikit lagi.
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>Contoh 2
Pada contoh ini, kita ingin mengubah warna semua teks menjadi merah. Untuk setiap tag, kita dapat mendefinisikan gaya sebagai berikut.
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>Pemilih CSS
Namun, cara tersebut terlihat kurang baik, bukan?
Karena sekarang kita memiliki 3 elemen di halaman, kita mengubah warna teks masing-masing menjadi merah. Namun, jika jumlah ini meningkat menjadi 3000, mendefinisikan gaya untuk setiap elemen tentu tidak masuk akal.
Sebagai gantinya, kita perlu menggunakan pemilih CSS, bukan mendefinisikan setiap elemen secara sebaris.
Pengantar 12
Sekarang, mari kita mempelajari konsep pemilih.
Pemilih CSS bertugas memilih elemen HTML terkait yang terdapat dalam dokumen untuk menerapkan gaya pada elemen HTML.
Jadi, seperti yang dapat kita pahami dari namanya, pemilih memilih elemen HTML. 😂
Pemilih CSS harus didefinisikan di antara tag <style> dalam dokumen HTML atau dalam file CSS eksternal.
Dalam contoh-contoh kita, kita akan menggunakan definisi yang biasanya berada di antara tag style. Namun, mendefinisikan gaya dalam file CSS eksternal lebih tepat.
Pengantar 13
Operator titik dan nama class digunakan untuk mendefinisikan class di antara tag style. Definisi style dibuat di antara kurung kurawal.
.class-name {
font-size:22px;
color:red;
}
Pada contoh di bawah, kita telah mendefinisikan class bernama my-component di antara tag style. Kemudian, style font-size ditetapkan pada class tersebut.
<style>
.my-component{
font-size:22px;
}
</style>
Sekarang mari kita definisikan dua elemen paragraf
Sekarang mari kita definisikan dua elemen paragraf yang memiliki class my-component.
Setelah definisi ini, karena kedua paragraf memiliki nama class yang sama, keduanya akan dipilih oleh selector CSS, dan ukuran font-nya akan diperbarui menjadi 22px.
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>Pengantar 6
Kita dapat menetapkan lebih dari satu gaya ke sebuah pemilih.
Pada contoh di bawah, gaya font-size dan warna didefinisikan dalam pemilih yang sama.
<style>
.my-component{
font-size:22px;
color:red;
}
</style>Pemilih CSS Bertingkat
Mari kita menganalisis kode HTML di bawah ini.
Sebuah elemen paragraf telah didefinisikan, dan elemen span yang berisi konten 'Hello CSS Selectors' telah ditambahkan ke elemen tersebut.
Dalam kasus ini, kita dapat mengatakan bahwa elemen paragraf adalah induk dari span.
Di sisi lain, span juga akan menjadi anak dari elemen p.
Sama seperti makhluk hidup, kita akan menggunakan elemen HTML dalam hubungan induk-anak berdasarkan penempatannya di blok kode.
<p>
<span>Hello CSS Selectors</span>
</p>Selector CSS Bertingkat 2
Mari kita kembangkan contoh ini sedikit lagi dan kembali menganalisis hierarki antar elemen.
- Berdasarkan contoh di bawah
- Elemen <span> dan <a> adalah saudara satu sama lain.
- Elemen <span> dan <a> merupakan turunan dari elemen div.
- <span> dan <a> adalah anak dari elemen <p>.
- Elemen <p> adalah anak dari elemen <div>.
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>model pohon analisis
Mari kita melihat lebih dekat gambar di atas.
Contoh kode HTML berikut telah diubah menjadi model pohon.
Perhatikan bahwa model pohon sebenarnya merupakan cerminan hierarki induk-anak.
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
Jadi, kapan kita menggunakan hubungan hierarkis ini?
Jadi, kapan kita menggunakan hubungan hierarkis ini?
Mari kita membuat contoh dan mengemukakan masalah terlebih dahulu. Kemudian kita akan melihat cara memberikan solusi menggunakan hierarki ini.
Mari kita melihat contoh kode di bawah ini.
Misalkan kita ingin mewarnai semua teks menjadi merah. Dalam kasus ini, sejauh ini kita telah mempelajari dua penggunaan yang berbeda.
- Pertama dan yang paling buruk, kita akan mendefinisikan atribut style (style = "color: red") secara sebaris pada setiap elemen.
- Kedua, kita akan mendefinisikan class bernama red-txt dan menetapkannya sebagai atribut pada setiap elemen (class = "red-txt").
Namun, ada cara yang lebih mudah untuk melakukannya. 🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>Lalu, kapan kita menggunakan hubungan hierarkis ini? 2
Mari kita lihat kembali kode di atas.
Jika kita memperhatikan elemen div dengan class bernama root, kita melihat bahwa elemen tersebut sebenarnya adalah leluhur dari semua elemen dalam contoh kita.
Sifat genetik pada manusia diwariskan dari leluhur kepada keturunannya. Style yang ditetapkan pada leluhur dalam CSS juga tercermin pada keturunannya.
Dalam kasus ini, ketika kita membuat definisi style yang memilih elemen div terkait, kita dapat mengharapkan semua turunannya terpengaruh oleh penetapan ini.
Mari kita lakukan.
Lalu, kapan kita menggunakan hubungan hierarkis ini? 3
Mari kita definisikan class bernama root dengan bantuan operator titik dan membuat definisi style (dengan color: red) di dalamnya.
Ini akan memilih semua elemen yang memiliki class root dan membuat warna teksnya serta warna teks turunannya menjadi merah.
Saat melihat bagian Pratinjau, kita akan melihat bahwa semua teks berubah menjadi merah.
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>Pewarisan
Dalam CSS, konsep ini disebut Pewarisan. Kita telah mempelajari cara menulis kode yang lebih singkat dengan fitur ini.
Seperti pada contoh sebelumnya, alih-alih mendefinisikan properti yang sama untuk setiap elemen satu per satu, kita mendefinisikan properti tersebut pada elemen leluhur dan mencegah pengulangan kode.
Penempatan Elemen Head
Pada contoh sebelumnya, kita menambahkan elemen style tepat di sebelah elemen HTML yang kita tulis.
Namun, area yang benar untuk menyisipkan tag style adalah di antara tag head.
Penggunaannya akan lebih tepat seperti berikut.
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>menulis kode kita sesingkat dan se-reusable mungkin
Saat menulis kode, kita perlu menulis kode kita sesingkat mungkin dan dapat digunakan kembali.
Selamat
Selamat 🎉
Pada bagian ini, kita telah mempelajari konsep Selector dan Pewarisan.
Pada bagian berikutnya, kita akan mempelajari jenis-jenis definisi style dalam CSS.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pengenalan CSS” gratis?
Ya — teks lengkap “Pengenalan CSS” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML for Kids, upgrade ke CoddyKit PRO. Kursus HTML for Kids mencakup 1 pelajaran total.
Apa yang akan aku pelajari di “Pengenalan CSS”?
Pengenalan CSS Kamu berlatih HTML for Kids dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML for Kids?
Tidak diperlukan pengalaman sebelumnya. HTML for Kids di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 1.
Berapa lama pelajaran “Pengenalan CSS” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML for Kids ini?
Ya. Setiap pelajaran HTML for Kids menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.