Atribut kelas dan id

Atribut CLASS jelas merupakan atribut yang paling umum digunakan dokumen HTML. Namun, Anda tidak boleh menyalahgunakannya. Kehadiran atribut di setiap, atau hampir setiap, elemen dokumen menunjukkan gaya yang buruk. CSS harus disusun dengan hati-hati agar atribut CLASS dalam dokumen sesedikit mungkin. Misalnya, jika sel-sel tabel dokumen harus memiliki beberapa properti yang identik, maka akan lebih logis untuk mengatur properti ini menggunakan pemilih konteks (lihat 5.2), daripada dengan menentukan atribut CLASS untuk setiap sel tabel, dan tentunya tidak dengan mendefinisikan properti ini untuk semua sel di semua tabel.

CSS untuk sel tabel

tabel.tabel-khusus td (

batas: 1 piksel padat #000000;

Dimungkinkan untuk membuat daftar beberapa kelas sebagai nilai untuk atribut CLASS. Semuanya akan diterapkan secara bersamaan, mengikuti aturan prioritas untuk penyeleksi yang dijelaskan di bagian 5.6. Nama kelas harus dipisahkan dengan spasi, seperti terlihat pada contoh berikut:

Menentukan beberapa kelas untuk satu elemen

Hal yang sama berlaku untuk atribut ID, satu-satunya perbedaan adalah bahwa ID tidak dapat diulang berkali-kali dalam sebuah dokumen. Oleh karena itu, atribut ID mengidentifikasi blok atau elemen unik tertentu dari dokumen, misalnya navigasi atas, catatan kaki, blok hak cipta, dll. Atribut ID tidak boleh digunakan jika ditingkatkan menggunakan JavaScript di halaman - ini akan dibuat komplikasi tambahan untuk pemrogram JavaScript.

Elemen dan atribut yang tidak digunakan atau jarang digunakan

DI DALAM bagian ini menggambarkan elemen dan atribut yang penggunaannya harus diminimalkan atau tidak digunakan sama sekali.

elemen FONT

Untuk beberapa waktu sekarang, elemen FONT dianggap tidak dapat diterima untuk digunakan, sebagaimana dikonfirmasi oleh konsorsium W3C. Faktanya adalah elemen FONT bukanlah elemen yang menentukan struktur dokumen, tetapi hanya bertanggung jawab atas gaya tampilan. Karena semua gaya harus dimasukkan ke dalam CSS agar dokumen HTML sebagian besar mencerminkan struktur dokumen dan pada tingkat lebih rendah gayanya, penggunaan elemen FONT menimbulkan kesulitan tambahan saat mengedit dokumen dan mengonversinya ke spesifikasi lain. Oleh karena itu, jangan pernah menggunakan elemen FONT.

elemen SDM

Elemen HR (horizontal rule) dirancang untuk menampilkan pemisah horizontal dalam bentuk garis. Dalam dokumen dengan desain yang ketat, elemen HR praktis tidak digunakan karena tampilannya yang spesifik browser yang berbeda. Cobalah untuk tidak menggunakan elemen ini kecuali benar-benar diperlukan.

elemen PETA

Elemen MAP dirancang untuk menerapkan kisi koordinat pada gambar, sehingga menyorot area gambar yang merupakan hyperlink.

Penggunaan elemen MAP menimbulkan kebingungan yang tidak perlu pada struktur dokumen, sehingga kurang dapat dipahami oleh robot pencari dan juga manusia. Hindari penggunaan elemen ini kecuali benar-benar diperlukan.

elemen BINGKAI

Penggunaan elemen FRAME menyiratkan penggunaan struktur kerangka dokumen, yang untuk itu harus ada persyaratan yang sesuai dari pihak pelanggan. Penggunaan struktur kerangka dokumen memiliki sejumlah kelemahan, termasuk tidak dapat diaksesnya isi beberapa dokumen robot pencari, ketidakmungkinan mengatasi halaman tertentu bingkai, dll. Jangan gunakan bingkai kecuali ditentukan dalam persyaratan.

Atribut SEKARANG

Atribut NOWRAP dimaksudkan untuk menunjukkan bahwa teks dalam suatu elemen tidak boleh dibagi menjadi beberapa baris.

Untuk beberapa waktu sekarang, atribut NOWRAP sangat tidak populer, digantikan oleh properti CSS spasi dengan nilai nowrap. Gunakan atribut NOWRAP untuk browser yang tidak mendukung properti CSS spasi putih. Sebagai aturan, ini sudah terjadi browser yang ketinggalan jaman menyukai Penjelajah Internet 5.0 atau Netscape 4. Dalam kasus XHTML, atribut NOWRAP, seperti atribut lainnya, harus memiliki nilai sesuai dengan aturan XML.

Atribut NOWRAP di XHTML

Atribut ROWSPAN

Atribut ROWSPAN dari elemen TD menentukan berapa banyak baris tabel yang harus digabungkan menjadi satu. Karena pemahaman yang beragam oleh browser, atribut ini menjadikannya sangat tidak populer. Cobalah untuk menghindari penggunaan atribut ini di dokumen Anda. Dengan mengikuti aturan ini, Anda akan lebih yakin bahwa dokumen Anda akan ditampilkan dengan benar di berbagai browser.

Atribut GAYA

Atribut STYLE menentukan gaya CSS untuk elemen dalam dokumen HTML. Seperti dibahas di atas untuk elemen FONT, Anda sebaiknya hanya menggunakan atribut STYLE jika benar-benar diperlukan atau untuk tujuan debugging. Kelebihan dari atribut ini adalah gaya CSS, yang dijelaskan di dalamnya memiliki prioritas tertinggi dibandingkan dengan atribut gaya HTML dan gaya lain untuk elemen ini yang dijelaskan dalam CSS.

Halo, para pembaca situs blog yang budiman. Hari ini kami akan terus mengisi materi kami dengan materi dan mulai membicarakan hal mendasar seperti penyeleksi bahasa CSS.

Ada tujuh jenisnya - tag, kelas, Id, universal, atribut, serta kelas semu dan elemen semu. Agak berlebihan, bukan? Baiklah, mari kita analisis semuanya secara perlahan dan gunakan contoh yang mendetail.

DI DALAM publikasi sebelumnya Kita telah melihat, dan juga mengenal satuan ukuran, seperti dan mempelajari prinsip pewarisan dalam CSS. Nah, hari ini kita, seperti yang saya katakan, membuka bab yang sangat serius dalam studi bahasa markup gaya.

Pemilih tag dan kelas di CSS

Sebelum mempelajari aturan gaya, Anda perlu mempelajari bagaimana dan berdasarkan prinsip apa untuk menyetel tag tersebut sehingga browser akan memahami elemen kode Html mana yang perlu diterapkan. Selectornya berbeda. Yang paling sederhana, dari sudut pandang pemahaman, menggunakan nama tag, yang mana aturan bahasa CSS yang ditulis setelahnya harus diterapkan.

DI DALAM dalam contoh ini Semua tag paragraf P akan menggunakan warna font merah dan warna isian latar belakang abu-abu. Aturan CSS apa pun dapat menentukan beberapa pemilih sekaligus. Bagaimana cara membacanya? Selalu dari kanan ke kiri, yaitu mulailah dengan yang paling dekat dengan kurung kurawal pembuka.

Pada contoh di atas, baris pertama menunjukkan pemilih tag (elemen) yang memaksa warna font menjadi merah untuk semua wadah Div.

Isi wadah Div biasa

Pada baris kedua kita melihat contoh pemilih kompleks yang memiliki yang berikut ini elemen baru, Bagaimana kelas. Itu terdaftar sebagai . Kita dapat menggunakan nama sembarang sebagai nilai kelas dengan menggunakan simbol ,,,[_],[-].

Namun selain kelas, bahasa markup gaya juga menggunakan Id. Apa perbedaan antara kelas dan Id? Nilai yang terakhir ini harus unik, karena Id adalah pengidentifikasi unik untuk tag Html dan nama (nilai) hanya dapat digunakan satu kali dalam kode.

Dan nilai untuk class tidak unik dan dapat digunakan untuk apa saja jumlah besar elemen dalam kode. Itu. tag yang berbeda(Div, P, H1, dll.) dapat memiliki nilai yang sama untuk atribut kelasnya:

Bagaimana cara menggunakannya di pemilih CSS? Ternyata namanya tertulis dengan titik di depannya.

Oleh karena itu, ketika kita melihat sesuatu yang diawali dengan titik pada kode CSS, kita langsung memahaminya yang sedang kita bicarakan tentang kelas. Jika kita melihat contoh yang diberikan pada screenshot, nah pada semua elemen kode Html yang bertuliskan “class” dengan nilai “Blue”, teksnya akan berwarna biru.

Namun hal ini tidak akan terjadi sama sekali karena kami memilih nama kelas “Biru”. Kita bisa menyebutnya apa saja (bahkan “xyz”), dan warna dalam contoh kita diatur persis seperti yang ditetapkan untuk pemilih dengan kelas ini. Saya harap ini jelas? Mari kita ubah nama (nilai) kelas pada contoh:

Paragraf dengan teks

Paragraf dengan teks

Itu. Sekarang kita memiliki kelas XYZ dan aturan yang ditulis untuknya:

Xyz (warna: biru)

Warnai teks paragraf dengan warna biru. Contoh ini sekali lagi menekankan hal itu nama untuk atribut kelas Anda dapat menggunakan apa saja. Namun, mari kita lanjutkan.

Mari kita lihat lagi contoh bagaimana pemilih tag dan kelas digunakan dalam CSS. Bayangkan kita mempunyai aturan gaya berikut:

Div (warna:merah) div.a123 (warna:hijau) .xyz (warna:biru)

Bayangkan juga bahwa dalam kode Html kita memiliki elemen berikut:

Sesuai dengan aturan yang ditentukan untuk penyeleksi yang ditentukan, konten elemen kode Html yang diberikan akan terlihat seperti ini:

Sekarang mari kita lihat mengapa browser menafsirkan gaya elemen kode HTML ini dengan cara ini. Untuk wadah Div pertama, yang tidak menentukan kelasnya, aturan CSS yang berlaku untuk semua wadah akan berlaku: div (warna: merah). Akibatnya isinya akan berwarna merah. Itu yang perlu ditunjukkan.

Dalam tag Div kedua kita memiliki kelas “a123”. Dalam hal ini, aturan CSS yang terkait dengan “div.a123” akan diterapkan (karena kita hanya memiliki tag Div dengan atribut class="a123" yang tertulis di dalamnya). Oleh karena itu isi wadah kedua akan diwarnai hijau.

Namun Anda mungkin memperhatikan bahwa Anda juga dapat menerapkannya pada Div kedua CSS pertama aturan “div (warna:merah)”, karena ditujukan untuk semua container tanpa kecuali. Hal ini mengakibatkan kontradiksi yang terselesaikan cara CSS memasuki sebuah konsep.

Kita akan membicarakan hal ini secara rinci nanti, tapi untuk saat ini saya hanya akan mengatakan bahwa prioritas "div.a123" (untuk Div ​​kedua dalam contoh yang dipertimbangkan) akan lebih tinggi.

Omong-omong, situasi serupa muncul dengan Div ketiga dari contoh kita. Ada dua opsi untuk itu: pemilih tag “div” dan pemilih kelas “.xyz”. Sekali lagi, karena alasan yang belum saya jelaskan (baca tentang ini di link tepat di atas), prioritas yang terakhir akan lebih tinggi, sehingga isi wadah ketiga akan berwarna biru.

Mari kita lanjutkan. Pada contoh di atas, kita memiliki tag paragraf P, yang berisi class="a123". Ternyata itu elemen ini tidak termasuk dalam salah satu dari tiga pemilih yang kami tentukan (ketiganya melewatkannya).

Hanya ada perpotongan dengan opsi kedua, namun pemilih ini hanya akan digunakan untuk tag "Div" dengan kelas "a123", dan bukan untuk tag paragraf P. Akibatnya, warna teks pada paragraf ini akan tetap default , yaitu hitam.

Berikutnya dalam contoh kita memiliki elemen paragraf dengan class = "xyz". Aturan CSS terakhir “.xyz (warna:biru)” akan diterapkan padanya. Oleh karena itu, teks paragraf ini akan berwarna biru. Di sini, menurut saya, semuanya sudah jelas.

Pemilih universal dan ID unik

Sekarang mari kita beralih ke Id yang telah saya sebutkan. Ketika kita melihat sesuatu dalam kode CSS hash di depan, maka ini berarti kita berhadapan dengan Id:

Biasanya pemilih ini ditulis tanpa menyebutkan tagnya, yang merujuknya (pilihan pertama dalam contoh yang diberikan tepat di atas), meskipun ejaan kedua juga dapat diterima, tetapi jarang digunakan. Hal ini dikarenakan nilai atribut Id pada kode akan bersifat unik, artinya tidak boleh ada dua elemen dengan nilai Id yang sama. Itu. tidak ada gunanya mengklarifikasi, meskipun hal ini tidak dilarang.

Oleh karena itu, mereka biasanya hanya menulis hash (hash), diikuti langsung dengan nilai (nama) atribut Id. Mari kita asumsikan bahwa kita memiliki aturan berikut untuk Id:

#kembali (warna: merah)

dan kodenya berisi fragmen berikut:

yang, sebagai akibat dari penerapan aturan setelah “#back”, akan ditafsirkan oleh browser sebagai berikut:

Wadah div dengan ID unik

CSS juga menyediakan pemilih universal yang ditandai dengan tanda bintang, yang menunjukkan hal itu aturan ini akan berlaku secara umum untuk elemen apa pun dalam kode:

* (warna: hitam)

Dalam hal ini, teks yang diapit tag apa pun akan berwarna hitam (warna default). Jelas bahwa semua penyeleksi lainnya (tag, kelas, dan Id) akan memiliki prioritas lebih tinggi daripada penyeleksi universal.

Pemilih atribut dan masa depannya dalam CSS modern

Semua opsi yang dijelaskan di atas (tag, kelas, Id, dan universal) akan berfungsi di semua browser. Namun ada opsi lain yang tidak berfungsi di semua tempat.

Jenis ini mencakup penyeleksi atribut, yang sangat nyaman dan memungkinkan Anda memperluas secara signifikan dan pada saat yang sama menyederhanakan kemungkinan pengaruh yang ditargetkan, tetapi sayangnya, tidak sepenuhnya didukung oleh semua browser.

Seperti yang mungkin Anda ingat, di bahasa HTML di dalam tag kita dapat menggunakan berbagai atribut yang memungkinkan kita memberikan properti tertentu pada konten elemen itu sendiri. Oleh karena itu, logis untuk menggunakan tidak hanya nama tag, tetapi juga nama atribut sebagai penyeleksi dalam bahasa CSS.

Sebenarnya, kita sudah melakukan ini ketika kita melihat kelas dan Id, karena pada dasarnya mereka adalah atribut dari beberapa tag. Hanya ID dan Kelas yang sangat nilai yang besar dalam tata letak dan mereka dibawa ke kelompok terpisah, masing-masing dengan sintaksisnya sendiri.

Bagaimana cara menggunakan penyeleksi lain yang ada dalam bahasa tersebut? Atribut HTML(bukan Id dan bukan kelas)? Cukup sederhana - masukkan mereka ke dalam tanda kurung siku :

(warna: hijau)

Sekarang setiap tag dalam kode Html yang memiliki tulisan "judul" di dalamnya akan memiliki warna teks hijau.

Sangat nyaman menurut saya. Tapi masalah keseluruhan dengan menggunakan penyeleksi atribut adalah itu mereka tidak berfungsi di IE 6 dan di bawahnya secara umum atau berhasil, namun hanya sebagian. Hingga pangsa pengguna yang mengakses Internet menggunakan IE 6 adalah nol cara yang nyaman, kemungkinan besar, tidak akan banyak digunakan dalam tata letak. Namun demikian, Anda perlu mengetahui keberadaannya dan dapat menggunakannya.

Seperti yang Anda lihat dari contoh, tidak masalah apakah atribut yang ditentukan dalam pemilih memiliki nilai atau kosong. Tapi bukan itu saja yang bisa Anda lakukan, karena itu hanya sebuah lagu.

Anda dapat menunjukkannya tidak hanya nama atributnya, tetapi juga maknanya:

(warna: hijau)

Akibatnya, aturan CSS yang ditentukan untuk pemilih tersebut hanya akan diterapkan pada tag yang memiliki "judul" dengan nilai "Paragraf Pertama" (dalam contoh kita ini akan menjadi baris kedua):

Contoh yang dijelaskan adalah persamaan yang ketat, tetapi Anda dapat menulis pemilih ini seperti ini:

(warna: hijau)

Itu. Aturan CSS ini hanya akan berlaku untuk elemen kode Html yang “judulnya” mengandung kata “paragraf” (dalam contoh kita ini adalah baris kedua dan ketiga):

Sintaks pemilih atribut menafsirkan «~=» sebagai “seluruh kata terkandung.” Misalnya, untuk elemen dengan title="Paragraf kedua" CSS правило «color:green» уже применяться не будет.!}

Tapi Anda bisa menaruhnya sebagai gantinya «*=» dan kemudian tidak hanya akan diperhitungkan kata-kata individu ditentukan dalam pemilih, tetapi juga bagian kata (setiap bagian teks yang terdapat di mana pun dalam atribut):

(warna: hijau)

Dalam hal ini, dan untuk elemen dengan title="Paragraf kedua" сработает правило «color:green» и его текст подкрасится !} hijau. Semoga ini jelas. Ada juga operator seperti «^=» (semua yang dimulai dengan nilai yang ditentukan dalam tanda kurung), yang membantu membuat pemilih atribut seperti ini:

(warna: merah)

Anda mungkin ingat bahwa atribut untuk menentukan . Jadi tak jarang internal link pada sebuah website dibuat relatif, namun external link tidak bisa dibuat dengan cara lain selain menjadikannya absolut.

Oleh karena itu, semuanya tautan eksternal akan dimulai dengan "http", dan yang internal dapat ditentukan dalam bentuk relatif tanpa menggunakan "http". Itu. Pemilih yang ditentukan dalam contoh kita akan mengizinkan warnai semua tautan eksternal di situs(semua mutlak) berwarna merah. Ya, warna relatif yang tidak mengandung "http" akan tetap menjadi warna yang diadopsi secara default. Menurutku itu bagus!!!

Seperti yang Anda lihat, penyeleksi atribut memberi kita banyak kemungkinan dan fakta bahwa mereka belum digunakan secara luas adalah manfaat dari perusahaan Melkosoft yang sangat miskin dan tersinggung, dan khususnya gagasan mereka IE 6. Namun sedikit demi sedikit mereka mulai untuk digunakan dalam CSS dan segera, tentu saja, mereka akan mulai menerapkannya.

Ya, ada operator lain «$=» - segala sesuatu yang diakhiri dengan nilai yang ditentukan dalam tanda kutip:

(warna: hijau)

Hasilnya, baris kedua dan ketiga dari contoh pertama kita akan berwarna hijau, karena arti “judul” diakhiri dengan “raf”. Beginilah cara penyeleksi atribut bekerja dengan sangat baik bahasa modern CSS, jika persentase tertentu pengguna yang menggunakan browser IE 6 masih belum ada.

Sebenarnya, dari semua tipe, kita hanya punya dua yang perlu dipertimbangkan: . Namun saya ingin memindahkannya ke artikel berikutnya, di mana kita juga akan membahas berbagai kombinasinya.

Semoga beruntung untukmu! Ke sampai berjumpa lagi di halaman situs blog

Anda dapat menonton lebih banyak video dengan mengunjungi

Anda mungkin tertarik

Penyeleksi kelas semu dan elemen semu dalam CSS (hover, first-child, first-line, dan lainnya), hubungan antara tag HTML kode
Prioritas dalam Css dan peningkatannya karena Penting, kombinasi dan pengelompokan penyeleksi, gaya pengguna dan penulis
Gaya daftar(tipe, gambar, posisi) - Aturan Css untuk penyesuaian penampilan daftar dalam kode HTML
Latar Belakang di CSS (warna, posisi, gambar, ulangi, lampiran) - semuanya untuk mengatur warna latar belakang atau gambar latar belakang elemen HTML
CSS - apa itu, seperti tabel gaya berjenjang terhubung ke kode HTML menggunakan Style dan Link
Unit dimensi (piksel, Em dan Ex) dan aturan pewarisan dalam CSS

Menentukan kelas gaya yang memungkinkan Anda mengaitkan elemen tertentu desain gaya. Dimungkinkan untuk menentukan beberapa kelas dalam suatu nilai sekaligus, memisahkannya dengan spasi.

Sintaksis

kelas="<имя класса>"

Nilai-nilai

Dalam HTML4, nama kelas dapat berisi huruf (A-Z, a-z), angka (0-9), tanda hubung (-) dan garis bawah (_), serta tidak boleh diawali dengan angka. Penggunaan huruf Rusia di kelas tidak dapat diterima. HTML5 menghilangkan batasan ini, tetapi untuk kompatibilitas dengan browser dan JavaScript lama, disarankan untuk mematuhi aturan ini.

Nilai bawaan

Contoh

Lampu neon digunakan untuk penerangan buatan pada ruangan. Mereka dibedakan oleh efisiensi cahaya yang tinggi dan tahan lama kehidupan pelayanan

, kecerahan rendah pada permukaan bercahaya, mendekati komposisi spektral alami dari cahaya yang dipancarkan, yang menjamin penampakan warna yang baik.

Untuk mencegah tampilan layar disinari oleh fluks cahaya, bukaan jendela dilengkapi dengan tirai penyebar cahaya.

Spesifikasi

• Setiap spesifikasi melewati beberapa tahap persetujuan.
• Rekomendasi - Spesifikasi telah disetujui oleh W3C dan direkomendasikan sebagai standar. Rekomendasi Kandidat ( Rekomendasi yang mungkin
• ) - kelompok yang bertanggung jawab atas standar tersebut merasa yakin bahwa standar tersebut telah mencapai tujuannya, namun memerlukan bantuan dari komunitas pengembang untuk menerapkan standar tersebut. Usulan Rekomendasi Rekomendasi yang Disarankan
• Draf Kerja - Versi draf yang lebih matang yang telah dibahas dan diubah untuk ditinjau oleh komunitas.
• Draf redaksi ( Draf editorial) - versi draf standar setelah perubahan dilakukan oleh editor proyek.
• Draf ( Spesifikasi rancangan) - versi draf pertama dari standar.

Standar HTML yang hidup (Living) menonjol - tidak mengikuti penomoran versi tradisional, karena terus dikembangkan dan diperbarui secara berkala.

Peramban

Notasi berikut digunakan dalam tabel browser.

Setiap elemen HTML dapat memiliki atribut pengenal. Hal ini dimaksudkan untuk mengidentifikasi tag tertentu. Seharusnya hanya ada satu tag dengan nilai atribut tertentu di seluruh halaman HTML pengenal. Kehadiran beberapa elemen dengan nilai yang sama pengenal tidak diperbolehkan dan dapat mengakibatkan kesalahan. Nilai atribut pengenal dapat terdiri dari huruf alfabet Latin, angka, garis bawah, dan tanda hubung. Selain itu, nilai atribut dapat dimulai dengan huruf latin atau dari garis bawah (tetapi bukan dari angka atau karakter lain). Selain itu, nilai atribut pengenal peka huruf besar-kecil. Atribut pengenal disebut global karena dapat digunakan dengan elemen HTML apa pun.
Di CSS, pemilih id berisi simbol (#) , segera diikuti dengan nilai atribut pengenal. Misalnya, pemilih id berikut cocok dengan elemennya

, nilai atribut pengenal yang sama dengan bab7:

#bab7 (warna latar:#FF00FF;)

Setelah mendeskripsikan pengidentifikasi, itu harus disertakan dalam tag:

Header tingkat kedua dengan id

Contoh: Menggunakan ID

• Cobalah sendiri »

Header tingkat kedua dengan id

Judul tingkat kedua

Judul tingkat kedua

Header tingkat kedua dengan id

Judul tingkat kedua

Judul tingkat kedua

Kelas

Kelas digunakan untuk mengklasifikasikan elemen menurut kelompok umum, jadi berbeda dengan atributnya pengenal, beberapa elemen dapat diberi nama kelas yang umum. Dengan memberi elemen nama kelas yang sama, Anda bisa menerapkan gaya ke semua elemen tersebut sekaligus menggunakan satu aturan gaya. Untuk melakukan ini, Anda harus menggunakan atribut kelas. Nilainya harus menggambarkan kelas mana yang dimiliki elemen tersebut.
Kelas mirip dengan pengidentifikasi, tetapi bukan simbol (#) sebuah titik ditunjukkan sebelum nama kelas (.) :

Setelah menjelaskan kelasnya, Anda harus memasukkannya ke dalam tag pembuka elemen:

Judul tingkat kedua

Contoh: Menerapkan Atribut pengenal Dan kelas

• Cobalah sendiri »

Header tingkat kedua dengan id dan class=test

Header tingkat kedua dengan class=test

Judul tingkat kedua

Judul tingkat kedua dengan class=test oranye