Pengertian & Penjelasan Syntax Pada CSS responsive layout dengan media query
Apa
itu CSS?
CSS singkatan
dari Cascading Style Sheet, atau jika diterjemahkan yaitu Bahasa Lembar Gaya.
CSS merupakan bahasa yang digunakan untuk mengatur tampilan/desain suatu
halaman web. CSS sama halnya dengan styles pada
aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa
style misalnya heading, subbab, bodytext, footer, images, dan
style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).
Dengan kata lain, Cascading
Style Sheet adalah suatu teknologi yang digunakan untuk memperindah
tampilan halaman website. Singkatnya dengan menggunakan metode CSS ini mudah
mengubah secara keseluruhan warna dan tampilan yang ada pada website. Dengan
CSS, temen-temen dapat lebih mempercantik tampilan web. baik dari style text,
button, textfield, table, dan lain-lain.
Pada umumnya CSS dipakai
untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
Sebagai contoh, perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf), colors (warna), margins (ukuran), background (latar
belakang), font size (ukuran font) dan lain-lain.
Elemen-elemen tersebut disebut juga dengan styles.
Perkembangan
CSS
CSS
1
CSS pertama yang menjadi Rekomendasi W3C resmi
CSS level 1, diterbitkan pada Desember 1996.dikembangkan berpusat pada
pemformatan dokumen HTML.
CSS
2
CSS2 mendukung penentuan
posisi konten, huruf (font), tampilan pada tabel (table layout) dan media tipe
untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih baik dari versi
pertama.
CSS
3
Dapat melakukan animasi
pada halaman website, diantaranya animasi warna hingga animasi 3D.
Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni @media query.
Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image.
Dengan CSS3 desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni @media query.
Selain itu, banyak fitur baru pada CSS3 seperti: multiple background, border-radius, drop-shadow, border-image.
Tools
CSS
Editor
Sama halnya seperti HTML
dan bahasa pemrograman lainnya, CSS berisi kode teks yang dapat dibuat
menggunakan text edtor seperti Notepad, Notepad++, Dreamweaver, dll.
Designer
Konsep untuk membuat
tampilan web dengan menambahkan CSS berbeda-beda. Mungkin sebagian orang bisa
langsung membuat CSS dari nol hingga menghasilkan tampilan yang bagus. Tetapi
pada umumnya seorang web designer terlebih dahulu menggunakan tools image
editor seperti Photoshop, Adobe Ilustrator, dll untuk membuat design mockup.
Mockup tersebut kemudian dijadikan acuan untuk membuat kerangka tampilan web
menggunakan HTML dan CSS. Setelah itu, mockup tersebut di-"slice"
(dipotong-potong) menjadi bagian-bagian kecil untuk dimasukkan ke dalam
kerangka tampilan web tadi. Metode ini sering disebut dengan slicing.
Result
& Troubleshoot
Untuk melihat hasil dari
CSS yang telah dibuat, tentunya dengan membuka file HTML pada browser, misalnya
menggunakan Mozilla Firefox, Google Chrome, Internet Explorer, dll.
Jika setelah dibuka ternyata terdapat ketidaksesuaian pada hasil tampilan, dapat dilakukan troubleshoot dengan menggunakan fitur melihat source code pada browser. Untuk Firefox, bisa menggunakan plugin Firebug. Pada Google Chrome, bisa digunakan Developer Tools yang terdapat pada opsi menunya.
Jika setelah dibuka ternyata terdapat ketidaksesuaian pada hasil tampilan, dapat dilakukan troubleshoot dengan menggunakan fitur melihat source code pada browser. Untuk Firefox, bisa menggunakan plugin Firebug. Pada Google Chrome, bisa digunakan Developer Tools yang terdapat pada opsi menunya.
Manfaat
CSS
Manfaat yang bisa
diperoleh jika kita membuat tampilan web dengan sentuhan CSS diantaranya :
§
Kode menjadi sederhana dan lebih mudah diatur
§
Ukuran file menjadi lebih kecil, sehingga load file lebih cepat
§
Mudah untuk mengubah tampilan, hanya dengan mengubah CSS saja
§
Dapat berkolaborasi dengan Javascript
§
Dapat digunakan dalam hampir semua web browser
Syntax
CSS
CSS memiliki syntax yang
sederhana dan menggunakan sejumlah kata kunci berbahasa Inggris untuk
menentukan nama-nama berbagai properti. CSS memiliki dua aturan utama, yaitu
Selector dan Declaration. Untuk lebih jelasnya, lihat cara penulisan serta
komponen yang terdapat pada CSS berikut :
§
Dalam kode CSS, ada 2 bagian yang terpisah, yaitu Selector dan
Declaration.
§ Selector biasanya
merupakan elemen HTML atau tag dimana berbagai properti diberi suatu nilai.
§ Setiap Declaration terdiri dari Property dan Value.
§
Untuk penulisan Declaration harus menggunakan tanda kurung
kurawal {...}
§ Property adalah
atribut style yang ingin dirubah, misalnya color, background, margin, dll.
§
Setiap Property memiliki Value (nilai) sesuai dengan jenis
property-nya.
Pengelompokan
Selector
Seperti yang dilihat pada
contoh di atas, salu selector dapat memiliki beberapa property. Jika terdapat
beberapa selector yang memiliki property yang sama, dapat dilakukan
pengelompokan selector. Lihat contoh berikut :
- Syntax CSS
h1, body, p, ul { color: blue; }
- Syntax HTML
<body>
<h1>Warna Biru</h1>
Contoh teks
</body>
Pada contoh di atas,
elemen header, body, paragraph, dan unordered list berada pada group yang sama.
Semua elemen tersebut nantinya akan memiliki teks berwarna biru.
ID
dan Class
Untuk memahami tentang ID
dan Class, dapat melihat contoh kode CSS berikut :
#identitas {
font-size: 20px;
color: #FF0000;
background-color: #000;
}
.kelas {
font-size: 30px;
color: #12FF34;
background-color: #FFFFFF;
}
§
Selector ID menggunakan tanda pagar (#) sebagai penandanya,
sedangkan Selector Class menggunakan tanda titik (.).
§
Penamaan pada selector ID dan Class dapat dibuat secara bebas,
tetapi sebaiknya disesuaikan dengan nama kelompok yang terkait untuk mempermudah
pengeditan.
§
Perbedaan antara ID dan Class pada CSS adalah pada tingkat
penggunaannya. ID sebaiknya digunakan sebagai identitas yang unik seperti Logo,
Header, Footer, Sidebar.
§
Sedangkan Class digunakan untuk menandai atribut yang lebih
spesifik seperti ketebalan border (garis pinggir), kode warna, paragraph, jenis
font, ukuran font, dll.
§
Class dapat digunakan untuk mengatur tampilan atau atribut dari
suatu kelompok data HTML, baik yang memiliki ID tertentu atau tidak.
§
ID digunakan untuk memberikan identifikasi atau atribut pada
kelompok data atau elemen HTML yang lebih besar.
Implementasi
CSS
Ada 2 cara yang bisa
diterapkan untuk menggunakan CSS pada tampilan web. Cara pertama yaitu dengan
membuat CSS langsung di dalam satu file HTML. Cara ini disebut dengan internal/inline style sheet.
Cara yang kedua yaitu
dengan cara membuat file CSS tersendiri,lalu file tersebut dipanggil melalui
HTML yang dibuat. Cara ini disebut dengan external style sheet.
Internal
Style CSS
Metode Internal Style
maksudnya ialah style CSS digabung atau ditulis bersamaan dengan tag-tag HTML.
Agar dapat lebih dipahami, lihat contoh kode HTML berikut :
File index.html
<html>
<head>
<title>Contoh
Internal Style</title>
<style
type="text/css">
body {
font-family: Arial, Helvetica,
sans-serif;
}
.kelas {
font-size: 50px;
color: #FF0000;
background-color: #000;
}
#identitas {
font-size: 30px;
color: #000;
background-color: #FF0000;
}
</style>
</head>
<body>
<div class="kelas">Contoh Penulisan Class</div>
<br \>
<div id="identitas">Contoh Penulisan ID</div>
</body>
</html>
Dilihat dari kode di
atas, syntax CSS ditulis langsung di dalam HTML yang dibuat, yaitu pada
bagian <head>dengan
tag <style>.
Selector body langsung digunakan oleh HTML tanpa perlu dipanggil kembali,
sedangkan ID dan Class pada contoh di atas dipanggil pada tag <div>.
External
Style CSS
Merupakan metode
penulisan CSS dimana Syntax CSS dibuat file tersendiri yang terpisah dengan
file HTML. File CSS ini nantinya dapat digunakan oleh semua file HTML yang ada.
Untuk memanggil file CSS yang telah dibuat, tambahkan baris berikut pada bagian <head> HTML :
<link rel="stylesheet" type="text/css"
href="lokasi_file_css.css" />
Untuk lebih memahami
penggunaannya, perhatikan contoh berikut :
- File gaya.css
body {
font-family: Arial, Helvetica,
sans-serif;
}
.kelas {
font-size: 50px;
color: #FF0000;
background-color: #000;
}
#identitas {
font-size: 30px;
color: #000;
background-color: #FF0000;
}
- File index.html
<html>
<head>
<title>Contoh
External Style</title>
<link
rel="stylesheet" type="text/css" href="gaya.css"
/>
</head>
<body>
<div class="kelas">Contoh Penulisan Class</div>
<br \>
<div id="identitas">Contoh Penulisan ID</div>
</body>
</html>
CSS
Framework
Framework secara
sederhana dapat diartikan kumpulan dari fungsi-fungsi/prosedur-prosedur dan
class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih
mempermudah dan mempercepat pekerjaan seorang programmer, tanpa harus membuat
fungsi atau class dari awal.
CSS Framework adalah
paket kode CSS/XHTML sebagai acuan dasar membuat web, sehingga kita tidak perlu
lagi menulis kode web (CSS/XHTML) dari nol.
Beberapa contoh CSS
Framework yang sering digunakan diantaranya :
§ YAML 4
Keuntungan
Menggunakan CSS Framework
Penggunaan CSS Framework
pada web memiliki beberapa keuntungan, diantaranya :
Lebih Cepat
Membuat sebuah website
membutuhkan waktu yang tidak sebentar. Tapi dengan menggunakan framework kita
tidak harus memulai semuanya dari awal untuk setiap projek
Tableless
Sebuah teknik dimana
struktur website tidak menggunakan table pada layoutnya, melainkan dengan cara
memisahkan data antara HTML dan CSS. Hal ini dilakukan agar lebih mudah
dilakukan maintenance dan diakses oleh berbagai media aplikasi, berkurangnya
kebutuhan bandwidth, dan yang lebih utama yaitu lebih SEO friendly.
Cross-browser Compatibility
Cross-browser
compatibility ini memiliki pengertian bahwa website dapat diakses oleh berbagai
browser.
Kekurangan
Menggunakan CSS Framework
Selain kelebihan yang
telah disebutkan di atas, terdapat juga kekurangan yang perlu diperhatikan jika
menggunakan CSS Framework, diantaranya :
§
Membutuhkan waktu untuk mempelajari framework, karena CSS yang
tersedia tidak dibuat sendiri.
§
Mengabaikan keunikan desain layout.
§
Kode menjadi mubazir karena tidak semua kode yang ada pada
framework kita gunakan pada tampilan web yang dibuat.
§
Sulit untuk melakukan troubleshoot jika terdapat bug pada
framework.
§
HTTP request yang berlebihan karena biasanya framework CSS
memiliki data yang terpisah-pisah.
Sekian pengenalan
mengenai CSS. InsyaAllah pada lain kesempatan akan dibuat tutorial khusus
mengenai CSS dan berlanjut ke bahasa pemrograman lainnya. Terima kasih telah
membaca. Semoga bermanfaat.
No comments: