STECHOQ TRAINING CENTER
Day 2 - Styling and CSS Framework
Tujuan Pembelajaran :
Siswa dapat memahami dan mengenal struktur dasar, properti dan value pada CSS
Siswa dapat mengimplementasikan penulisan kode CSS pada HTML
Siswa dapat memahami dan mengenal styling dan Framework CSS
Siswa dapat mengimplementasikan penulisan kode CSS pada Framework
Materi Pembelajaran :
BAGIAN. 1
PENGENALAN CSS
Sejarah CSS
CSS atau Cascading Style Sheets adalah sebuah bahasa pemrograman yang digunakan dan dipakai untuk melakukan desain pada tampilan website atau halaman depan sebuah situs di internet dengan mudah. Cascading Style Sheets dibuat sekaligus dikembangkan oleh World Wide Consortium atau W3C di tahun 1996. Alasan dikembangkan sistem ini pun sederhana, HTML dulu tidak dilengkapi dengan tag yang berfungsi sebagai alat untuk format halaman sehingga lahirlah CSS.
Definisi CSS
CSS merupakan singkatan dari “Cascading Style Sheets“. sesuai dengan namanya CSS memiliki sifat ”style sheet language” yang berarti bahasa pemrograman yang di gunakan untuk web design. CSS adalah bahasa pemrograman yang di gunakan untuk mendesign sebuahhalaman website. dalam mendesign halaman website, CSS menggunakan penanda yang kita kenal dengan id dan class. Seiring berkembang nya dunia pemrograman dan teknologi, CSS tidak cuma di gunakan di HTML dan XHTML saja. tapi sudah bisa di gunakan untuk mendesign tampilan aplikasi android. CSS di akses menggunakan id atau class.
Fungsi dan kegunaan CSS
CSS digunakan untuk mempercantik laman web agar lebih bewarna dan lebih tertata. Tanpa penggunaan CSS laman web tidak akan menarik. CSS dapat mengubah font, ukuran font, warna dan format font. mengatur ukuran layout, lebar, tinggi dan warna element, mengubah tampilan form, membuat halaman website yang responsive dan masih banyak lagi.
Untuk mendesain font dapat dilakukan dengan mendefinisikan font , untuk mengatur warna bisa menggunakan color, margins digunakan untuk mengatur jarak pada luar element tertentu, mengatur warna atau gambar pada latar belakang bisa menggunakan “background”. mengatur ukuran font gunakan “font size”. jenis font menggunakan “font-family” dan sebagainya.
Cara Penggunaan CSS
File css di simpan dengan ekstensi .css. kemudian di import atau di hubungkan kedalam file HTML atau PHP yang ingin kita design dengan CSS menggunakan syntax berikut ini.
dengan tag <link> seperti di atas di gunakan untuk menghubungkan file HTML dengan file CSS. Syntax di atas diletakkan pada file html. pada atribut rel dan type di tag link di atas digunakan untuk mendefinisikan bahwa yang di panggil atau yang di hubungkan adalah file Stylesheet atau CSS. kemudian atribut href di gunakan untuk meletakkan letak file CSS. pada contoh di atas file style.css terletak satu folder atau direktori dengan file html yang di tambahkan syntax di atas.
jika file css terletak di luar folder maka bisa menghubungkanya dengan
jika file css terletak dalam sebuah folder. katakan saja nama foldernya adalah ” assets “. maka untuk menghubungkannya
Inspect element
Agar lebih mudah dalam mempelajari dom, kita bisa memanfaatkan fitur dari web browser yaitu inspection code. Cara untuk membuka inspect tool yaitu dengan klik kanan pada mouse, kemudian klik inspect dan terakhir pilih tab console.
Struktur dasar CSS
Struktur penulisan sintak dalam css memiliki tiga bagian yaitu: selector, property, dan value.
Selector yaitu nama-nama untuk style-style yang berbeda entah itu style internal maupun style external atau elemen yang mendefinisikan style CSS.
Property yaitu atribut untuk mendefinisikan selector.
Value adalah nilai dari sebuah property.
Adapun tanda { } (curl bracket) digunakan untuk memberikan nilai pada font, warna dan lainnya, dimana dalam tag <body> mengarah kepada selektor-selektor untuk mengaktifkan style tersebut.
Properti dan value CSS
Value CSS adalah nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat berupa red, blue, black, atau white. Untuk lebih jelasnya tentang selector, property dan value pada CSS, dapat dilihat pada gambar dibawah ini:
Selector {property : value;}
Selector adalah tag HTML yang akan didefinisikan seperti body, h1, link , dsb.
Property adalah atribut yang akan diubah seperti color, font-size, dsb. Property dan nilai dipisahkan dengan titik dua ( : ) dan nilai diakhiri dengan titik koma ( ; ) Property dan nilai diapit dalam kurung ( { } )
Penulisan CSS pada HTML
1. Internal CSS
Internal CSS adalah kode CSS yang ditulis di dalam tag <style> dan kode HTML dituliskan di bagian atas (header) file HTML. Internal CSS dapat digunakan untuk membuat tampilan pada satu halaman website dan tidak digunakan pada halaman website yang lain.
Cara ini akan sangat cocok dipakai untuk menciptakan halaman web dengan tampilan yang berbeda. Dengan kata lain, Internal CSS ini bisa dipakai untuk menciptakan tampilan yang unik, pada setiap halaman website.
Kelebihan Internal CSS
- Perubahan pada Internal CSS hanya berlaku pada satu halaman saja.
- Anda tidak perlu melakukan upload beberapa file karena HTML dan CSS berada dalam satu file.
- Class dan ID bisa digunakan oleh internal stylesheet.
Kekurangan Internal CSS
- Tidak efisien apabila Anda ingin menggunakan CSS yang sama dalam beberapa file.
- Membuat performa website lebih lemot. Sebab, CSS yang berbeda-beda akan mengakibatkan loading ulang setiap kali Anda ganti halaman website.
2. External CSS
Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML Eksternal CSS ditulis di sebuah file khusus yang berekstensi .css. File eksternal CSS biasanya diletakkan setelah bagian <head> pada halaman.
Cara ini lebih sederhana dan simpel daripada menambahkan kode CSS di setiap elemen HTML yang ingin Anda atur tampilannya.
Kelebihan External CSS
- Ukuran file HTML akan menjadi lebih kecil dan struktur dari kode HTML jadi lebih rapi.
- Loading website menjadi lebih cepat.
- File CSS dapat digunakan di beberapa halaman website sekaligus.
Kekurangan External CSS
- Halaman akan menjadi berantakan, ketika file CSS gagal dipanggil oleh file HTML. Hal ini terjadi disebabkan karena koneksi internet yang lambat.
Berikut ini adalah contoh penempatan External CSS pada file HTML. Sebagai contoh saya membuat file CSS dengan nama style.css berikut isi kode style.css.
Untuk menggunakan file style.css dalam HTML, Anda perlu menambahkannya ke dalam file HTML. Dengan menggunakan tag <link> berikut contohnya.
<link rel="stylesheet" type="text/css" href="style.css">
Berikut penempatan kode dalam file HTML.
3. Inline CSS
Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML. Setiap elemen HTML memiliki atribut style, di situ lah inline CSS ditulis.
Cara ini kurang efisien karena setiap tag HTML yang diberikan harus memiliki style masing-masing. Anda akan lebih sulit dalam mengatur website jika hanya menggunakan inline style CSS. Sebab, Inline CSS digunakan hanya untuk mengubah satu elemen saja.
Kelebihan Inline CSS
- Sangat membantu ketika Anda hanya ingin menguji dan melihat perubahan pada satu elemen.
- Berguna untuk memperbaiki kode dengan cepat.
- Proses permintaan HTTP yang lebih kecil dan proses load website akan lebih cepat.
Kekurangan Inline CSS- Tidak efisien karena Inline style CSS hanya bisa diterapkan pada satu elemen HTML.
Contoh code :
- Mengenal satuan nilai (value) dalam css
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 seperti pixel, em, point, in, pc, dan pt.
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.
1. Nilai AbsolutNilai 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”.
2. 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), dan X-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 <em> yang berada di dalam paragraf 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.
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.
3. 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 <em> didalam tag <p>, maka ukuran font dari tag <em> 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 <p>, maka secara langsung tag <em> akan menyesuaikan tampilannya.
Berikut adalah contoh perbandingan_fontsize.html, dimana saya menampilkan ukuran property font-size dengn berbagai value:
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 <p> yang berada di dalam tag <body>, namun pada masing-masing tag <p>, 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 kembali perbandingan_fontsize.html, maka secara otomatis ketiga kalimat tersebut juga akan berubah ukurannya.
Framework
Framework secara general adalah adalah sesuatu yang memudahkan pekerjaan kita dan mempersingkat waktu pengerjaan (lebih hemat waktu).
Styling dan CSS Framework
CSS framework adalah kerangka kerja yang fungsinya untuk memudahkan Anda ketika membuat desain website atau aplikasi, tepatnya di bagian layout dan tema. CSS framework berisi kumpulan kode CSS yang sudah siap pakai.
Kelebihan Menggunakan CSS Framework
Selain memiliki beberapa kelebihan yang sudah kami sebutkan diatas, ada beberapa hal lain yang merupakan kelebihan penggunaan CSS Framework, diantaranya :
1. Elemen siap pakai
Salah satu tantangan para front-end developer adalah menyatukan setiap elemen, mulai dari tombol, text, navigasi, menu, responsif dan sebagainya. Hal tersebut bisa saja sangat menguras waktu. Untuk mengatasi hal tersebut, menggunakan framework bisa jadi salah satu solusi untuk menyelesaikan proses tersebut menjadi lebih singkat.
2. Mudah untuk pemula
Cukup dengan menguasai bahasa pemrograman HTML dan CSS, Anda sudah bisa membuat desain tampilan website yang baik dengan bantuan framework. Selain itu, biasanya framework sudah memiliki dokumentasi yang cukup jelas untuk para pemula. Sehingga Anda bisa langsung mengikuti tutorial dan membuat desain Anda sesuai keinginan.
3. Sudah Memiliki Grid
Grid merupakan struktur yang berbentuk garis horizontal dan vertikal maupun diagonal. Garis tersebut biasanya membentuk kolom dengan jarak yang sama dalam sebuah layar. Grid ini berfungsi untuk memudahkan Anda untuk mengatur setiap elemen agar lebih rapi dan terstruktur.
Salah satu tantangan para front-end developer adalah menyatukan setiap elemen, mulai dari tombol, text, navigasi, menu, responsif dan sebagainya. Hal tersebut bisa saja sangat menguras waktu. Untuk mengatasi hal tersebut, menggunakan framework bisa jadi salah satu solusi untuk menyelesaikan proses tersebut menjadi lebih singkat.
2. Mudah untuk pemula
Cukup dengan menguasai bahasa pemrograman HTML dan CSS, Anda sudah bisa membuat desain tampilan website yang baik dengan bantuan framework. Selain itu, biasanya framework sudah memiliki dokumentasi yang cukup jelas untuk para pemula. Sehingga Anda bisa langsung mengikuti tutorial dan membuat desain Anda sesuai keinginan.
3. Sudah Memiliki Grid
Grid merupakan struktur yang berbentuk garis horizontal dan vertikal maupun diagonal. Garis tersebut biasanya membentuk kolom dengan jarak yang sama dalam sebuah layar. Grid ini berfungsi untuk memudahkan Anda untuk mengatur setiap elemen agar lebih rapi dan terstruktur.
4. Open Source Code
Hampir semua CSS Framework bersifat open source, sehingga memudahkan pengembangan framework itu sendiri. Selain itu, komunitas ini terbilang cukup besar, sehingga kode yang dibuat sudah minim dari error dan typo yang tidak perlu.
5. Tampilan yang sudah responsiv
Dengan mengetikkan coding secara manual, biasanya website yang dibuat tidak akan responsive atau tampilannya menyesuaikan dengan gadget yang digunakan. Jika ingin membuatnya menjadi responsive perlu ada pengetikkan coding yang panjang dan disesuaikan berdasarkan masing-masing ukuran yang tentunya akan terasa ribet. Namun, dengan Framework CSS, biasanya tampilan apa pun yang dibuat akan dapat dengan mudah menyesuaikan dengan gadget yang digunakan tanpa perlu coding tambahan.
Hampir semua CSS Framework bersifat open source, sehingga memudahkan pengembangan framework itu sendiri. Selain itu, komunitas ini terbilang cukup besar, sehingga kode yang dibuat sudah minim dari error dan typo yang tidak perlu.
5. Tampilan yang sudah responsiv
Dengan mengetikkan coding secara manual, biasanya website yang dibuat tidak akan responsive atau tampilannya menyesuaikan dengan gadget yang digunakan. Jika ingin membuatnya menjadi responsive perlu ada pengetikkan coding yang panjang dan disesuaikan berdasarkan masing-masing ukuran yang tentunya akan terasa ribet. Namun, dengan Framework CSS, biasanya tampilan apa pun yang dibuat akan dapat dengan mudah menyesuaikan dengan gadget yang digunakan tanpa perlu coding tambahan.
Kekurangan Menggunakan CSS Framework
1. Akan banyak kode yang tidak terpakai
Dalam membuat sebuah website, bisa saja para developer tidak membutuhkan beberapa elemen yang disediakan oleh framework. Sedangkan, beberapa pengembang lain mungkin membutuhkan code yang tidak Anda butuhkan.Jika Anda merupakan sebuah developer yang sudah ahli, bisa saja Anda menghapus beberapa code yang tidak dibutuhkan oleh website / aplikasi Anda.
2. Akan sulit untuk mengembangkan desain sendiriSetiap framework memiliki kode standar yang mereka kembangkan sendiri. Beberapa diantaranya membatasi Anda untuk merancang desain sesuai keinginan Anda, misal mengubah layout untuk tombol, lebar grid, dan lain-lain. Selain itu, saat menggunakan sebuah framework, Anda akan cenderung stuck dengan model yang begitu saja.
Macam-macam CSS Framework
Bootstrap
Bootstrap merupakan salah satu CSS terpopuler di kalangan programmer. Bootstrap adalah public open source gratis yang diperkenalkan oleh Twitter. Dan tentunya, Twitter sendiri juga menggunakan Bootstrap ini untuk CSS Framework mereka. Dengan menggunakan Bootstrap, Anda dapat mendesain website dengan lebih cepat, mudah, dan rapi. Bootstrap juga dilengkapi dengan kelebihan Anda bisa mendownload source code framework Bootstrap. Beberapa fitur lain yang dimiliki Bootstrap antara lain adalah fitur button dan typography, fluid container, responsiveness, form, grid system, JavaScript Toolkit (tooltip, dropdown menu, modal, dll), serta layout tampilan website.
Foundation
Foundation merupakan CSS framework dari ZURB yang diciptakan pada tahun 2011. Foundation mengklaim bahwa framework ini ditujukan untuk kalangan profesional. Dimana biasanya dibutuhkan untuk pengkodingan HTML email yang membutuhkan tampilan menarik. Foundation juga memiliki hampir semua fitur yang diperlukan sebuah framework, antara lain mudah dibaca, dapat disesuaikan, mobile-first, aksesibilitas yang tinggi, desain yang responsif dan lebih cepat, sehingga mudah untuk merancang situs web dan aplikasi ketika diakses dari perangkat apa saja.Bulma
Bulma merupakan open source CSS framework berbasis Flexbox yang sangat modern dan telah digunakan oleh lebih dari 200.000 developers. Hampir sama dengan kebanyakan framework, Bulma memiliki keunggulan framework yang responsif, . Keunggulan lainnya, Bulma sangat membantu memudahkan berbagai hal, karena Bulma memiliki kelengkapan yang sudah tersedia dan siap untuk digunakan. Bulma memiliki kelebihan layout yang kreatif dan variatif pada setiap halaman website, memiliki grid system yang sederhana, sangat mudah dipelajari, sangat cepat jika ingin dikustomisasi, full screen vertical centering, tidak memerlukan JavaScript, serta memiliki komunitas pengguna yang cukup besar.Semantic-UI
Jika Anda ingin membuat desain web yang cantik dengan cepat, maka Semantic-UI adalah jawabannya. Dengan HTML yang human-friendly, Semantic-UI memiliki kelebihan-kelebihan lain seperti HTML yang ringkas, JavaScript yang intuitif, debugging yang sederhana, memiliki variabel tema yang tinggi sehingga memudahkan Anda membuat variasi desain web secara lengkap. Semantic-UI memiliki koleksi, tampilan, dan modul yang mencakup keseluruhan interface design. Semantic-UI juga dirancang sangat responsif, sehingga variasi elemen-elemen yang dibangun dapat disesuaikan dengan fleksibel oleh penggunaan tablet dan seluler.UIKit
UIKit merupakan framework yang ringan dan modular untuk membuat interface web yang cepat dan kuat. Jika Anda menginginkan sebuah interface web yang mengusung tema minimalis, maka framework ini cocok digunakan. UIKit diciptakan oleh YOOtheme pada tahun 2013. Walaupun terkesan minimalis, tapi UIKit juga memiliki hampir seluruh fitur-fitur yang dibutuhkan oleh sebuah framework. UIKit mendukung sistem pengkodingan yang cepat namun tetap dapat membuat tampilan website lebih menarik dan minimalis.Blueprint
Blueprint merupakan open source framework yang dikembangkan oleh Palantir. Blueprint merupakan toolkit UI yang berbasis-React untuk website. Blueprint mengoptimalkan membangun interface web yang padat data untuk aplikasi desktop yang berjalan melalui browser. Blueprint bukan merupakan toolkit UI mobile-first.Skeleton
Skeleton sangat cocok digunakan untuk proyek web dengan skala kecil, atau tidak memerlukan semua utilitas framework yang besar. CSS Skeleton sangat cocok digunakan bagi pengguna yang lebih gemar mengakses web dari perangkat smartphone. Skeleton memiliki beberapa elemen HTML standar namun telah memuat fitur-fitur yang lebih dari cukup untuk memulai sebuah website. Skeleton memiliki kemampuan responsif yang sangat baik, sehingga sangat baik diakses melalui mobile phone, terutama Android smartphone.Pure CSS
Framework Pure CSS sangat cocok digunakan bagi developer yang masih pemula dalam mempelajari CSS. Pure CSS sangat mudah dioperasikan serta Anda dapat memilih jenis Pure CSS yang ingin dipelajari. Modul dalam Pure CSS sangat kecil dan dikemas dalam format file Gzip yang minim namun efisien, bahkan Anda dapat menghemat hingga beberapa byte jika dibandingkan dengan framework yang lain. Pure CSS memiliki keunggulan tampilan yang menarik, grid yang responsif, serta cocok digunakan untuk berbagai browser. Anda dapat menyesuaikan pengaturan framework Pure CSS dengan proyek yang sedang Anda jalankan.Materialize
Materialize membuat desain web menjadi semakin menarik. Dengan banyaknya fitur yang disediakan, akan memudahkan developer untuk membuat website yang responsif namun menarik. Selain itu, dengan fitur-fitur ini, CSS framework Materialize mampu mempertahankan performa website dengan baik. Materialize sangat modern, dan didesain dengan sangat spesifik sehingga dapat digunakan untuk memudahkan berbagai keperluan pekerjaan. Materialize mengusung pengembangan website yang cepat, sangat berfokus pada user experience, serta mudah dikerjakan.Gumby
Gumby adalah salah satu CSS Framework yang mudah untuk digunakan. Selain itu, Gumby cukup menarik karena memiliki ciri khas desain dengan dokumentasi online. Secara garis besar, Gumby memiliki fitur-fitur yang hampir sama dengan Bootstrap, yaitu memiliki UI. Selain itu, Gumby juga didukung oleh SASS, memiliki tata letak halaman yang cepat dan logis, serta memiliki prototipe aplikasi dengan sistem grid yang fleksibel dan responsif. Namun sayangnya, saat ini Digital Surgeons telah memutuskan pensiun dari Gumby Framework, namun jangan ragu untuk terus menggunakan framework ini walaupun pengembangannya telah berhenti.
Selain materi di atas, silahkan teman - teman wajib juga mempelajari referensi berikut untuk lebih paham mengenai CSS styling dan CSS Framework.
Last modified: Monday, 13 February 2023, 10:40 AM
