CSS Sintak Dasar
CSS terdiri dari aturan gaya yang ditafsirkan oleh browser dan kemudian diterapkan ke elemen terkait dalam dokumen Anda. Aturan gaya terbuat dari tiga bagian
Selector Selector adalah tag HTML di mana gaya akan diterapkan. Ini bisa berupa tag apa saja seperti <h1> atau <table> dll.
Properti Properti adalah jenis atribut dari tag HTML. Sederhananya, semua atribut HTML diubah menjadi properti CSS. Mereka bisa menjadi warna , perbatasan dll.
Script HTML Dasar
Nilai Nilai ditetapkan ke properti. Misalnya, properti warna dapat memiliki nilai merah atau #F1F1F1 dll.
Anda dapat menempatkan Sintaks Aturan Gaya CSS sebagai berikut
selector { property: value }
Contoh Anda dapat menentukan batas tabel sebagai berikut
table{ border :1px solid #C00; }
Di sini tabel adalah pemilih dan perbatasan adalah properti dan nilai yang diberikan 1px solid #C00 adalah nilai properti itu.
Anda dapat menentukan penyeleksi dengan berbagai cara sederhana dengan beberapa jenis.
Pemilih Jenis
Ini adalah pemilih yang sama yang telah kita lihat di atas. Sekali lagi, satu contoh lagi untuk memberi warna pada semua heading level 1
h1 {
color: #36CFFF;
}
Selektor Universal
Daripada memilih elemen dari tipe tertentu, pemilih universal cukup cocok dengan nama tipe elemen apa pun
* {
color: #000000;
}
Aturan ini membuat konten setiap elemen dalam dokumen kita menjadi hitam.
Selektor Keturunan
Misalkan Anda ingin menerapkan aturan gaya ke elemen tertentu hanya jika aturan itu terletak di dalam elemen tertentu. Seperti yang diberikan dalam contoh berikut, aturan gaya akan diterapkan ke elemen <em> hanya jika terletak di dalam tag <ul>.
ul em {
color: #000000;
}
Pemilih Kelas
Anda dapat menentukan aturan gaya berdasarkan atribut kelas elemen. Semua elemen yang memiliki kelas itu akan diformat sesuai dengan aturan yang ditentukan.
.black {
color: #000000;
}
Aturan ini membuat konten menjadi hitam untuk setiap elemen dengan atribut kelas disetel ke hitam di dokumen kita. Anda dapat membuatnya sedikit lebih khusus. Misalnya
h1.black {
color: #000000;
}
Aturan ini membuat konten menjadi hitam hanya untuk elemen <h1> dengan atribut kelas disetel ke hitam .
Anda dapat menerapkan lebih dari satu pemilih kelas ke elemen tertentu. Perhatikan contoh berikut
<p class = "center bold">
This para will be styled by the classes center and bold.
</p>
Pemilih ID
Anda dapat menentukan aturan gaya berdasarkan atribut id dari elemen. Semua elemen yang memiliki id itu akan diformat sesuai dengan aturan yang ditentukan.
#black {
color: #000000;
}
Aturan ini membuat konten menjadi hitam untuk setiap elemen dengan atribut id disetel menjadi hitam di dokumen kita. Anda dapat membuatnya sedikit lebih khusus. Misalnya
h1#black {
color: #000000;
}
Aturan ini membuat konten menjadi hitam hanya untuk elemen <h1> dengan atribut id disetel ke black.
Kekuatan sebenarnya dari pemilih id adalah ketika mereka digunakan sebagai dasar untuk pemilih keturunan, Misalnya
#black h2 {
color: #000000;
}
Dalam contoh ini semua heading level 2 akan ditampilkan dalam warna hitam ketika heading tersebut akan berada di dalam tag yang memiliki atribut id disetel ke hitam .
Pemilih Anak
Anda telah melihat pemilih turunan. Ada satu lagi jenis pemilih, yang sangat mirip dengan keturunan tetapi memiliki fungsi yang berbeda. Perhatikan contoh berikut
body > p {
color: #000000;
}
Aturan ini akan membuat semua paragraf menjadi hitam jika mereka adalah anak langsung dari elemen <body>. Paragraf lain yang dimasukkan ke dalam elemen lain seperti <div> atau <td> tidak akan memiliki efek apa pun dari aturan ini.
Pemilih Atribut
Anda juga dapat menerapkan gaya ke elemen HTML dengan atribut tertentu. Aturan gaya di bawah ini akan cocok dengan semua elemen input yang memiliki atribut type dengan nilai teks
input[type = "text"] {
color: #000000;
}
Keuntungan metode ini adalah elemen <input type = "submit" /> tidak terpengaruh, dan warna hanya diterapkan pada bidang teks yang diinginkan.
Ada aturan berikut yang diterapkan pada pemilih atribut.
p[lang] Memilih semua elemen paragraf dengan atribut lang .
p[lang="fr"] Memilih semua elemen paragraf yang atribut langnya memiliki nilai persis "fr".
p[lang~="fr"] Memilih semua elemen paragraf yang atribut langnya berisi kata "fr".
p[lang|="en"] Memilih semua elemen paragraf yang atribut langnya berisi nilai yang persis "en", atau dimulai dengan "en-".
Beberapa Aturan Gaya
Anda mungkin perlu menentukan beberapa aturan gaya untuk satu elemen. Anda dapat menentukan aturan ini untuk menggabungkan beberapa properti dan nilai yang sesuai ke dalam satu blok seperti yang 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 dipisahkan oleh titik koma (;) . Anda dapat menyimpannya dalam satu baris atau beberapa baris. Untuk keterbacaan yang lebih baik, kami menyimpannya di baris terpisah.
Untuk sementara, jangan repot-repot dengan properti yang disebutkan di blok di atas. Properti ini akan dijelaskan di bab selanjutnya dan Anda dapat menemukan detail lengkap tentang properti di Referensi CSS
Pengelompokan Pemilih
Anda dapat menerapkan gaya ke banyak penyeleksi jika Anda mau. Cukup pisahkan pemilih dengan koma, seperti yang diberikan dalam contoh berikut
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Aturan gaya yang ditentukan ini akan berlaku untuk elemen h1, h2 dan h3 juga. Urutan daftar tidak relevan. Semua elemen dalam pemilih akan memiliki deklarasi yang sesuai yang diterapkan padanya.
Anda dapat menggabungkan berbagai pemilih id bersama-sama seperti yang ditunjukkan di bawah ini
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}