Cara Terbaik untuk Belajar CSS

CSS bekerja bergandengan tangan dengan HTML; HTML menyortir struktur halaman, CSS membuatnya tampak cantik dan menambahkan level interaksi yang halus. Sebagai seorang web desainer, kamu harus benar-benar menguasai kedua bahasa ini. Bahkan jika kamu tidak melakukan coding sendiri, memahami cara kerjanya akan membantumu mendesain untuk web.

Memahami Dasar-dasarnya: Apa itu CSS?

C.S.S. singkatan dari Cascading Style Sheets; dokumen yang berisi aturan styling untuk diterapkan ke HTML (atau XML, bersama dengan beberapa format struktural lainnya). Aturan beberapa style dapat mengarah ke satu elemen HTML, dalam hal mana yang perlu cara untuk menentukan aturan mana yang akan berlaku. Istilah cascading menggambarkan proses penyaringan kebawah dari aturan umum, sampai aturan yang paling spesifik ditemui. Aturan itu kemudian dipilih untuk melakukan tugasnya ..

Melalui CSS, presentasi dapat dipisahkan dari struktur. Ini mengatasi kebutuhan untuk menumbuk aturan styling di antara HTML, seperti ini:

yang mana membuat dokumen lebih rapi dan DRY.

CSS dibaca oleh browser web. Mereka mengambil dokumen markup, lalu mereka menerapkan aturan styling ke elemen-elemen di dalam dokumen itu.

Mereka tidak selalu menginterpretasikan aturan style yang sama satu sama lainnya, dan karena browser berkembang demikian pula dukungan mereka terhadap proposal styling yang lebih baru. Seringkali produsen browser sendiri yang bereksperimen dengan properti CSS, dengan harapan saran mereka akan diadopsi oleh pengguna.

Pada akhirnya, itu tergantung pada World Wide Web Consortium (W3C) apakah properti CSS distandarkan atau tidak.

Memahami Dasar: Pelajari Sintaksnya

Sintaks CSS terdiri dari beberapa bagian yang mendasar; aturan, selector, deklarasi, properti, dan nilai.

Aturan CSS ini berisi semua bit dan bobs lain yang baru saja kita sebutkan.

Selector menunjuk pada elemen dalam markup HTML, kemudian deklarasi dalam kurung kurawal menentukan bagaimana elemen-elemen tersebut harus ditata. Ada beberapa deklarasi dalam satu aturan; setiap deklarasi yang terdiri dari properti dengan nilai terkait.

Ada banyak cara kamu dapat memilih elemen HTML, dari type selector langsung:

Lalu kita memiliki class selector, yang menunjuk ke semua elemen dengan class khusus yang diterapkan pada mereka. Lihatlah markup ini, dengan CSS yang sesuai:

Catatan: bertentangan dengan apa yang mungkin kamu dengar, tidak ada yang namanya class CSS. Ada selector CSS yang menargetkan class HTML. Kamu dapat membaca lebih lanjut tentang ini di tantek.com dan 456 Berea St.

Ada banyak sekali kemungkinan selector untuk dipelajari. Bahkan ada lebih banyak properti yang bisa digenggam (lihat daftar ini di situs W3C). Kemudian kita akan melihat tugas-tugas di mana kamu akan diminta untuk banyak belajar dari masing-masingnya. Miliki sebanyak mungkin di ujung jarimu akan membuatm menjadi pengkode CSS yang lebih baik!

Tugas 1: Ikuti Kursus Pemula

Sekarang kamu memiliki pemahaman mendasar tentang apa itu CSS, saatnya untuk menyelam dengan benar. Ada sejumlah kursus pemula online yang akan membantumu; di sini hanya rangkaian yang pasti patut untuk dicoba:

• Code Academy Pengantar CSS adalah bagian dari kursus Dasar-dasar Web mereka. Jika perjanjian dan hadiah yang kamu harapkan maka semua program Code Academy diberikan oleh beban bucket. Ikuti, bebas biaya, selesaikan tes interaktif untuk mendapatkan umpan balik dan saran instan.

• Tuts+ Premium 30 Hari Belajar HTML & CSS akan akrab bagimu jika kamu secara garis besar mengikuti Cara Terbaik Belajar HTML kami. Selama kursus gratis ini, Jeffrey Way membawamu melalui dasar-dasar HTML dan CSS, dari awal secara mutlak.

• Code School CSS Lintas Negara menawarkan aspek interaktif yang serupa dengan Code Academy, meskipun untuk menyelesaikan kurikulum, kamu harus menjadi anggota terdaftar (saat ini $25 per bulan).

Tugas 2: Memberikan Style Sesuatu, Beberapa Kali

Ketika Dave Shea meluncurkan CSS Zen Garden pada Mei 2003, ia bertujuan untuk menunjukkan bahwa satu dokumen HTML dapat ditata dengan cara tak terbatas menggunakan stylesheet yang berbeda. Itu adalah konsep yang brilian dan momen bola lampu yang nyata bagi para desainer di seluruh dunia.

Mengapa tidak melakukan sesuatu yang serupa dengan dirimu sendiri? Ambil sepotong markup sederhana (Navigasi Daftar Tidak Berurutan Chris Coyier adalah kandidat yang sempurna):

1

<nav>

2

  <ul>

3

		<li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a></li>

4

		<li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a></li>

5

		<li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a></li>

6

		<li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a></li>

7

		<li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a></li>

8

	</ul>

9

</nav>

Lihat berapa banyak efek berbeda yang dapat kamu capai, hanya dengan mengubah gaya.

Lihatlah Workshop Komunitas Webdesigntuts+ ini di mana hampir 100 pembaca mengirimkan stylesheet mereka untuk daftar sederhana yang tidak diurutkan. Seperti yang akan kamu lihat dari hasilnya, sedikit imajinasi dapat membawa jauh CSS!

Tugas 3: Ikuti Master

Jika orang-orang tahu CSS, mereka men-tweet tentang itu - itulah fakta sains. Perhatikan apa yang dilakukan selebriti CSS dan kamu akan belajar banyak. Berikut adalah beberapa pengguna twitter yang sebaiknya kamu ikuti:

• @chriscoyier
• @csswizardry
• @smashingmag
• @snookca
• @MeyerWeb
• @zeldman
• @simplebits
• @nettuts (tentu saja)
• @wdtuts (kamu belum?)

.. dan...

• Berlangganan newsletter css-weekly.com untuk mendapatkan email yang berisi CSS, masuk ke kotak masukmu setiap minggunya.

Tambahan

Mengapa tidak menemukan pahlawanmu sendiri di situs pengkodean sosial seperti GitHub atau CodePen? Hal terbaik tentang jaringan seperti ini adalah saran yang diberikan oleh setiap orang; jika kamu memiliki masalah CSS, seseorang akan memilikinya sebelum kamu dan akan bersedia mengulurkan tangan.

Tugas 4: Mencari Dukungan Browser

Seperti yang telah disebutkan sebelumnya, browser tidak selalu menafsirkan style-mu dengan sama. Ini terutama berlaku jika kamu melayani versi Internet Explorer yang lebih lama, yang jauh ketinggalan dari segi adopsi CSS. Browser modern (seperti Google Chrome, Mozilla Firefox, Apple Safari, Opera, dan bahkan Internet Explorer 10) memiliki manajemen pembaruan yang lebih proaktif, sehingga mengurangi kemungkinan versi lama beredar dalam jangka yang lama.

Sebagaiaman yang dikatakan, ada perbedaan antara masing-masing browser ini terlepas dari bagaimana pembaharuan mereka terjadi. Beberapa CSS akan didukung dengan baik di satu browser, berbeda ditafsirkan di yang lain, jadi untuk alasan ini, itu adalah nasihat yang bagus untuk memperhatikan browser.

Berikut adalah beberapa sumber daya yang berguna yang akan membantumu dalam perjalananmu:

• BrowserStack cukup sederhana sebagai alat pengujian lintas-browser terbaik yang tersedia saat ini. Gunakan ini untuk melihat bagaimana berbagai browser dan platform berbeda dengan CSS-mu.
• Cara Mengatasi Prefiks Vendor oleh Chris Coyier mencakup dasar-dasarnya.
• Prinsip-prinsip Coding CSS Cross-Browser di Smashing Magazine mencakup beberapa kemungkinan masalah CSS yang akan kamu temui ketika menangani beberapa browser.
• Can I Use ... adalah situs web yang tak ternilai untuk memeriksa properti CSS mana yang didukung di browser mana saja.
• Prefixr mengubah CSS-mu ke sintaks lintas-browser yang ramah. Jika properti yang kamu gunakan membutuhkan awalan khusus browser tertentu, Prefixr akan membantumu. Ini benar-benar hanya relevan jika kamu menggunakan properti CSS3.
• Prefixfree adalah tool yang mirip dengan Prefixr, yang ini "memungkinkanmu hanya menggunakan properti CSS yang tidak diperbaiki di mana-mana. Berfungsi di balik layar, menambahkan awalan browser saat ini ke kode CSS apa pun, hanya jika diperlukan."

Tugas 5: Membaca buku

Baik kamu membacanya dari awal sampai akhir, atau hanya memilikinya untuk diserahkan jika kamu membutuhkan referensi cepat, buku-buku industri terbaik tidak ada bandingannya untuk belajar.

CSS telah ditulis beberapa kali, tetapi publikasi ini adalah krim hasil panen saya:

• HTML and CSS Book adalah panduan yang diilustrasikan dengan indah untuk pemula secara mutlak, ditambah situs ini membuat semua cuplikan kode dan contoh tersedia untuk dimainkan.
• CSS: The Definitive Guide oleh Godfather CSS, Eric Meyer.
• CSS: The Missing Manual sudah berumur beberapa tahun sekarang (dalam istilah teknis) tetapi masih dianggap oleh banyak orang sebagai buku pembuka untuk dasar-dasar CSS.
• CSS3 for Web Designer oleh Dan Cederholm (yang akan kamu ikuti di Twitter setelah Tugas 3, kan?) adalah salah satu buku A Book Apart awal. Bukan untuk pemula secara mutlak, tetapi dapatkan itu sebagai paperback meskipun demikian.
• Essentials CSS (Book) dari Smashing Magazine.

Tugas 6: Suss Keluar Selector dan Spesifitas

Ketika kamu mendapatkan kepercayaan, kosakata CSS-mu akan tumbuh. Kamu akan menyerahkan properti CSS ke memori dan juga berbagai cara untuk memilih elemen. Sekarang saatnya untuk benar-benar mengubahnya dan mempelajari beberapa selector CSS.

• 30 Selector CSS yang Harus Kamu Hafalkan pada Nettuts+ benar-benar telah mencakupmu.
• Almanak Selector pada CSS Trik untuk penguatan

Mempelajari selector CSS berarti juga mengatasi spesifitas.

Selector mana yang akan mengesampingkan yang lain? Apa sintaks minimum yang harus saya gunakan di pemilih saya agar efisien dalam pengkodean saya? Satu tempat yang selalu saya suruh orang-orang untuk mempelajari aturan spesifitas adalah Andy Clarke CSS: Specificity Wars. Visualisasi yang terinspirasi tentang bagaimana tarif selector ongkos ketika diadu satu sama lain (dan kekuatan gelap).

Tugas 7: Mempertimbangkan lebih lanjut

CSS adalah disiplin yang sangat diperlukan. Setelah kamu memiliki dasar-dasar di bawah ikat pinggangmu, ada banyak jalan untuk penyelidikan lebih lanjut. Sebagai contoh:

CSS3

CSS3 terus bergerak. Properti baru diadopsi, yang lain dijatuhkan sama sekali oleh browser, kadang-kadang bahkan sintaksnya berubah. Mengatasi masalah dengan CSS Gradients, akan menjadi paku lain di peti mati penggunaan Photoshop-mu; mengapa menggunakan potongan gambar ketika kamu bisa CSS itu?!

Lihat CSS3 Please untuk melihat semua implementasi CSS3 yang benar, dengan fallback yang disarankan untuk browser yang tidak mendukung. Juga, lihat CSS3 Essentials di Tuts+ Premium untuk memberikan pengetahuanmu dorongan.

Media Query

Desain Web Responsif memungkinkan tata letak web-mu yang tidak pasti dapat berubah, tergantung pada bagaimana halaman diakses. CSS3 media query membantu proses ini, memberikan aturan CSS yang berbeda tergantung pada keadaannya. Lihatlah Desain Web Responsif: Panduan Visual untuk memulai.

CSS Preprocessors

Ternyata CSS bisa lebih baik. Setelah kamu mulai menggunakan CSS untuk proyek-proyek dunia nyata, Kamu mungkin akan menarik kesimpulan yang sama. Mempertahankan file CSS yang besar itu sulit, pengulangan adalah hal biasa - dan mengapa kamu tidak bisa menggunakan variabel untuk menyimpan nilai warna HEX daripada mengetiknya berulang-ulang?! CSS preprocessors seperti Sass, LESS dan Stylus memecahkan semua masalah ini dan banyak lagi. Tanpa harus "belajar kembali" bahasa yang sama (hanya menempel pada vanilla CSS jika kamu mau), kamu dapat memanfaatkan kekuatan preprocessors.

Lihat Get Into LESS, Mastering SASS dan Sass vs. LESS vs. Stylus: Preprocessor Shootout jika kamu tertarik untuk mempelajari lebih lanjut.

SMACSS

SMACSS (atau Scalable and Modular Architecture for CSS) adalah konsep yang dikembangkan oleh Jonathan Snook, yang bertujuan untuk memerangi pemeliharaan file CSS yang canggung. Itu tidak mengajarkan bahasa baru, melainkan menyarankan cara-cara di mana kamu dapat membuat CSS-mu saat ini lebih terorganisir.

Menulis CSS modular memungkinkanmu untuk mengambil potongan kode  style dan memasukkannya ke dalam proyek lain, tanpa merusak sisa style-mu. Manajemen spesifisitas yang terbaik.

Kesimpulan

Tidak diragukan lagi bahwa dengan keterampilan seperti HTML dan CSS di bawah ikat pinggangmu, kamu akan menjadi perancang web yang jauh lebih baik. Ikuti dua proses pembelajaran yang telah kami uraikan dan kamu akan baik-baik saja dalam perjalananmu.

Jika kamu memiliki rekomendasi pembelajaran CSS, beri tahu mereka di komentar!