Memahami Cascading dan Specificity

Cascading pada CSS adalah, multiple rule dapat di apply pada satu element. Sementara specificity adalah cara CSS menyelesaikan conflict dari multiple rule tersebut dengan menggunakan urutan prioritas. Berikut urutan prioritas selector: inline style #id selector .class, :pseudo-class dan [attribute] <Tag> dan ::pseudo-element selector Urutan prioritas dapat dilihat dari chrome developer tools (shortcut Ctrl + Shift … Read more

Sharing is caring:

CSS Selector

Sintaks CSS erat dengan penggunaan CSS Selector. Berikut beberapa CSS selector yang umum digunakan. Element Selector Pada modul sebelumnya sudah digunakan untuk element <section>. Element selector adalah cara kita mengakses element-element HTML seperti <div>, <h1> dan seterusnya. Contoh: Class Selector Kita bisa membuat class tertentu dalam html element, yang kemudian bisa di select melalui CSS … Read more

Sharing is caring:

Menambahkan Style dan Google Font

Melanjutkan dari modul sebelumnya, mari tambahkan styling baru untuk tag H1, yaitu mengubah warnanya menjadi putih. Buka file style.css, lalu edit seperti berikut Jika Anda tidak menentukan font yang digunakan, maka font default dari browser akan digunakan. Jika Anda menggunaka Chrome, bisa dilihat di menu Setting – Appearance – Customize Font. Font pada page HTML … Read more

Sharing is caring:

Cara Menambahkan CSS

Buat file baru, misalnya dengan nama index.html, lalu gunakan HTML berikut untuk kebutuhan tutorial modul ini. Untuk menambahkan CSS ada dua cara, yaitu Inline style, Style Tag dan External CSS. Inline style Contohnya kita akan menambahkan background-color pada element section. Perhatian Inline style kurang disarankan karena sulit untuk di maintenance. Style Tag menggunakan style tag … Read more

Sharing is caring: