Mengenal Apa Itu CSS: Format Desain Web lewat CSS

Avatar

Redaksi

0 comments

2019-Januari-10th at 2:57

Apa itu CSS?

Cascading Style Sheet atau CSS adalah bahasa stylesheet (aturan desain) untuk menampilkan suatu halaman HTML (Hyper Text Markup Language) ataupun XML CSS mempola bagaimana suatu elemen harus ditampilkan di layar, di atas kertas, dan dalam media yang lain..

CSS adalah salah satu bahasa utama dalam pemrograman internet, dan sudah distandarisasi sesuai spesifikasi W3C. CSS sendiri mengoordinir elemen desain dengan efektif. Ia bisa mengontrol layout lebih dari satu halaman web sekaligus, sehingga developer tidak perlu copy-paste kode tersebut ke tiap halaman web.

Stylesheet CSS bisa mengatur elemen desain seperti text, merubah warna, menampilkan gambar, warna halaman web dan lain-lain. Kode CSS bisa ditempatkan di dalam dokumen HTML, atau disimpan dalam satu file CSS khusus yang menggunakan ekstensi file .css.

Konsep Dasar Bahasa CSS

Pemrograman web mengenal 3 bahasa utama, HTML, CSS, dan Javascript. HTML mengatur struktur konten web dan JavaScript adalah modulasi agar konten tersebut lebih dinamis. Sementara itu, CSS menjadi pengatur tampilan dari elemen-elemen dalam sebuah halaman web.

Ambil contoh, bagaimana mengubah warna seluruh paragraf menjadi merah.

Color Red CSS

Barisan kode stylesheet CSS di atas disebut rule set. Anda bisa lihat beberapa nama elemen, dengan penjelasan berikut:

  • Selector: nama elemen HTML yang berada di awal rule set. Bagian ini memilih elemen (bisa lebih dari satu) untuk didesain. Dalam hal ini yang diatur adalah elemen paragraf (p).
  • Declaration: Sebuah rule seperti color: red. Declaration ini menjelaskan properti elemen mana yang akan didesain.
  • Properties: aspek yang bisa/akan didesain dari sebuah elemen HTML. 'color' adalah properti dari elemen HTML <p>. Jadi, di sini Anda sedang mengganti warna dari paragraf halaman situs tersebut.
  • Property value: Di lajur kanan property, setelah tanda titik dua (:), Anda perlu memasukkan property value, yaitu satu di antara berbagai pilihan tampilan yang dimungkinkan dari property tersebut. Dalam hal ini, 'red' atau merah adalah salah satu alternatif dari properti 'color'.

Metode Input Kode CSS

Pada artikel dasar HTML dipaparkan bahwa HTML adalah kumpulan tag-tag yang disusun sehingga dapat memiliki bagian-bagian tertentu, Seperti contoh, struktur konten teks dalam halaman web, tabel dan lain sebagainya. CSS berperan di sini, yaitu untuk mengatur tampilan tag-tag pada HTML.

CSS bisa diterapkan dalam 3 cara berikut.

1. Inline Style

Teknik penulisan CSS Inline Style memasukkan kode CSS ke dokumen HTML melalui tag style. Gambarannya adalah sebagai berikut. Perlu diketahui Inline Style baru satu dari berbagai metode input kode CSS.

CSS in HTML

Berikut ini hasil penulisan Inline Style CSS:

Hasil kontrol tampilan CSS

Atribut Style di atas saya sisipkan di tag <p>. Bila dicermati, saya menulis lebih dari 1 deklarasi, yaitu (1) text align (perataan teks) dan (2) background color (warna latar). Hal ini bisa saja dilakukan, asal tiap deklarasi dipisahkan oleh tanda titik-koma (;). Jadi, tanda titik-koma setelah 'text-align: justify' itu bersifat esensial agar kode CSS saya dipahami oleh web browser.

2. Internal Style Sheet

Cara ini memisahkan CSS dari HTML. Perbedaannya kentara dibandingkan dengan metode Inline style Sheet di atas.

Kali ini, deklarasi CSS tidak menjadi atribut tag HTML. Kode style sheet dikumpulkan ke dalam satu tag, yaitu tag <style>. Tag tersebut perlu ditempatkan di antara tag <head> ... </head> dari dokumen HTML. Artinya, CSS ditempatkan di bagian head, alias di awal dokumen HTML, sebelum Anda memuat konten sebuah halaman situs web.

Cara penggunaan dari Internal Style Sheets adalah sebagai berikut:

CSS Internal Line

Pada contoh di atas, tag <style> diberi atribut type yang menandai penggunaan CSS pada tag tersebut. Metode terbilang lebih efisien daripada metode 1 (Inline Style), karena CSS di sini terpisah dari HTML. Di metode ini, kode CSS nantinya akan ditaruh dalam tag <style> di bagian "Head" dokumen HTML.

Metode Internal Style Sheets juga punya kekurangan. Halaman dengan style yang sama tidak bisa digarap secara simultan. Anda harus menlis kode CSS satu per satu di tiap halaman tersebut. Hal ini sendiri sudah teratasi dengan metode berikut ini.

3. Loading Style Sheet Eksternal

Selangkah lebih jauh dari metode 1 dan 2, External Style Sheet menampung seluruh kode CSS di satu file terpisah. Tiap elemen HTML yang membutuhkan elemen CSS nantinya tinggal 'memanggil' isi file style sheet tersebut. Di sini, metodenya bisa dipelajari sebagai modifikasi tag <style> dari metode Internal Style Sheet. Yaitu, Anda memindah seluruh kode dalam tag tersebut ke dalam sebuah file CSS (terpisah dari file HTML):

CSS Style1

HTML punya 2 cara memuat file eksternal CSS.

a. @import

Pada metode @import external style sheets CSS adalah metode yang dapat menyisipkan @import url(‘style.css’); pada tag <style>. url() atau alamat bisa berupa halaman yang relatif yaitu bisa seperti : (folder/file.css) atau bisa dapat menggunakan absolut seperti : (www.webhostingterbaik.com/belajar.css).

CSS @import

b. External Style Sheets

Cara input yang kedua CSS adalah External Style Sheets dengan menggunakan tag <link> dan berikut ini contoh dari penggunaannya: Metode link External Style Sheets dapat menggunakan atribut tambahan yaitu href pada tag <link> untuk memanggil file CSS agar dapat digunakan dalam halaman HTML pada pembahasan ini menggunakan file style.css.

CSS External Style Sheet

Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling direkomendasikan adalah Metode External Style Sheets, baik menggunakan @import maupun dengan tag <link>. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama, dan jika kita ingin mengubah seluruh tampilan halaman website, kita hanya butuh mengubah 1 file CSS saja.

Aturan Dasar Penulisan CSS

Seperti suatu sistem bahasa', CSS memiliki aturan penulisan. Anda bisa melihat contohnya di bawah ini. Ada sejumlah kode HTML yang diimbuhi beberapa pengaturan CSS.

Aturan Penulisan CSS

Pemrograman CSS dalam file 'style.css' adalah sebagai berikut:

CSS Style 2

Seperti yang dapat dilihat dari contoh di atas, aturan penulisan CSS adalah sebagai berikut:

  • Selector selalu diletakkan di awal penulisan kode CSS. Pada contoh, kita memakai Selector (body, h1, h2, #content, .paragraf). Di dalam penulisan CSS adalah terdapat aturan main dalam penulisan Selector. Terdapat perbedaan pada contoh diatas yaitu Selector yang berwarna merah  adalah penggunaan pada tag HTML, Selector yang berwarna hijau memiliki 2 teknik penulisan ada yang menggunakan titik (.) dan tanda pagar (#), pada penggunaan titik (.) lalu diikuti dengan Selector yang dibuat ini digunakan pada atribut class, pada penggunaan tanda pagar (#) lalu diikuti dengan Selector yang dibuat ini digunakan pada atribut id.
  • Mengikuti Selector adalah Property dan Value yang perlu ditulis dalam kurung kurawal, (....).
  • Titik koma (;) dapat digunakan bila ada lebih dari satu Property. Tanda baca titik koma ini menjadi sinyal bagi eksekutor kode CSS untuk menghentikan eksekusi CSS dan memulai satu klausa baru.
  • Elemen Property dan Value perlu dipisahkan dengan tanda titik dua (:). Dengan menggunakan tanda titik dua (:) kita mengetahui dimana Property yang kita gunakan dan Value yang kita gunakan.
  • Property terdiri dari 1 kata atau 2 kata. Pada contoh diatas Property yang menggunakan 2 kata disambung dengan menggunakan tanda hubung (-) bukan menggunakan spasi. Seperti contoh diatas penggunaan Property CSS adalah: text-decoration, text-align, background-color, font-size dan lain sebagainya yang cara penulisan sama dengan contoh Property CSS pada contoh diatas.

Mengenal Satuan Nilai

CSS memiliki sistem yang fleksibel dalam menentukan Property Value, seperti tinggi sebuah box, besar ukuran font maupun besar border dari tabel. Untuk keperluan ini, CSS menyediakan berbagai ukuran seperti pixel, em, pointin, pc, dan pt. Selain itu, nilai bisa positif maupun negatif; bisa berupa angka bulat, maupun angka desimal. Namun beberapa properti juga memiliki batasan, seperti warna yang hanya bisa bernilai 0-255 atau 0 sampai dengan Hexadesimal FF.

Secara mendasar, jenis nilai Property Value dalam CSS adalah sebagai berikut:

1. Nilai Absolut

Nilai absolut adalah sebuah nilai yang ada pada CSS, dimana nilai tersebut tidak dipengaruhi dengan kondisi tag induknya (parent). Di dalam nilai absolut CSS adalah milimeter (mm), centimeter (cm), inchi (in), point (pt), dan pica (pc).Kelima nilai absolut ini berasal dari media percetakan. Kita tentunya sudah familiar dengan ukuran seperti milimeter, dan centimeter. Sedangkan 1 inchi adalah sekitar 25,4 mm.

Ukuran point (pt) sering digunakan dalam media cetak offline seperti Microsoft word dalam menentukan ukuran dari font. 1 inchi setara dengan 72pt, sehingga ukuran font normal sebesar 12pt setara dengan seperdelapan inchi. Contoh penggunaannya dalam CSS: p {font-size: 18pt;} sama dengan p {fontsize: 0.25in;}

2. Nilai Relatif

Dalam ukuran pixel (px) adalah ukuran yang sering digunakan dalam CSS. Pixel dalam CSS termasuk nilai relative karena tidak terikat dengan perbandingan media manapun. Pada spesifikasi CSS2 ada pengaturan pada pixel. 1,1 pixel dapat disamai dengan 0.26mm atau 1/96 inci, banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1 pixel dengan 1 pixel sesungguhnya.

Dalam 1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag tersebut. Maka sebuat tag <em> yang berada di dalam paragraph tersebut disebut secara inheritance akan berukuran 1em. Jika kita merubahnya menjadi em {font-size: 1.2em;} maka tag <em> tersebut akan berukuran 1,2 kali lebih besar dari ukuran tag <p>.

3. Nilai Persentasi

Nilai persentasi adalah sebuah nilai per seratus (%) dari suatu property yang relatif terhadap induk (parent) dari tag tersebut. Dapat diberi contoh dengan membuat sebuat definisi CSS sebagai p{font-size: 10px;}, dan em{font-size: 120%;}. Maka jika terdapat tag <em> didalam tag <p>, maka ukuran font dari tag <em> akan menjadi 120% dari 10pt atau sekitar 12pt.

Kesimpulan: CSS mengatur tampilan HTML.

Seperti tersebut di awal, CSS adalah satu dari 3 bahasa pemrograman inti internet, selain HTML dan JavaScript. Bila dianalogikan sebagai potongan kue, HTML berada palaing bawah, lalu dipermak oleh CSS menjadi tampilan tertentu. Nantinya, konten dan tampilan ini bisa dibuat lebih dinamis menggunakan JavaScript.

Cara CSS mengatur tampilan HTML adalah dengan mendefinisikan tampilan elemen HTML tersebut. Misal, semua paragraf harus berwarna merah. Maka, ada kode CSS yang menulis bahwa elemen <p> (untuk paragraf) memiliki deklarasi "color: red". CSS sendiri bisa melakukan hal-hal seperti ini dengan berbagai metode, dan efek. Semuanya terserah web developer. Pada akhirnya ia tidak sekadar menjadi 'programmer', namun, juga 'desainer' dari suatu halaman website.


Avatar
Redaksi

Redaksi


Top 3 Hosting Providers
Hostinger logo
9.7 /10
9.5 /10
7.0 /10
Leave a Comment