10 Tips Sederhana untuk Mempelajari CSS untuk WordPress

Mempelajari CSS bisa sangat melelahkan, terutama jika Anda tidak tahu harus mulai dari mana dan istilah apa yang harus dicari saat Anda buntu.

Karena CSS adalah bahasa gaya dan bukan bahasa pemrograman lengkap seperti Javascript atau PHP, CSS sebenarnya cukup sederhana untuk dipelajari, terutama jika Anda memiliki beberapa pengetahuan HTML (yang saya asumsikan Anda miliki untuk tujuan posting ini).

Dalam survei blog kami, sejumlah besar dari Anda menyebutkan bahwa Anda ingin meningkatkan permainan Anda dan lebih mengenal CSS dan itulah sebabnya kami baru-baru ini menerbitkan daftar lebih dari 150 sumber daya untuk mempelajari CSS, yang akan membantu Anda memulai, terutama bersamaan dengan posting ini.

Hari ini, saya akan menunjukkan kepada Anda alur kerja dan tip yang membantu saya mempelajari CSS ketika saya pertama kali memulai bertahun-tahun yang lalu. Mulailah dengan tip satu dan lanjutkan ke daftar penguasaan CSS.

Lanjutkan membaca, atau lompat ke depan menggunakan tautan ini:

• Konstruksi Dasar
• Berlatih dengan Selektor dan Properti Sederhana
• Hafalkan Model Kotak
• Belajar Dengan Melakukan
• Atur Konten dengan Lebar dan Tinggi
• Float dan Positioning
• CSS tingkat lanjut
• Replikasi Situs Dengan CSS
• Praprosesor
• Kerangka kerja

1. Konstruksi Dasar

Hal pertama yang pertama: Untuk mempelajari cara menulis CSS Anda sendiri, Anda perlu tahu cara memformatnya dengan benar. Sebenarnya ada dua cara yang benar untuk melakukan ini, tetapi salah satunya membantu Anda lebih teratur.

Karena HTML merupakan bahasa pertama yang dipelajari orang ketika mereka ingin bekerja dengan situs WordPress, mempelajari sintaks CSS akan membantu dengan terlebih dahulu menuliskannya dengan cara yang mirip dengan HTML.

Inilah struktur dasar yang dibutuhkan CSS:

Ini cukup sederhana ketika tidak ada banyak gaya yang ingin Anda terapkan untuk sebuah elemen di situs Anda, tetapi ketika Anda mulai lebih mengenal CSS, Anda akan membutuhkan lebih dari satu gaya untuk sebuah elemen dan di situlah a struktur seperti ini bisa menjadi berantakan, cepat.

Itulah mengapa ada cara yang lebih efisien dan terorganisir untuk menulis CSS Anda:

Sekarang Anda dapat mulai menggali istilah-istilah yang digunakan dalam contoh ini. Masing-masing istilah ini adalah blok bangunan dasar CSS: kelas, ID, pemilih, properti, dan nilai. Properti dan nilai juga membentuk apa yang disebut deklarasi.

Ini adalah titik awal yang bagus untuk mempelajari cara menulis CSS Anda sendiri dan begitu Anda mulai, Anda mungkin bertanya-tanya di mana Anda harus menuliskan semua ini di dalam file WordPress Anda.

Dalam instalasi WordPress Anda, file apa pun yang Anda lihat yang berakhiran .css adalah file CSS, seperti yang mungkin sudah Anda duga. File utama yang perlu Anda cari adalah stylesheet Anda dan diberi label sebagai style.css . Di sinilah sebagian besar atau semua desain tema Anda disimpan dalam hal warna, font, gambar dasar, dan mungkin beberapa tata letak tema Anda.

Anda mungkin juga melihat file dalam tema pra-dibuat yang disebut custom.css dan ini biasanya di mana mereka ingin Anda membuat perubahan pada tema. Saat Anda membuat perubahan dalam file ini, itu akan menimpa gaya yang ada di lembar gaya tema.

Jika Anda menambahkan plugin ke tema Anda, mereka mungkin juga datang dengan file CSS di folder mereka dan mereka digunakan untuk menata tampilan dan nuansa plugin.

2. Berlatih dengan Selektor dan Properti Sederhana

Selanjutnya adalah belajar tentang pemilih dan properti dasar dan bagaimana fungsinya dalam sebuah tema. Selektor seperti h1 , h2 dan h3 untuk header dan p untuk teks paragraf, misalnya, serta properti seperti font-family dan background-color .

Ada cara mudah untuk melatih keterampilan baru ini dan benar-benar melihat perubahan yang Anda buat, tanpa benar-benar harus memulai blog WordPress Anda sendiri. W3Schools memiliki banyak informasi tentang CSS serta contoh langsung di mana Anda dapat mengubah kode mereka dan dengan menekan sebuah tombol, Anda dapat langsung melihat perubahan yang Anda buat.

Saat Anda melihat contoh, cukup klik tombol Coba sendiri dan sebuah jendela terbuka di mana Anda dapat menguji beberapa CSS dasar.

3. Hafalkan Model Kotak

Saya seorang pendukung untuk mereferensikan potongan informasi yang paling umum daripada memasukkan semuanya ke dalam memori. Mungkin karena saya sering merasa ingatan saya kurang, tapi saya lebih suka mengatakan itu karena ada begitu banyak referensi bagus di internet.

Anda dapat dengan mudah mencari pemilih dan properti yang tidak Anda ketahui dalam sekejap. Yang diperlukan hanyalah pertanyaan sederhana ke mesin pencari favorit Anda seperti Google atau Bing dan semua informasi yang Anda butuhkan hanya dengan sekali klik dari sana.

Untungnya, tidak sulit untuk mempelajarinya dan sejujurnya, jika saya bisa menghafalnya, Anda juga tidak akan kesulitan. Intinya, ini mencakup area konten, padding, perbatasan, dan margin.

4. Belajar Dengan Melakukan

Setelah Anda mulai terbiasa dengan CSS, merupakan ide bagus untuk benar-benar mempraktikkannya dengan memilih tema yang memiliki desain dasar sepenuhnya dan mengubah gayanya dengan mengedit lembar gayanya.

Sangat penting untuk memahami bagaimana perubahan sederhana dapat mempengaruhi tema secara drastis kadang-kadang dan di lain waktu tidak begitu banyak. Pada akhirnya, berlatih sebanyak yang Anda bisa membantu Anda secara visual melihat perubahan yang Anda buat dan menghubungkan tindakan Anda menulis kode ke hasil akhir.

Dalam skema yang lebih besar, setelah Anda dapat menghubungkan titik-titik, Anda tidak hanya dapat menulis CSS dengan cepat tetapi Anda juga harus dapat memecahkan masalah di masa mendatang yang menjadi tugas penting untuk mendesain dan mengembangkan web.

Berikut adalah beberapa tema bagus untuk dipraktikkan yang dapat Anda instal di situs WordPress Anda secara gratis. Tidak semuanya adalah representasi sempurna tentang bagaimana sebuah tema harus terlihat dan berfungsi, tetapi semuanya adalah titik awal yang bagus untuk mempelajari bagaimana Anda dapat mengubah tema dengan CSS sederhana.

Spektrum Putih

Tema Spektrum Putih adalah tema sederhana dengan tata letak umum yang mencakup area konten utama, bilah sisi, header, dan footer.

Selain percikan warna dalam hal font dan tautan, ini adalah tema yang sederhana dan sederhana untuk digunakan.

Pendiri

Setelah Anda mulai benar-benar memahami CSS, tema Founder sangat bagus untuk mengintip dan melihat stylesheet-nya karena sedikit lebih kompleks daripada tema lain yang terdaftar sejauh ini. Ini responsif, dapat diakses, dan siap terjemahan, termasuk ikon hamburger untuk layar ponsel serta banyak detail desain CSS lainnya yang bagus untuk dipelajari.

Bahkan dengan tema-tema minimalis di atas, Anda mungkin masih merasa sedikit kewalahan dengan banyaknya hal yang belum Anda kenali dan tidak apa-apa. Saat Anda memeriksa setiap bagian dari posting ini, semuanya akan mulai menyatu sedikit lebih banyak.

5. Atur Konten dengan Lebar dan Tinggi

Setelah Anda menginstal salah satu tema ini, Anda juga dapat mulai mengubah tata letak dengan memasukkan panjang dan lebar area konten dan pemilih yang berbeda.

Ini adalah pendahulu untuk langkah berikutnya dan membuat Anda terbiasa dengan area tata letak yang berbeda dalam tema WordPress.

6. Float dan Positioning

Di sinilah CSS cenderung menjadi sedikit rumit karena Anda dapat membuat tata letak murni dengan CSS dan khususnya, float dan positioning. Masalahnya adalah, properti ini tidak dirancang untuk membuat seluruh tata letak dan ada konsep di luar sana untuk memperbarui tata letak CSS.

Untuk saat ini, ini adalah cara umum yang dilakukan banyak orang untuk mendapatkan tata letak yang tepat . Merupakan ide bagus untuk mengamati tema yang sudah ada, termasuk daftar di atas, dan melihat perbedaannya dengan penggunaan float dan posisinya.

7. CSS Tingkat Lanjut

Pada titik ini, Anda benar-benar mulai memahami CSS, tetapi masih banyak lagi yang dapat ditemukan:

• Kelas semu – Digunakan untuk menentukan status elemen tertentu seperti pada kursor mouse dan memposisikan gambar di tempat tertentu yang relevan dengan elemen lain.
• Selektor kompleks – Anda bisa lebih spesifik lagi dengan penataan gaya menggunakan selektor yang lebih canggih.
• Animasi CSS3 – Membuat transisi fade, pop, atau lainnya saat Anda mengarahkan mouse ke gambar dan tombol.
• Responsif dengan kueri media CSS3 – Salah satu cara termudah untuk membuat tema responsif adalah dengan menggunakan kueri media.
• Transforms – Mengontrol ukuran dan bentuk area konten yang dipilih.
• At-rules – Digunakan untuk mengimpor hal-hal seperti font dan stylesheet ke dalam tema Anda.
• Gradien – Menambahkan gradien ke tema Anda tanpa perlu menggunakan gambar.

Ini adalah banyak elemen di mana Anda benar-benar dapat mulai melihat desain tema Anda benar-benar terbentuk. Ini adalah waktu yang tepat untuk mulai menguji keterampilan Anda.

8. Replikasi Situs Dengan CSS

Dengan semua pengetahuan ini di ikat pinggang Anda, Anda mungkin perlu mendapatkan sabuk yang lebih kuat, tetapi yang lebih penting, Anda benar-benar dapat mempraktikkan keterampilan Anda dengan menggunakan kerangka dasar tema dan menambahkan gaya CSS Anda sendiri dari awal.

Salah satu hal paling bermanfaat yang dapat Anda lakukan untuk memajukan pembelajaran Anda adalah mempraktikkan pengetahuan Anda dalam aplikasi dunia nyata. Saya sarankan untuk mencoba menemukan situs yang Anda sukai kemudian mereplikasinya sebaik mungkin dengan CSS pada tema WordPress kosong.

Tentu, Anda mungkin tidak akan bisa mendapatkan semuanya dengan sempurna dan mungkin ada banyak elemen yang tidak dapat Anda tiru hanya dengan CSS, tetapi ini adalah cara yang bagus untuk membuat Anda nyaman dengan CSS.

Berikut adalah beberapa tema pemula yang bagus dan gratis yang dapat Anda gunakan:

• BlankSlate

  

  Ini adalah sebagai tulang telanjang karena mendapat. Hanya ada HTML5 dalam tema ini sehingga Anda bebas menambahkan CSS Anda tanpa khawatir tentang gaya yang bentrok. Itu memang datang dengan semua yang Anda butuhkan untuk mulai menata tema Anda.

• HTML5 Kosong

  

  HTML5 Blank adalah tema WordPress boilerplate yang mencakup beberapa gaya, meskipun, tidak banyak. Ini adalah awal yang baik jika Anda tidak terlalu tertarik untuk memulai CSS Anda dari awal.

• menggarisbawahi

  

  Jika Anda sedikit berjiwa petualang dan ingin mencoba tema pemula yang lebih canggih, Garis Bawah adalah pilihan yang sangat baik, meskipun, bukan untuk yang lemah hati karena dilengkapi dengan dua gaya sampel tema yang dimuat sebelumnya. Ini juga mencakup beberapa teknik dan pengkodean tingkat lanjut yang menjadikannya alat pembelajaran yang hebat.

Ada juga HTML5 Reset WordPress Theme di GitHub. Ini mencakup fitur-fitur yang sedikit lebih canggih, tetapi pada akhirnya itulah yang menjadikannya tema pemula yang berharga.

9. Praprosesor

Setelah Anda mengetahui seluk beluk CSS, merupakan ide bagus untuk mempelajari praprosesor, dan khususnya, SASS dan KURANG. Kedua hal ini membantu mengatur CSS Anda sehingga lebih mudah untuk menulis dan lebih mudah diakses untuk pengeditan di masa mendatang.

Praprosesor membuat CSS Anda bersih dan mudah diikuti dan dengan cepat menjadi keterampilan penting di antara pengembang web. Meskipun ada perdebatan yang sedang berlangsung tentang mana yang terbaik, SASS cenderung menjadi preprosesor yang paling banyak digunakan hingga saat ini.

Jika Anda ingin mencoba SASS dalam konteks WordPress, lihat tema Bones. Sebagian besar terdiri dari HTML5 sehingga Anda dapat mencoba menata gaya dengan bit SASS bawaan yang sudah disertakan.

10. Kerangka

Dalam pengembangan web, kerangka kerja adalah struktur untuk membuat situs web dinamis. Pada akhirnya, tujuan kerangka kerja adalah membuat situs lebih cepat tanpa kehilangan fungsionalitas.

Setelah Anda memiliki CSS, Anda dapat mempercepat pengembangan tema Anda dengan menggunakan kerangka kerja.

Salah satu framework yang paling populer adalah Twitter Bootstrap. Itu dibuat untuk langsung responsif, dan menggunakan SASS dan KURANG serta banyak komponen CSS khusus.

Membungkus

Berbekal silabus untuk belajar dan dengan tips untuk membantu Anda di sepanjang jalan, CSS seharusnya tidak terlalu berlebihan untuk Anda kuasai. Plus, Anda harus siap sekarang untuk mencoba menata tema WordPress Anda sendiri.

Untuk sumber daya lebih lanjut tentang mempelajari CSS dan WordPress, lihat beberapa posting kami yang lain: Panduan Mega untuk Mempelajari dan Merujuk CSS untuk WordPress: 150+ Sumber Daya dan Dari WordPress Pemula hingga Pro: 200+ Sumber Daya Peningkatan Karir.

• CSS