CSS terdiri dari aturan style yang diinterpretasikan oleh browser dan kemudian diterapkan sesuai elemen dalam dokumen Anda. Aturan syle terbuat dari tiga bagian −
- Selector − Adalah style tag HTML yang akan diterapkan. Ini dapat dijumpain pada setiap tag seperti <h1> atau <table>dll.
- Property - Adalah atribut dari HTML tag. Sederhananya, semua atribut HTML dikonversi ke CSS property. Mereka bisa menjadi warna, border, dll.
- Value - Value yang ditugaskan ke properti. Sebagai contoh, warna properti dapat memiliki nilai berwarna merah atau #F1F1F1 etc.
Anda dapat menempatkan style CSS dengan aturan sintaks sebagai berikut −
selector { property: value }
Contoh: Anda dapat menetapkan batas tabel sebagai berikut −
table{ border :1px solid #C00; }
Berikut tabel merupakan selector dan border adalah properti dan diberikan nilai 1px solid #C00 adalah nilai property itu.
Jenis Selectors
Ini adalah selector yang sama kita lihat diatas. Sekali lagi, satu lagi contoh untuk memberikan warna untuk semua tingkat 1 judul:
h1 {
color: #36CFFF;
}Selectors Universal
Dari pada memilih elemen jenis tertentu, Selector universal cukup sederhana sesuai nama − setiap jenis elemen
* {
color: #000000;
}
Aturan ini menjadikan isi dari setiap elemen dalam dokumen kamu hitam.
Selectors keturunan / Descendant
Misalnya Anda ingin menerapkan aturan style untuk elemen tertentu hanya ketika itu terletak di dalam elemen tertentu. Seperti yang diberikan dalam contoh berikut, aturan style akan berlaku untuk elemen <em> hanya ketika itu terletak di dalam <ul> tag.
ul em {
color: #000000;
}Kelas Selectors
Anda dapat menentukan aturan style berdasarkan atribut class elemen. Semua elemen yang memiliki kelas yang akan diformat sesuai dengan aturan yang ditetapkan.
.black {
color: #000000;
}
Aturan ini menjadikan konten dalam black untuk setiap elemen dengan kelas atribut diatur ke hitam dalam dokumen kami. Anda dapat membuatnya sedikit lebih khusus. Sebagai contoh:
h1.black {
color: #000000;
}
Aturan ini menjadikan isi black untuk hanya elemen <h1> dengan kelas atribut diatur ke hitam.
Anda dapat menerapkan lebih dari satu kelas selector ke elemen. Perhatikan contoh berikut:
<p class="center bold">
This para will be styled by the classes center and bold.
</p>ID Selectors
Anda dapat menentukan aturan style berdasarkan atribut id dari unsur-unsur. Semua elemen yang memiliki id akan diformat sesuai dengan aturan yang ditetapkan.
#black {
color: #000000;
}
Aturan ini menjadikan konten dalam black untuk setiap elemen dengan atribut id diatur ke hitam dalam dokumen kami. Anda dapat membuatnya sedikit lebih khusus. Misalnya −
h1#black {
color: #000000;
}
Aturan diatas menjadikan isi black untuk elemen <h1> dengan atribut id diatur ke hitam.
Kekuatan sejati dari id selectors adalah ketika mereka sedang digunakan sebagai dasar untuk menurunkan / descendant selectors, misalnya:
#black h2 {
color: #000000;
}
Dalam contoh ini semua tingkat 2 header akan ditampilkan dalam warna hitam ketika judul tersebut dengan tag yang memiliki atribut id yang ditetapkan menjadi hitam.
Child Selectors
Anda telah melihat Selectors keturunan. Ada satu lagi jenis selector, yang sangat mirip dengan descendant namun memiliki fungsi yang berbeda. sebagai contoh berikut
body > p {
color: #000000;
}
Peraturan ini akan membuat semua paragraf menjadi hitam jika langsung unsur anak <body>. Paragraf lain dimasukkan ke dalam unsur-unsur lain seperti <div>atau <td> tidak akan berefek dari peraturan ini.
Atribut Selectors
Anda juga dapat menerapkan style ke elemen HTML dengan atribut tertentu. Di bawah merupaka aturan style yang akan cocok untuk semua elemen-elemen input yang memiliki jenis atribut dengan nilai teks −
input[type = "text"]{
color: #000000;
}
Keuntungan dari metode ini adalah bahwa <input type = "submit" /> elemen tidak terpengaruh, dan warna yang diterapkan hanya untuk bidang teks yang diinginkan.
Berikit beberapa aturan yang diterapkan selektor atribut.
- p [lang] - Memilih semua paragraf elemen dengan atribut lang.
- p [lang = "fr"] - Memilih semua elemen paragraf yang lang atribut memiliki nilai persis "fr".
- p [lang ~ = "fr"] - Memilih semua paragraf elemen atribut lang yang mengandung kata "fr".
- p [lang | = "en"] - Memilih semua paragraf elemen atribut lang yang berisi nilai-nilai yang tepat "en", atau mulai dengan "en-".
Beberapa aturan Style
Anda mungkin perlu untuk menentukan beberapa gaya aturan untuk satu elemen. Anda dapat menentukan aturan-aturan ini untuk menggabungkan beberapa properti dan nilai-nilai yang sesuai ke dalam satu blok sebagaimana didefinisikan dalam −contoh berikut
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Di sini semua pasangan properti dan nilai yang dipisahkan dengan titik koma (;). Anda dapat menyimpan mereka dalam satu baris atau beberapa baris. Untuk dibaca lebih baik kita menyimpannya ke dalam baris terpisah.
Untuk sementara, tidak peduli tentang sifat-sifat yang disebutkan di atas blok. Properti ini akan dijelaskan dalam bab - bab yang mendatang dan Anda dapat menemukan detail lengkap tentang properti dalam CSS referensi.
Pengelompokan Selectors
Anda dapat menerapkan gaya ke banyak penyeleksi jika Anda suka. Hanya terpisahpenyeleksi dengan tanda koma, seperti yang diberikan dalam − contoh berikut
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Ini mendefinisikan gaya aturan akan berlaku untuk h1, h2 dan h3 elemen juga. Urutan daftar tidak relevan. Semua elemen dalam selektor akan memiliki sesuai Deklarasi diterapkan kepada mereka
Anda dapat menggabungkan penyeleksi id berbagai bersama-sama seperti ditunjukkan di bawah −
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
