Cara Mengatur Tampilan Website Dengan CSS
Css (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan halaman html.
Ada 3 cara menggunakan CSS, yaitu secara inline, internal dan eksternal:
- CSS Inline.
Css inline diletakkan langsung di dalam tag html. contohnya :
Setelah menambahkan property “style”, kita dapat meletakkan css di dalamnya.
CSS Inline tidak disarankan untuk digunakan, karena jika ingin mengubah css, maka kita harus mengubah halaman html. Selain itu, css juga tidak dapat digunakan oleh file html lain.
2. CSS Internal.
CSS Internal diletakkan di dalam halaman hmtl, namun terpisah dari tag html.
Css ini diletakkan di dalam tag head.
Tag <style/></style> digunakan untuk membungkus code css didalamnya.
3. CSS Eksternal.
Css diletakkan dalam satu file khusus dengan format *.css, lalu dihubungkan ke halaman html yang menggunakannya dengan tag <link/>. Teknik ini yang umumnya digunakan dalam pembuatan website.
Setelah mengetahui bahwa css bisa digunakan di dalam file html sebagai inline/internal css maupun dalam file berformat *.css secara terpisah, lantas bagaimana cara mengatur tag html dengan syntax css?
Caranya adalah dengan menggunakan CSS Selector !
CSS selector adalah penanda yang digunakan untuk memilih tag html mana yang akan dimanipulasi dengan css.
Perhatikan Contoh berikut:
Pada contoh diatas, ada 3 buah tag paragrap (<p></p>), di bawahnya ada 3 syntax css yang digunakan untuk mengubah warna text paragraph tersebut.
Hal ini sesuai dengan jenis-jenis penggunaan css selector, yaitu select by element/tagName, select by class, dan select by Id.
- Select by Element.
Dengan menggunakan select by element, kita dapat memberikan style css ke satu element spesifik. Pada contoh diatas, kita menggunakan syntax —
p { color: blue; }
untuk mengubah warna text menjadi biru.
Dengan menuliskan nama element yaitu p, yang berarti tag <p></p>, maka text di semua tag p akan berwarna biru. Jika ada 5 element p, maka ke-5nya akan berwarna biru.
2. Select by Class
Dengan menggunakan select by class, maka kita dapat memberikan style css pada semua element yang memiliki class yang sama.
Penulisan selector dengan class diawali dengan titik (.) lalu nama classnya —
.classSelector{ color: red; }.
Pada contoh diatas, hanya element yang diberikan class dengan nama .classSelector saja yang akan berwarna merah, element lain yang tidak memiliki class tersebut tidak akan terpengaruh.
Class juga dapat diberikan kepada element yang berbeda, contohnya:
Text pada element span dan heading1 akan berwarna kuning dan berukuran 40px, sementara itu semua element yang ada di dalam tag div juga akan ikut terpengaruh style css, hal ini karena css bersifat inherit(diwariskan).
3. Select by Id.
Jika kita ingin memberikan style hanya pada 1 element tertentu, meskipun di dalam file html ada banyak element yang sama dan memiliki class yang sama, maka kita dapat menggunakan select by id.
Untuk menggunakan selector by id, kita perlu menuliskan # lalu diikuti dengan id dari element —
#idSelector{ color: green; },
maka hanya element dengan idSelector yang akan berwarna hijau.
Itulah cara penggunaan css untuk mengatur halaman website, dengan menggunakan kombinasi dari select by element, class dan id, kita dapat mengatur tampilan website, baik itu warna, ukuran suatu object, posisi, jarak dan lainnya.
Namun seiring banyaknya baris code css, akan timbul permasalahan yaitu css yang saling tumpang tindih, dimana sebuah element mendapatkan styling css dari beberapa syntax yang berbeda. Contohnya —
Pada contoh diatas, sebuah element paragraph (p) dimanipulasi berdasarkan id, class, dan elementnya oleh beberapa baris code css yang berbeda, sementara itu element p juga memiliki Inline css.
Warna apakah yang akan muncul?
Bagaimana jika warna yang kita inginkan adalah green, namun bukan warna itu yang muncul, apa yang harus dilakukan agar warnanya menjadi green?
Nah, permasalahan ini akan di bahas pada artikel selanjutnya mengenai CSS Precendence serta bagaimana menggabungkan selector agar css menghasilkan output yang sesuai dengan keinginan.
See you in the next article :)
