Sintaks CSS

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 2 dari 76.

Dalam CSS, sintaks merujuk pada sekumpulan aturan yang menentukan cara menulis kode CSS. Memahami sintaks CSS penting untuk membuat stylesheet yang terstruktur dengan baik dan berfungsi. Aturan CSS dasar terdiri dari selector dan blok deklarasi.

Berikut uraian sederhana:

Pemilih: Menentukan elemen HTML yang ingin kamu beri gaya (misalnya, p, div, img).
Blok Deklarasi: Berisi satu atau beberapa deklarasi yang diapit kurung kurawal {}.

Deklarasi: Terdiri dari property dan nilai, dipisahkan oleh titik dua :(misalnya color:green;). Setiap deklarasi harus diakhiri dengan titik koma (;).

Property: Atribut style yang ingin kamu ubah (misalnya, color, font-size).
Value: Nilai yang ingin kamu tetapkan untuk property tersebut (misalnya, blue, 16px).

Contohnya:

p {
    color: blue;
    font-size: 16px;
}

Dalam contoh ini, p adalah selektor yang menargetkan semua elemen paragraf. Blok deklarasi berisi dua deklarasi: satu mengatur warna teks menjadi biru dan yang lain mengatur ukuran font menjadi 16 piksel.

Tantangan

Mudah

Kamu diberi kode HTML dengan elemen paragraf dan aturan CSS untuk paragraf tersebut. Ubah aturan CSS untuk mengubah warna teks menjadi red.

Coba sendiri

<html>
  <head>
    <style>
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph.</p>
  </body>
</html>

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Menata dengan CSS

1Pengantar

Apa itu CSS?Sintaks CSSKomentar CSS Tag Head Tag Title

4Dasar-Dasar Teks

Warna Teks Jenis Font Ukuran Font Ketebalan Font Perataan Teks Dekorasi Teks Tantangan Rangkuman #1 Tantangan Rangkuman #2

7Model Kotak Bagian 1

Apa Itu Model Kotak?Padding Margin Border Lebar dan Tinggi Tantangan Ulasan

10Formulir Login

Bagian isi Wadah formulir

input

Tombol

13Halaman Web Tonga

Menu Navigasi Header Sambutan

2Menambahkan CSS

CSS Inline CSS Internal CSS Eksternal Tantangan Penataan Gaya Dasar

5Warna dan Latar Belakang

Warna Latar Belakang Warna HEX Warna RGB Transparansi dengan RGBA Tantangan Rangkuman #1

8Model Kotak Bagian 2

Ukuran Kotak Radius Sudut Luapan Bayangan Kotak Tantangan Mengulas

11Teknik Tata Letak

Elemen block vs inline Dasar Penempatan Penempatan Relatif Penempatan Absolut Penempatan Tetap Dasar Z-Index Tantangan Kilas Balik

14Tantangan Akhir

Susun Item Daftar Film Kartu Undangan Pernikahan Notifikasi Mengambang

Latihan sendiri: Playground Web