Cara Belajar Css Dengan Cepat

Indonesian (Bahasa Indonesia) translation by
Andy Nur
(you can also view the original English article)

CSS bekerja bergandengan tangan dengan HTML; HTML menyortir struktur pekarangan, CSS membuatnya terlihat elok dan menambahkan level interaksi yang halus. Sebagai seorang web ahli grafis, kamu harus benar-benar menguasai kedua bahasa ini. Malah jika kamu tidak berbuat coding koteng, mengerti cara kerjanya akan membantumu mendesain untuk web.


Memafhumi Bawah-dasarnya: Apa itu CSS?

C.S.S. kependekan dari
Cascading Style Sheets; sertifikat nan kebal resan styling untuk diterapkan ke HTML (atau XML, bersama dengan sejumlah format struktural lainnya). Aturan beberapa style dapat berkiblat ke satu atom HTML, privat situasi mana yang teradat kaidah untuk menentukan aturan mana yang akan berlaku. Istilah
cascading
menggambarkan proses seleksi kebawah dari sifat umum, hingga rasam yang paling eksklusif ditemui. Aturan itu kemudian dipilih bikin berbuat tugasnya ..

Melalui CSS, penyajian bisa dipisahkan dari struktur. Ini mengatasi kebutuhan kerjakan menumbuk aturan styling di antara HTML, seperti ini:

css-best-font-size
css-best-font-size
css-best-font-size
Pengajuan dalam struktur. EW.

yang mana membuat sertifikat bertambah rapi dan DRY.

CSS dibaca makanya browser web. Mereka cekut dokumen markup, lalu mereka menerapkan aturan styling ke elemen-molekul di dalam sertifikat itu.

css-best-browser
css-best-browser
css-best-browser

Mereka tidak sering menginterpretasikan aturan style nan sebanding suatu setinggi lainnya, dan karena browser berkembang demikian sekali lagi dukungan mereka terhadap tawaran styling yang lebih baru. Seringkali penyusun browser koteng yang bereksperimen dengan milik CSS, dengan harapan saran mereka akan diadopsi maka itu pengguna.

Pada hasilnya, itu tergantung lega World Wide Web Consortium (W3C) apakah nasib baik CSS distandarkan atau tidak.


Memahami Dasar: Pelajari Sintaksnya

Sintaks CSS terdiri berpangkal beberapa bagian nan mendasar; aturan, selector, deklarasi, hoki, dan ponten.

css-best-rule
css-best-rule
css-best-rule

Rasam CSS ini sakti semua bit dan bobs lain nan bau kencur saja kita sebutkan.

css-best-selector-declaration
css-best-selector-declaration
css-best-selector-declaration

Selector menunjuk pada unsur dalam markup HTML, kemudian deklarasi privat kurung kurawal menentukan bagaimana anasir-elemen tersebut harus ditata. Ada sejumlah deklarasi dalam suatu aturan; setiap deklarasi yang terdiri dari hak dengan nilai terkait.

css-best-property-value
css-best-property-value
css-best-property-value

Ada banyak cara sira dapat mengidas partikel HTML, dari
type selector
langsung:

css-best-type-selector
css-best-type-selector
css-best-type-selector
Ini akan memilih semua rang dan menerapkan padding hampa buat semuanya.

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

css-best-class-selector-markup
css-best-class-selector-markup
css-best-class-selector-markup
Berikut ini anchor (link), yang mungkin ada banyak ..
css-best-class-selector
css-best-class-selector
css-best-class-selector
.. maka ini akan memilih semua anchor dengan class “highlight” dan menjadikannya lembayung.

Karangan: bertentangan dengan segala apa nan barangkali kamu dengar, tidak suka-suka yang namanya
class CSS. Cak semau
selector CSS
yang menjadwalkan
class HTML. Kamu dapat membaca lebih jauh tentang ini di tantek.com dan 456 Berea St.

Ada banyak sekali kemungkinan selector untuk dipelajari. Bahkan suka-suka makin banyak properti yang bisa digenggam (lihat daftar ini di situs W3C). Kemudian kita akan mematamatai tugas-tugas di mana ia akan diminta lakukan banyak membiasakan berpunca masing-masingnya. Miliki sebanyak boleh jadi di ujung jarimu akan membuatm menjadi pengkode CSS yang lebih baik!


Tugas 1: Ikuti Cak bimbingan Pemula

Kini kamu n kepunyaan kognisi mendasar tentang barang apa itu CSS, saatnya bikin menyelam dengan ter-hormat. Cak semau bilang pelajaran pemula online yang akan membantumu; di sini namun relasi yang pasti patut lakukan dicoba:

  • Code Academy Pengantar CSS yaitu bagian berpunca kursus Dasar-sumber akar Web mereka. Jika perjanjian dan pemberian yang kamu harapkan maka semua program Code Academy diberikan oleh tanggung bucket. Ikuti, bebas biaya, selesaikan pembenaran interaktif untuk mendapatkan umpan erot dan saran instan.
css-best-codeacademy
css-best-codeacademy
css-best-codeacademy

  • Tuts+ Premium
    30 Hari Belajar HTML & CSS akan akrab bagimu kalau kamu secara garis besar menirukan Cara Terbaik Belajar HTML kami. Sejauh latihan cuma-cuma ini, Jeffrey Way membawamu melewati bawah-dasar HTML dan CSS, berbunga awal secara mutlak.
tutsplus
tutsplus
tutsplus

  • Code School CSS Lintas Negara menawarkan aspek interaktif yang serupa dengan Code Academy, meskipun bakal mengendalikan kurikulum, engkau harus menjadi anggota terdaftar (saat ini $25 per bulan).
css-best-codeschool
css-best-codeschool
css-best-codeschool


Tugas 2: Memberikan Style Sesuatu, Beberapa Kali

Momen Dave Shea meluncurkan CSS Zen Garden pada Mei 2003, ia berujud buat menunjukkan bahwa satu surat HTML dapat ditata dengan cara tak adv minim menunggangi stylesheet yang farik. Itu adalah konsep yang brilian dan ketika bohlam yang nyata bagi para desainer di seluruh manjapada.

css-best-zen
css-best-zen
css-best-zen

Mengapa tidak melakukan sesuatu nan serupa dengan dirimu sendiri? Ambil sepotong markup sederhana (Navigasi Daftar Tidak Bersambungan Chris Coyier yaitu kandidat nan lengkap):

Lihat berapa banyak efek berbeda yang dapat beliau ulur, saja dengan mengubah gaya.

Lihatlah Workshop Komunitas Webdesigntuts+ ini di mana damping 100 pembaca mengapalkan stylesheet mereka untuk daftar sederhana yang tidak diurutkan. Sebagai halnya yang akan kamu tatap semenjak kesudahannya, terbatas imajinasi dapat mengirimkan jauh CSS!





Pintu rahasia – oleh Noel Delgado

Tugas 3: Ikuti Temperatur

Jika sosok-orang luang CSS, mereka men-tweet akan halnya itu – itulah fakta sains. Perhatikan barang apa nan dilakukan selebriti CSS dan dia akan belajar banyak. Berikut yaitu beberapa pengguna twitter yang sebaiknya kamu ikuti:

  • @chriscoyier
  • @csswizardry
  • @smashingmag
  • @snookca
  • @MeyerWeb
  • @zeldman
  • @simplebits
  • @nettuts (pasti sekadar)
  • @wdtuts (beliau belum?)

.. dan…

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

Tambahan

Kok tak menemukan pahlawanmu sendiri di situs pengkodean sosial seperti GitHub maupun CodePen? Hal terbaik mengenai jaringan seperti ini adalah saran nan diberikan maka dari itu setiap individu; jika beliau memiliki masalah CSS, seseorang akan memilikinya sebelum kamu dan akan bersedia mengulurkan tangan.

css-best-codepen
css-best-codepen
css-best-codepen
CodePen

Tugas 4: Berburu Dukungan Browser

Seperti yang telah disebutkan sebelumnya, browser tidak pelahap mengingkari style-mu dengan sama. Ini terutama berlaku sekiranya kamu menyuguhkan varian Internet Explorer yang lebih lama, nan jauh ketinggalan dari segi adopsi CSS. Browser bertamadun (sebagai halnya Google Chrome, Mozilla Firefox, Apple Safari, Opera, dan bahkan Internet Explorer 10) n kepunyaan tata pembaruan nan lebih proaktif, sehingga mengurangi kebolehjadian versi lama beredar internal paser nan lama.

Sebagaiaman yang dikatakan, ada perbedaan antara per browser ini terlepas dari bagaimana peremajaan mereka terjadi. Beberapa CSS akan didukung dengan baik di satu browser, berlainan ditafsirkan di yang lain, jadi untuk alasan ini, itu merupakan wejangan nan bagus untuk memperhatikan browser.

Berikut yaitu beberapa sumber ki akal yang berguna yang akan membantumu privat perjalananmu:

  • BrowserStack cukup sederhana sebagai instrumen pengujian lintas-browser terbaik yang cawis ketika ini. Gunakan ini untuk meluluk bagaimana beraneka rupa browser dan platform berbeda dengan CSS-mu.
  • Prinsip Mengatasi Prefiks Vendor maka itu Chris Coyier mencakup bawah-dasarnya.
  • Prinsip-prinsip Coding CSS Cross-Browser di Smashing Magazine mencangam sejumlah prospek masalah CSS yang akan kamu temui saat menangani sejumlah browser.
  • Can I Use … adalah situs web yang tak terkirakan bagi menanyai nasib baik CSS mana yang didukung di browser mana cuma.
  • Prefixr memungkiri CSS-mu ke sintaks lintas-browser yang ramah. Jika hak yang kamu gunakan membutuhkan awalan khusus browser tertentu, Prefixr akan membantumu. Ini benar-benar hanya relevan kalau engkau menggunakan properti CSS3.
  • Prefixfree adalah tool yang mirip dengan Prefixr, yang ini “memungkinkanmu tetapi menggunakan properti CSS yang tidak diperbaiki di mana-mana. Berfungsi di balik layar, menambahkan awalan browser detik ini ke kode CSS apa kembali, doang jika diperlukan.”

Tugas 5: Membaca buku

Baik engkau membacanya bersumber awal sampai pengunci, atau sekadar memilikinya untuk diserahkan jika kamu membutuhkan bacaan cepat, muslihat-gerendel industri terbaik tidak ada bandingannya lakukan belajar.

css-best-css-book
css-best-css-book
css-best-css-book

CSS telah ditulis beberapa barangkali, belaka publikasi ini merupakan krim hasil panen saya:

  • HTML and CSS Book adalah panduan yang diilustrasikan dengan indah untuk pemula secara mutlak, ditambah situs ini menciptakan menjadikan semua cuplikan kode dan teoretis tersedia untuk dimainkan.
  • CSS: The Definitive Guide maka itu Godfather CSS, Eric Meyer.
  • CSS: The Missing Manual telah berumur bilang tahun sekarang (internal istilah teknis) saja masih dianggap oleh banyak orang sebagai buku pembuka cak bagi dasar-sumber akar CSS.
  • CSS3 for Web Designer makanya Dan Cederholm (yang akan kamu ikuti di Twitter setelah Tugas 3, centung?) adalah salah satu pokok A Book Apart awal. Bukan bagi pemula secara mutlak, hanya dapatkan itu perumpamaan paperback walaupun demikian.
  • Essentials CSS (Book) mulai sejak Smashing Magazine.

Tugas 6: Suss Keluar Selector dan Spesifitas

Ketika kamu mendapatkan kepercayaan, leksikon CSS-mu akan tumbuh. Kamu akan memberikan eigendom CSS ke album dan kembali berbagai prinsip buat memilih anasir. Sekarang saatnya untuk mendalam mengubahnya dan mempelajari bilang selector CSS.

  • 30 Selector CSS yang Harus Kamu Hafalkan sreg Nettuts+ benar-benar sudah lalu mencakupmu.
  • Almanak Selector plong CSS Gerendel bikin pemantapan

Mempelajari selector CSS bermakna juga mengamankan spesifitas.

css-best-stormtrooper
css-best-stormtrooper
css-best-stormtrooper
Ikon stormtrooper maka itu Jory Raphael

Selector mana yang akan mengesampingkan yang tak? Apa sintaks minimal yang harus saya gunakan di pemilih saya moga efisien n domestik pengkodean saya? Satu kancah yang caruk saya suruh orang-orang untuk mempelajari resan spesifitas adalah Andy Clarke CSS: Specificity Wars. Penggambaran nan terinspirasi adapun bagaimana tarif selector ongkos detik diadu satu sama lain (dan kekuatan haram).

Tugas 7: Mempertimbangkan makin lanjut

CSS yakni kesetiaan nan sangat diperlukan. Selepas anda memiliki dasar-dasar di asal ikat pinggangmu, ada banyak jalan lakukan penyelidikan selanjutnya. Sebagai contoh:

CSS3

CSS3 terus bergerak. Eigendom baru diadopsi, yang lain dijatuhkan terkadang makanya browser, kadang-kadang terlebih sintaksnya berubah. Mengatasi masalah dengan CSS Gradients, akan menjadi paku lain di peti mati pendayagunaan Photoshop-mu; mengapa menggunakan potongan gambar momen dia bisa CSS itu?!

Tatap CSS3 Please buat melihat semua implementasi CSS3 yang benar, dengan fallback nan disarankan bikin browser yang tidak membantu. Sekali lagi, tatap CSS3 Essentials di Tuts+ Premium untuk memberikan pengetahuanmu galakan.

Alat angkut Query

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

CSS Preprocessors

Ternyata CSS boleh makin baik. Selepas sira mulai menunggangi CSS kerjakan proyek-order dunia berupa, Beliau mungkin akan menarik konklusi yang seimbang. Mempertahankan file CSS yang osean itu sulit, pengulangan adalah situasi biasa – dan mengapa anda tidak bisa menggunakan plastis untuk menyimpan nilai rona HEX daripada mengetiknya iteratif-ulang?! CSS preprocessors seperti Sass, LESS dan Stylus mengatasi semua masalah ini dan banyak lagi. Sonder harus “membiasakan kembali” bahasa nan sama (namun berkembar plong vanilla CSS jika kamu ingin), kamu bisa memanfaatkan arti preprocessors.

Lihat Get Into LESS, Mastering SASS dan Sass vs. LESS vs. Stylus: Preprocessor Shootout jika kamu tertarik bikin mempelajari seterusnya.

SMACSS

SMACSS (maupun Scalable and Modular Architecture for CSS) adalah konsep yang dikembangkan maka dari itu Jonathan Snook, yang bertujuan kerjakan memerangi konservasi file CSS nan canggung. Itu tidak mengajarkan bahasa hijau, melainkan menyarankan pendirian-cara di mana kamu dapat takhlik CSS-mu saat ini lebih terorganisir.

Menulis CSS modular memungkinkanmu lakukan mencuil 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 pangkal jaras pinggangmu, kamu akan menjadi perancang web nan jauh makin baik. Ikuti dua proses pembelajaran nan sudah lalu kami uraikan dan dia akan baik-baik saja dalam perjalananmu.

Jika kamu memiliki rekomendasi penataran CSS, beri adv pernah mereka di komentar!

Source: https://webdesign.tutsplus.com/id/tutorials/the-best-way-to-learn-css–webdesign-11906