HTML for Kids · Pelajaran

Dasar-Dasar CSS

Pengantar penataan gaya dengan CSS (gambaran umum opsional)

Dasar-Dasar CSS adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. 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 4 pelajaran total.

Dasar-Dasar CSS: Pengantar Penataan dengan CSS

Selamat datang di dunia CSS! Hari ini, kita akan mempelajari cara menggunakan Cascading Style Sheets (CSS) untuk menata halaman web dan membuatnya tampak menakjubkan.

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets. CSS merupakan bahasa yang digunakan untuk mengatur tampilan dan nuansa halaman web Anda.

Dengan CSS, Anda dapat mengubah warna, font, tata letak, dan banyak hal lainnya!

Cara Kerja CSS

CSS bekerja dengan memilih elemen HTML dan menerapkan gaya pada elemen tersebut. Anda dapat menggunakan CSS dengan tiga cara:

Sebaris: Tambahkan gaya langsung di dalam elemen HTML.
Internal: Tambahkan gaya di dalam tag <style> pada <head>.
Eksternal: Gunakan file CSS terpisah.

Dalam pelajaran ini, kita akan berfokus pada gaya internal dan eksternal.

CSS Internal

CSS internal ditulis di dalam tag <style> pada <head> dokumen HTML Anda.

Contoh:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
      h1 {
        color: navy;
      }
      p {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to CSS</h1>
    <p>This page has styles applied using internal CSS.</p>
  </body>
</html>

CSS Eksternal

CSS eksternal ditulis dalam file terpisah dengan ekstensi .css. Anda menautkannya ke dokumen HTML menggunakan tag <link>.

Contoh:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Welcome to External CSS</h1>
    <p>This page uses an external CSS file for styling.</p>
  </body>
</html>

Selector dalam CSS

Selector digunakan untuk menargetkan elemen HTML tertentu agar ditata. Selector yang umum meliputi:

Selector Tag: Menargetkan semua elemen dengan tag tertentu. Contoh: p.
Selector Class: Menargetkan elemen dengan class tertentu. Contoh: .myClass.
Selector ID: Menargetkan elemen dengan ID tertentu. Contoh: #myID.

Mari kita lihat cara menggunakannya!

Selector Class dan ID

Gunakan class ketika Anda ingin menata beberapa elemen. Gunakan ID untuk satu elemen yang unik.

Contoh:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .highlight {
        color: red;
        font-weight: bold;
      }
      #unique {
        color: blue;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <p class="highlight">This is highlighted text.</p>
    <p id="unique">This text is unique.</p>
  </body>
</html>

Coba Sendiri

Mari kita membuat halaman web menggunakan CSS internal. Berikut contoh untuk memulai:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lavender;
        font-family: Arial, sans-serif;
      }
      h1 {
        text-align: center;
        color: darkmagenta;
      }
      p {
        color: gray;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Styled Page</h1>
    <p>This is an example of using internal CSS to style a page.</p>
  </body>
</html>

Kerja Bagus!

Selamat! Anda telah mempelajari dasar-dasar CSS dan cara menggunakannya untuk menata halaman web. CSS membuat halaman Anda terlihat profesional dan menarik secara visual. Pada pelajaran berikutnya, kita akan mempelajari lebih dalam tentang warna dan latar agar halaman Anda semakin hidup. Bersiaplah untuk menyalurkan kreativitas Anda!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar CSS” gratis?

Ya — teks lengkap “Dasar-Dasar 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 4 pelajaran total.

Apa yang akan aku pelajari di “Dasar-Dasar CSS”?

Pengantar penataan gaya dengan CSS (gambaran umum opsional) 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 2 dari 4.

Berapa lama pelajaran “Dasar-Dasar 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.

Semua pelajaran dalam kursus ini

← Kembali ke HTML for Kids