.png)
Untuk kamu yang sedang memulai belajar CSS, berikut ini cheatsheet/panduan untuk mempermudah kamu ketika belajar
link Link Element
Tag pada dokumen HTML digunakan untuk meng-import resources tambahan seperti file CSS yang di dalamnya memiliki properti seperti href, rel, dan type.
- href digunakan sebagai URL lokasi file CSS tersebut
- rel digunakan untuk mendefinisikan hubungan antara HTML dan CSS
- type digunakan untuk mendefinisikan jenis file yang akan diimport
Kegunaan CSS
CSS (Cascading Style Sheets), adalah bahasa yang digunakan dengan mengombinasikan HTML yang menyesuaikan dengan elemen HTML yang ditampilkan. CSS digunakan untuk styling dengan tujuan mempercantik dan menata tampilan website.
Menulis CSS pada File Terpisah
Kode CSS dapat ditulis dalam filenya sendiri untuk memisahkannya dari kode HTML. Ekstensi untuk file CSS adalah .css. Extensi Ini dapat ditautkan ke file HTML menggunakan tag pada bagian
Menulis CSS Dalam File HTML
Kode CSS dapat ditulis pada file HTML dengan menyertakan kode dalam tag style . Kode yang terdapat tag style akan terbaca sebagai sintaks CSS.
Inline Styles
CSS Style dapat langsung ditambahkan ke elemen HTML dengan menggunakan atribut style di tag pembuka elemen. Setiap mendeklarasikan style, maka diakhiri dengan titik koma. Style yang ditambahkan dengan cara ini dikenal sebagai Inline Styles.
Centered text
Blue, 18-point text
Memisahkan kode HTML dari CSS
Memisahkan kode HTML dari CSS merupakan hal yang sering dilakukan. Hal ini memudahkan untuk memlihara sebuah kode dengan menyimpan sintaks untuk setiap file terpisah. Setiap perubahan pada konten maupun styling dapat dilakukan di file masing-masing.
Class and ID Selectors
Class pada CSS dapat digunakan kembali dan diterapkan ke banyak elemen. Class selectors dilambangkan dengan titik . diikuti dengan nama Class. ID Selectors CSS harus bersifat unik dan hanya digunakan untuk menata satu elemen. Selectors ID dilambangkan dengan hastag # diikuti dengan nama id.
/* Selects all elements with class="column" */
.column {
}
/* Selects element with id="first-item" */
#first-item {
}
CSS Selectors Grup
Menyesuaikan/menyocokkan beberapa pilhan dengan aturan CSS yang sama menggunakan comma-separated list. Pada contoh ini, teks untuk h1 dan h2 diatur menjadi warna merah.
h1, h2 {
color: red;
}
Rantai Selector
CSS Selectors menentukan himpunan elemen yang menerapkan kumpulan aturan CSS. Misalnya, untuk memilih semua elemen , selector p dapat digunakan untuk membuat aturan styling.
Selector Berantai
CSS Selector dapat dirantaikan sehingga sekumpulan aturan hanya berlaku untuk elemen yang cocok dengan semua kriteria. Misalnya, untuk memilih elemen yang juga memiliki class section-heading, maka selector h3.section-heading juga dapat digunakan.
/* Select h3 elements with the section-heading class */
h3.section-heading {
color: blue;
}
/* Select elements with the section-heading and button class */
.section-heading.button {
cursor: pointer;
}
Tipe Selector CSS
Selector tipe CSS digunakan untuk mencocokkan semua elemen dari jenis atau nama tag yang diberikan. Tidak seperti sintaks HTML, mereka tidak menyertakan tanda kurung siku saat menggunakan tipe selector untuk nama tag. Saat menggunakan tipe selector, elemen dicocokkan terlepas dari tingkat penumpukannya dalam HTML.
/* Selects all tags */
p {
}
Selector Class CSS
Selector CSS mencocokkan elemen berdasarkan konten atribut class mereka. Untuk memilih elemen yang memiliki calendar-cell sebagai nilai atribut class, a . perlu ditambahkan terlebih dahulu.
.calendar-cell {
color: #fff;
}
Atribut HTML dengan beberapa nilai
Dalam sebuah atribut HTML, dapat memiliki beberapa nilai atribut. Beberapa nilai atribut dipisahkan oleh spasi di antara setiap atribut.
Selector Specificity
Specificity adalah sistem peringkat yang digunakan ketika ada beberapa nilai properti yang conflict yang menunjuk ke elemen yang sama. Saat menentukan aturan mana yang akan diterapkan, maka selector dengan kekhususan tertinggi yang menang. Jenis selector yang paling spesifik adalah selector ID, diikuti oleh selector class, diikuti oleh type selector. Dalam contoh ini, hanya color: blue yang akan diimplementasikan karena memiliki selector ID, sedangkan color: red memiliki type selector.
h1#header {
color: blue;
} /* implemented */
h1 {
color: red;
} /* Not implemented */
CSS ID Selectors
Selector ID CSS mencocokkan elemen berdasarkan konten atribut id mereka. Nilai atribut id harus unik di seluruh DOM. Untuk memilih elemen yang memiliki job-title sebagai nilai atribut id, # perlu ditambahkan.
#job-title {
font-weight: bold;
}CSS descendant selector
Kombinator CSS descendant selector digunakan untuk mencocokkan elemen yang diturunkan dari selector lain yang cocok. Mereka dilambangkan dengan satu spasi antara setiap selector dan descendant selector. Jadi, Semua elemen yang cocok dipilih terlepas dari tingkat bersarang di HTML.
div p {}
section ol li {}
