Properti CSS yang Paling Sering Digunakan
Properti CSS yang Paling Sering Digunakan
Properti CSS yang Paling Sering Digunakan 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,
Dalam bagian ini, kita akan mempelajari properti CSS yang paling umum.
Sampai sekarang, kita biasanya membuat contoh dengan properti sederhana seperti warna dan ukuran font.
Lebar Tinggi
Tinggi - Lebar
Kita akan menggunakan properti width dan height untuk menetapkan nilai lebar dan tinggi elemen.
Ada dua hal yang perlu diperhatikan di sini.
- Kita tidak dapat menetapkan width dan height pada elemen berjenis inline.
- Secara bawaan, properti width-height yang kita tetapkan tidak bergantung pada properti lain seperti margin, padding, dan border. Properti ini hanya digunakan untuk area di dalam elemen.
Kita akan memberikan informasi tambahan tentang pengecualian di atas nanti.
<!DOCTYPE html>
<html>
<head>
<style>
.my-box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="my-box">My Box</div>
</body>
</html>
Lebar Tinggi 2
Pada contoh sebelumnya, kita menetapkan nilai lebar dan tinggi secara statis. Namun, nilai yang dapat ditetapkan tidak terbatas pada angka tetap.
Sekarang mari kita lihat cara menetapkan lebar dengan persentase pada contoh kita.
<style>
.box1 {
height: 200px;
width: 200px;
background-color: #1cac84;
}
.box2 {
height: 200px;
width: 70%;
background-color: powderblue;
}
.box3 {
background-color: #c974af;
}
</style>
<div class="box1">First Box</div>
<div class="box2">Second Box</div>
<div class="box3">This box takes
the auto value for the width and height
properties by default.</div>
Content-box vs Border-box
Properti box-sizing secara bawaan menggunakan nilai content-box.
Secara bawaan, nilai lebar dan tinggi digunakan sebagai acuan konten.
Nilai border dan padding ditambahkan di atas nilai lebar dan tinggi.
Misalkan lebar sebuah kotak adalah 100px.
Ketika kita menambahkan padding sebesar 10px dan properti border sebesar 20px pada kotak ini, lebar total elemen akan menjadi 100px + 10px + 20px = 130px.
Lebar Maksimum
Dengan properti max-width, kita dapat menetapkan lebar maksimum yang dapat dimiliki sebuah elemen.
Pada contoh di bawah ini, karena nilai max-width ditetapkan sebesar 100px, meskipun nilai bawaan width adalah auto (elemen harus memenuhi 100% induknya), elemen tersebut menempati 100px dan kontennya keluar dari kotak.
<style>
.box {
height: 200px;
max-width: 100px;
background-color: #1cac84;
}
</style>
<div class="box">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>
Dekorasi Teks
Kita dapat mendefinisikan dekorasi untuk teks dengan properti text-decoration.
Saya rasa akan lebih masuk akal jika kita mengamati properti ini melalui contoh. Lihat hasil kode contoh kita pada pratinjau.
<style>
.head1 {
text-decoration: overline;
}
.head2 {
text-decoration: line-through;
}
.head3 {
text-decoration: underline;
}
.head4 {
text-decoration: underline overline;
}
</style>
<h1 class="head1">
Text-decoration is overline
</h1>
<h1 class="head2">
Text-decoration is line-through
</h1>
<h1 class="head3">
Text-decoration is underline
</h1>
<h1 class="head4">
Text-decoration is both underline
and overline
</h1>Indentasi Teks
Kita mungkin ingin menambahkan spasi di awal teks. Untuk itu, kita menggunakan properti text-indent.
<style>
.indent-txt{
text-indent: 20px;
}
</style>
<p class="indent-txt">Lorem ipsum dolor
sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat
</p>Perataan Teks
Kita mengatur posisi horizontal teks dengan properti text-align.
Mari kita definisikan contoh HTML.
<style>
.h1-center {
text-align: center;
}
.h1-left {
text-align: left;
}
.h1-right {
text-align: right;
}
</style>
<h1 class="h1-center">
Lorem ipsum (center)
</h1>
<h1 class="h1-left">
Lorem ipsum (left)
</h1>
<h1 class="h1-right">
Lorem ipsum (right)
</h1>Jenis Font
Kita mendefinisikan gaya font-family untuk menggunakan jenis font yang diinginkan pada teks.
Ada beberapa hal penting yang perlu kita ketahui.
- Font yang telah saya definisikan harus terdaftar di sistem pengguna kita. Untuk itu, kita perlu menggunakan salah satu font yang disebut font yang aman untuk web.
- Jika kita akan menggunakan font khusus, kita perlu menambahkan font yang akan digunakan sebagai dependensi pihak ketiga di antara tag head. Saat menambahkan font-family, kita harus menentukan preferensi font-family utama dan sekunder.
- Jika peramban tidak dapat menemukan preferensi utama di sistemnya, peramban akan menampilkan preferensi sekunder kepada pengguna.
font-family 2
Pada contoh di bawah, jenis font Times New Roman ditetapkan untuk class utama.
Font Times dan serif masing-masing ditetapkan sebagai pilihan sekunder dan tersier.
Browser pertama-tama mencoba menggunakan jenis font Times New Roman; jika jenis ini tidak ditemukan di sistem, preferensi kita yang lain akan digunakan.
Jika font yang kita tetapkan tidak tersedia, browser akan menggunakan font bawaan.
<style>
.header {
font-family: "Times New Roman", Times, serif;
}
</style>
<h1 class="header">
Hello Font Family
</h1>font-style
Sesuai namanya, properti ini menentukan gaya font untuk teks yang kita gunakan.
Sekarang mari kita lihat properti font-style dengan sebuah contoh.
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
<p class="normal">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum
dolor sit amet. consectetur
adipiscing elit
</p>Selamat
Selamat 🎉
Pada bagian ini, kita telah mempelajari properti CSS yang paling sering digunakan.
Pada bagian berikutnya, kita akan mempelajari Margin CSS.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Properti CSS yang Paling Sering Digunakan” gratis?
Ya — teks lengkap “Properti CSS yang Paling Sering Digunakan” 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 “Properti CSS yang Paling Sering Digunakan”?
Properti CSS yang Paling Sering Digunakan 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 “Properti CSS yang Paling Sering Digunakan” 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.