CSS Inline

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

Inline CSS adalah cara untuk menambahkan gaya CSS langsung ke elemen HTML menggunakan atribut style. Pendekatan ini memungkinkan kamu menerapkan gaya khusus pada setiap elemen tanpa perlu menggunakan stylesheet eksternal atau internal. Gaya inline berguna untuk membuat perubahan gaya yang cepat dan spesifik pada satu elemen.

Berikut sintaks dasar untuk menggunakan CSS inline:

<element style="property: value;"></element>

<element>: Elemen HTML yang ingin kamu beri gaya.
style: Atribut yang berisi deklarasi CSS.

property: Properti CSS yang ingin kamu atur (misalnya, color, font-size).
value: Nilai yang ingin kamu tetapkan untuk properti tersebut (misalnya, blue, 16px).

Contohnya:

<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>

Dalam contoh ini, elemen paragraf memiliki gaya inline yang mengatur warna teks menjadi biru dan ukuran font menjadi 16 piksel. Gaya ini hanya akan diterapkan pada elemen paragraf ini.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan elemen paragraf. Gunakan CSS inline untuk memberi gaya pada paragraf dengan properti berikut:

Atur warna teks menjadi merah.
Atur ukuran font menjadi 18 piksel.

Lihat contoh di pelajaran sebagai panduan!

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS</title>
</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 CSS Komentar 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 InlineCSS 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