Tutorial CSS

TUTORIAL CSS

CSS adalah bahasa Cascading Style Sheet dan biasanya digunakan untuk mengatur tampilan elemen yang tertulis dalam bahasa markup, seperti HTML. CSS berfungsi untuk memisahkan konten dari tampilan visualnya di situs.
CSS adalah bahasa kedua setelah HTML yang harus dipelajari seorang web developer.

CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.

Tags, seperti <font>, diperkenalkan di HTML versi 3.2, dan ketika itu menyebabkan banyak masalah bagi developer. Karena website memiliki berbagai font, warna background, dan style, maka untuk menulis kembali (rewrite) kode memerlukan proses yang sangat panjang dan sulit. Oleh sebab itu, W3C membuat CSS untuk menyelesaikan masalah ini.

HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.

Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website. Tentunya Anda tidak ingin website terlihat seperti situs yang ‘telanjang’ tanpa modifikasi apa pun, bukan?

KELEBIHAN CSS

Mudah bagi Anda untuk mengetahui mana website yang menggunakan CSS dan mana yang tidak.

Anda pasti pernah membuka website, tapi sesaat kemudian gagal loading dan malah menampilkan background putih yang didominasi teks hitam dan biru. Situasi ini menggambarkan bahwa CSS pada situs tersebut tidak dapat di-load dengan benar atau situs sama sekali tidak memiliki CSS. Umumnya, situs seperti ini hanya menerapkan HTML.

Sebelum menggunakan CSS, semua stylizing harus disertakan ke dalam markup HTML. Itu berati Anda harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah.

Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu menentukan style, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah di-maintain.

Singkatnya, dengan CSS, Anda tidak perlu mendeskripsikan tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir.

Karena opsi kustomisasi yang ada hampir tak terbatas, CSS memungkinkan Anda untuk menerapkan berbagai macam style pada satu halaman HTML.

CARA KERJA CSS

CSS menggunakan bahasa Inggris sederhana berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti yang telah kami sebutkan sebelumnya, HTML tidak dibuat untuk menerapkan elemen style, hanya markup halaman saja. HTML dirancang semata-mata untuk mendeskripsikan konten. Sebagai contoh: <p>This is a paragraph.</p>.

Satu yang menjadi pertanyaannya sekarang, bagaimana caranya style paragraf? Struktur syntax CSS cukup sederhana. Struktur ini memiliki selector dan declaration block. Pilih elemen yang diinginkan, kemudian deklarasi (declare) yang harus Anda lakukan terhadap elemen tersebut. Sangat mudah, kan?

Ada berbagai rule yang harus diingat. Meskipun demikian, rule struktur cukup simpel dan sederhana.

Selector mengarah ke elemen HTML yang ingin Anda ubah tampilannya. Declaration block memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.

Setiap deklarasi menyertakan nama dan value dari properti CSS, yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.

Mari kita lihat contoh di bawah ini:

Semua elemen <p> ditandai dengan warna biru dan hurufnya ditebalkan (bold).

1. <style>
2. p {
3. color: blue;
4. text-weight: bold;
5. }
6. <style>

Contoh lain, semua elemen <p> diposisikan di tengah (center-aligned), dengan lebar 16x, dan berwarna pink.

1. <style>
2. p {
3. text-align: center;
4. font-size: 16px;
5. color: pink;
7. }
8. </style>

Lihat CSS cheat sheet untuk contoh yang lain.

Menggabungkan File HTML & CSS

Ketika ingin membuat sebuah gaya pada situs HTML tentu memerlukan file CSS sebagai lembar gaya HTML tersebut. Ada 3 cara menggabungkan file HTML dan CSS, dalam penggunaan CSS ini yaitu: CSS Inline, CSS Internal dan CSS Eksternal.

Apa Itu CSS Inline ?
CSS Inline adalah lembar gaya HTML yang diterapkan langsung pada baris / tag HTML yang bersangkutan, misalnya seperti ini: <img style="width: 120px;" src="images/dua.jpg">.

Pembuatannya cukup tambahkan style=”” dan nilai style nya pada masing-masing tag HTML, style itu akan berpengaruh hanya untuk tag itu saja.

Apa Itu CSS Internal ?
CSS Internal adalah lembar gaya / CSS yang diterapkan didalam satu file bersama HTML.

Metode ini tidak memerlukan lembar CSS yang pada umumnya biasa disimpan dengan nama style.css karena CSS nya sudah diterapkan didalam bersamaan dengan file HTML.

Contohnya seperti ini:

Silahkan copy paste kode berikut jika ingin menggunakan CSS Internal, pastikan mengganti source nya sesuai dengan nama file yang telah kamu buat sebelumnya.

<!DOCTYPE html>
<html>
<head>
   <title>Tutorial Scroll Dalam Div PMD Sesawi-AK</title>
</head>

<style type="text/css">
   .satu {
      max-width: 350px;
      height: 70vh;
   }
   .dua {
      height: 100%;
      overflow: auto;
   }
</style>

<body>

<div class="satu">
   <div class="dua">
      <p>Lorem Ipsum adalah contoh teks atau dummy dalam industri percetakan dauf elektroni 5 abad, tapi juga telah beralih ke penataan huruf elektrop Publishing sepertem Ipsum.</p>
   </div>
</div>
</body>
</html>

style nya diletakkan didalam file HTML di sebelum tag pembguka <body>, hal ini lumayan merepotkan jika file HTML nya panjang dan style nya juga panjang tapi dalam pencarian code tidak perlu buka tutup file karena ada didalam file yang sama.

CSS Internal ini adalah cara yang digunakan oleh Blogspot, jika kalian pernah melihat codingan Blogspot pasti pernah melihat cara seperti ini. Berbeda dengan tema WordPress yang rata-rata menggunakan CSS Eskternal.

Apa Itu CSS Eksternal ?
CSS Eksternal sangat disarankan penggunaannya dalam membuat suatu website berbasis HTML CSS.
CSS Eksternal adalah file CSS / lembar gaya yang disimpan di file berbeda, dalam penggunaannya perlu memanggil file CSS tersebut di dalam <head> HTML seperti ini: <head> <title>Membuat Website - HTML PMD Sesawi-AK</title> <link href="css/style.css" type="text/css" rel="stylesheet"> </head>.

Pada code tersebut artinya kita memanggil file CSS (disini nama file nya style.css) yang berada didalam folder CSS (css/style.css), dengan cara seperti ini maka setiap perubahan pada CSS akan berdampak pada file HTML yang bersangkutan.

Tips Belajar CSS

Ada beberapa tips yang ingin saya bagikan untuk membantu teman-teman dalam belajar CSS:

Tips #1: Cara Menghapal Kode dan Properti CSS

Ada ratusan properti CSS yang harus diingat.

Apakah kita akan mampu menghapal semuanya?

Tergantung…

Jika kamu sering mengetik kode CSS tanpa copas, bisa jadi ingatanmu terhadap kode atau properti CSS akan semkkin kuat.

Tips #2: Gunakan Inspect Elemen

Inspect elemen ada di setiap browser. Bisa dibuka dengan Klik kanan, lalu pilih Inspect Element.

Di inspect elemen, kita bisa menulis kode CSS secara langsung dan hasilnya pun akan langsung kita ketahui.

Tups #3: Gunakan Cheat Sheet

Cheat Sheet adalah halaman yang berisi contekan kode CSS.

Tunggu dulu…

Contekan?

Apakah boleh?

Ya tentu saja boleh.

Ini kan bukan ujian.

Kamu bisa mencari cheat sheet CSS di Google dengan kata kunci “CSS Cheat Sheet”.

Silahkan di-download, lalu di-print.

Setelah itu bisa ditempel di depan meja atau ditaruh di atas meja.

Kapanpun butuh contekan, kita bisa melihatnya. 

Apa Selanjutnya?

Kita sudah mengenal hal dasar dalam CSS seperti:

1. Stuktur Dasar CSS yang terdiri dari
   • Selektor;
   • Blok deklarasi;
   • dan properti.
2. Cara menulis CSS di HTML.

Lalu apa selanjutnya?

Selanjutnya silahkan pelajari lebih dalam tentang Selektor dan latihan dengan beberapa properti yang sering digunakan.

Kesimpulan
Setiap CSS memiliki penggunaan yang berbeda, CSS Inline tidak memerlukan nama class atau id karena style langsung didalam tag yang bersangkutan. Sedangkan CSS Internal dan Eksternal perlu memanggil nama class / id / tag yang ingin disesuaikan, jika tidak maka tidak akan berfungsi.

CSS dibuat untuk dapat bekerja bersama dengan bahasa markup seperti HTML. Biasanya CSS digunakan untuk mengatur tampilan halaman.

Ada tiga style di CSS, dan untuk menerapkan CSS di banyak halaman pada waktu bersamaan, gunakan External style.

Saat ini sudah banyak website yang menggunakan CSS. Hal ini dikarenakan CSS adalah salah satu bahasa markup yang diwajibkan ada.