Bagaimana Kita Mendefinisikan Gaya?
Bagaimana Kita Mendefinisikan Gaya?
Bagaimana Kita Mendefinisikan Gaya? 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
Halo,
Kita telah menjelaskannya secara singkat pada pelajaran sebelumnya. Sekarang mari kita mengulanginya.
Gaya dapat didefinisikan dalam 3 cara di CSS,
- Gaya Sebaris
- Di antara tag <style>.
- Menggunakan file CSS eksternal
Gaya Sebaris
1. Gaya Sebaris
Seperti yang dapat kita pahami dari namanya, istilah ini merujuk pada gaya yang kita definisikan dengan memberikan atribut style kepada setiap elemen secara sebaris.
Penggunaan ini tidak disarankan karena mengurangi penggunaan kembali setiap gaya dan keterbacaannya sangat rendah.
Pada contoh di bawah, gaya letter-spacing memberikan jarak 15px di antara setiap huruf dalam teks.
<p style="letter-spacing:15px">
Inline Style
</p>dengan tag style
2. Di antara tag <style>.
Gaya dapat didefinisikan di antara tag style. Definisi ini juga tidak disarankan, kecuali untuk beberapa pengecualian (misalnya area konten yang terlihat sebelum menggulir halaman).
Kita akan terus menggunakan tag style agar contoh-contoh kita tetap teratur. Namun, saya tidak menyarankan penggunaannya dalam aplikasi Anda (kecuali pada kasus khusus yang telah saya sebutkan).
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>File CSS Eksternal
3. File CSS Eksternal
Sekarang mari kita mempelajari cara menggunakan file CSS eksternal.
Inilah definisi gaya yang paling sering kita gunakan. Pertama-tama, dibuat sebuah file yang hanya berisi pemilih CSS.
Kemudian, file CSS terkait dapat didefinisikan untuk elemen tautan di antara tag head.
Pada contoh di bawah, file style.css ditetapkan ke elemen tautan melalui atribut href.
<link rel = "stylesheet" href = "styles.css">
Fitur ini merupakan solusi terbaik agar file CSS yang sama dapat dipanggil oleh banyak file dan meningkatkan penggunaan kembali.
Pada contoh di bawah, telah dibuat definisi gaya yang memilih class eksternal.
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
Pada contoh di bawah, telah dibuat definisi gaya yang memilih class eksternal.
Mari kita simpan pernyataan ini dalam file bernama test 1.css dan menetapkannya ke elemen tautan.
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>Selamat
Selamat 🎉
Pada bagian ini, kita telah mempelajari jenis-jenis definisi style dalam CSS.
Pada bagian berikutnya, kita akan mempelajari Selector id.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Bagaimana Kita Mendefinisikan Gaya?” gratis?
Ya — teks lengkap “Bagaimana Kita Mendefinisikan Gaya?” 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 “Bagaimana Kita Mendefinisikan Gaya?”?
Bagaimana Kita Mendefinisikan Gaya? 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 “Bagaimana Kita Mendefinisikan Gaya?” 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.