Trigger Software | Always Updated: css

Sunday, 2 April 2017

Jangan Ngaku Web Desainer Kalo Tidak Tau Dasar CSS

Berkenalan Dengan CSS

CSS adalah dunianya web design. Jika anda ingin mempelajari cara mendesain web, CSS mutlak
harus dikuasai. Kali ini kita akan membahas pengertian CSS, fungsi CSS, dan melihat sekilas
contoh penggunaan CSS dalam proses pembuatan web.

Pengertian CSS

CSS merupakan singkatan dari Cascading Style Sheet. CSS digunakan untuk mengubah
tampilan (style) dari halaman web. Sebagaimana yang kita ketahui, halaman web modern terdiri
dari 3 komponen dasar: HTML untuk membuat struktur, CSS untuk tampilan, dan JavaScript
untuk interaksi.

Jika halaman web diibaratkan sebuah bangunan, CSS adalah tampilan luar dari bangunan
tersebut, seperti warna dinding atau warna atap. Kerangka dasarnya dibuat dari HTML. Dengan
demikian, kita bisa dengan mudah menukar warna dinding bangunan tanpa perlu mengubah
struktur dasarnya.

Begitu pula dengan halaman web. Menggunakan CSS, kita bisa mengubah tampilan website
tanpa perlu menyentuh kode HTML. Apabila saat ini website kita memiliki warna mayoritas
merah, minggu depan bisa menjadi biru hanya dengan menukar beberapa baris kode CSS.
Mengutip dari wikipedia:

“Cascading Style Sheets (CSS) is a style sheet language used for describing the look
and formatting of a document written in a markup language”.

Terjemahan bebasnya:

“Cascading Style Sheets (CSS) adalah bahasa style sheet yang digunakan untuk
mengatur tampilan dan format dari sebuah dokumen yang ditulis dengan bahasa
markup”.

Terdapat 2 istilah penting yang perlu penjelasan tambahan, yakni: bahasa style sheet (stylesheet
language) dan bahasa markup (markup language).

Istilah pertama: style sheet language adalah format bahasa khusus yang terdiri dari kumpulan
kode untuk mengatur tampilan (style) dari sebuah dokumen. Sebagaimana yang akan kita
lihat nanti dari sejarah CSS, pada awal perkembangannya terdapat berbagai variasi style sheet language yang bisa digunakan, dimana salah satunya adalah CSS.

Istilah kedua, markup language merujuk kepada dokumen yang dibuat menggunakan “tanda”
atau “mark”. Salah satu contoh dari markup language ini adalah HTML (Hypertext Markup Language). Walaupun begitu, CSS tidak hanya digunakan untuk HTML saja, tapi bisa untuk
bahasa markup lain seperti XML (Extensible Markup Language) dan SVG (Scalable Vector
Graphics).

Kata Cascade dari kepanjangan CSS juga perlu kita bahas. Dalam bahasa inggris, cascade berarti
“air terjun kecil, riam, jeram, mengalir/berpancaran kebawah”. Dimana maknanya adalah:
sesuatu yang mengalir dari atas ke bawah.

Di dalam CSS, style atau aturan tampilan yang dibuat bisa saja saling menimpa satu sama lain,
tergantung dari posisinya dan ke-spesifikan kode CSS tersebut.

Sebagai contoh, jika pada baris pertama kode CSS kita membuat perintah untuk mengubah
warna paragraf menjadi biru, di baris kedua kita bisa menulis kembali perintah yang sama,
tetapi kali ini mengubah warna tersebut menjadi merah. Konsep cascading ini akan kita bahas
dengan lebih detail pada bab tersendiri.

Sebagai kesimpulan, dalam pengertian sederhana CSS adalah “format bahasa khusus yang
digunakan untuk mengatur tampilan dari halaman web”.

Sama seperti HTML, CSS bukanlah sebuah bahasa pemrograman komputer, tapi
bahasa struktur (structural language). CSS terdiri dari kode-kode sederhana berupa
perintah ‘style’ tanpa fitur bahasa pemrograman seperti variabel, logika if, fungsi, dll.
Oleh karena itu, CSS relatif mudah untuk dipahami.

Fungsi CSS

Seperti yang telah kita singgung sebelumnya, CSS berfungsi untuk mengatur tampilan (style)
dari sebuah dokumen. Khusus dalam buku ini dokumen yang dimaksud adalah HTML.
Dengan menggunakan CSS kita bisa mengatur (hampir) seluruh tampilan dari HTML, seperti
warna teks, gambar backround, besar font, posisi judul, tampilan layout, dll. Ditambah lagi CSS3
membawa banyak fitur lanjutan seperti color gradient, transitions, dan animations.

Keuntungan lain dari CSS, ia bisa digunakan oleh banyak dokumen HTML sekaligus. Sebagai
contoh, untuk website yang terdiri dari ribuan halaman, kode CSS yang diperlukan bisa
ditempatkan pada 1 file saja. Dengan mengubah beberapa baris kode pada file ini, tampilan
seluruh halaman website akan ikut berubah.

Selain itu, CSS memiliki fitur ‘media type’ untuk mendeteksi tipe perangkat yang digunakan
ketika mengakses halaman web, apakah itu dari layar komputer/smartphone, printer, screen
reader, dll. Dengan demikian, kita bisa membuat style yang berbeda-beda untuk masingmasing perangkat ini. Misalnya jika sebuah halaman akan di print, kita bisa menghapus gambar
background atau mengubah warna text agar lebih jelas ketika di print.

Pada CSS3, fitur media type disempurnakan lagi dengan ‘media query’. Menggunakan media
query, kita bisa membuat halaman web yang dapat ‘menyesuaikan diri’ dengan ukuran layar.
Tipe website seperti ini dikenal dengan Responsive Web Design (RWD), atau cukup disingkat
dengan Web Responsive.

Selain hal diatas, masih banyak fitur canggih CSS lainnya yang tidak bisa didapat jika menggunakan HTML saja. Dalam buku ini kita akan membahas sebagian besar diantaranya. Mulai dari
dasar penulisan CSS, pengertian selector dan property, tipe-tipe selector, hingga cara membuat
web responsive.

Khusus untuk web responsive, Google pun telah memutuskan untuk memberi nilai
tambah bagi website ‘mobile friendly’. Dengan demikan, mau tidak mau anda harus
menguasai cara membuat responsive web design mulai saat ini.

Monday, 8 June 2015

Mengenal Satuan Nilai dalam CSS

css

ilyunal 11:52

Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas dalam menentukan nilai atau value tertentu untuk suatu properti, seperti tinggi sebuah box, besar ukuran font maupun besar border dari tabel. Untuk keperluan ini, CSS menyediakan berbagai ukuran sepertipixel, em, point, in, pc, dan pt.

Dalam tutorial belajar CSS Mengenal Satuan Nilai (Value) dalam CSS ini kita akan membahas pengertian dan perbedaan masing-masing nilai tersebut.

Sebuah nilai dalam CSS dapat bernilai 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 FF.

Nilai Absolut

Nilai absolut adalah sebuah nilai di dalam CSS, dimana nilai tersebut tidak dipengaruhi kondisi tag induknya (parent), dan didasarkan pada ukuran sebenarnya di media printing. Di dalam CSS, nilai absolut ini 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;}.

Ukuran pica (pc) mungkin tidak terlalu familiar. 1pc setara dengan 12pt. contoh penulisannya dalam CSS adalah p {font-size: 1.5pc;}.

Kelima nilai absolut tersebut, selain pt tidak terlalu sering digunakan, karena konversi dari ukuran dunia nyata ke dalam monitor dipengaruhi banyak hal, 1cm di satu monitor bisa jadi berbeda dengan 1cm pada monitor lainnya, sehinga agak menyulitkan dalam mendesain kode CSS yang “pas”.

Nilai Relatif

Berbeda dengan nilai absolut, nilai relatif didalam CSS dipengaruhi oleh tag disekitarnya. CSS mendukung banyak nilai relatif, beberapa yang kita bahas adalah: pixel (px), Em-height (em), danX-height (ex).

Ukuran pixel (px), merupakan ukuran yang paling sering digunakan dalam CSS. Di dalam CSS, pixel termasuk nilai relatif karena ia tidak terikat dengan perbandingan media tertentu. Didalam spesifikasi CSS2. 1, 1 pixel disamakan dengan 0.26mm atau 1/96 inci, namun banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1 pixel dengan 1 pixel sesungguhnya yang terdapat di monitor.

1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag tersebut. Ketika kita mendefenisikan sebuah paragraf sebesar 12pt, maka sebuah tag  yang berada di dalam paragraf tersebut disebut secara inheritance akan berukuran 1em. Jika kita merubahnya menjadiem {font-size: 1.2em;} maka tag  tersebut akan berukuran 1,2 kali lebih besar dari ukuran tag p.

Ukuran relatif terakhir yaitu X-height (ex). ex berasal dari tinggi sebuah karakter “x” (huruf x kecil) dari sebuah font. Namun, banyak font yang tidak mendukung hal ini, sehingga browser kadang kala menyamakan 1ex dengan 0,5em.

Nilai Persentasi

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

Dengan membuat nilai font lainnya menjadi persen, hal ini akan memudahkan jika suatu saat kita ingin merubah seluruh tampilan web. Hanya merubah ukuran tag , maka secara langsung tag akan menyesuaikan tampilannya.

Berikut adalah contoh perbandingan_fontsize.html, dimana saya menampilkan ukuran propertyfont-size dengn berbagai value:

<!DOCTYPE html>

<html>

<head>

   <title>Contoh Perbandingan Ukuran dari font-size</title>

   <style type="text/css">

            body    { font-size:14pt; }

            p.satu  { font-size:8mm; }

            p.dua   { font-size:0.35in; }

            p.tiga  { font-size:2.2pc; }           

            p.empat { font-size:20px; }

            p.lima  { font-size:1.8em }

            p.enam  { font-size:3ex; }

            p.tujuh { font-size:190%; }

    </style>

</head>

<body>

       <p>Kalimat ini akan berukuran 14 point</p>

       <p class="satu">Kalimat ini akan berukuran 8 milimeter</p>

       <p class="dua">Kalimat ini akan berukuran 0,35 inchi</p>

       <p class="tiga">Kalimat ini akan berukuran 2,2 pica</p>

       <p class="empat">Kalimat ini akan berukuran 20 pixel</p>

       <p class="lima">Kalimat ini akan berukuran 1,8 em</p>

       <p class="enam">Kalimat ini akan berukuran 3 ex</p>

       <p class="tujuh">Kalimat ini akan berukuran 190%</p>

</body>

</html>

Jika diperhatikan lagi, saya membuat sebuah selector body {font-size:14pt;} pada bagian awal definisi CSS. Selector body akan menurunkan (inherit) ukuran font ini ke seluruh tag  yang berada di dalam tag <body>, namun pada masing-masing tag , saya menambahkan property HTML “class”, sehingga ukuran font akan ditimpa (override) oleh nilai lainnya.

Khusus untuk class=lima, class=enam, dan class=tujuh, saya menggunakan nilai relatif em, ex,dan %, sehingga nilainya bergantung dengan nilai induknya (parent), yakni body {font-size:14pt;}.Cobalah mengubah ukuran font-size pada body ini, lalu jalankan kembaliperbandingan_fontsize.html, maka secara otomatis ketiga kalimat tersebut juga akan berubah ukurannya.