CSS Dasar Yang Perlu Diketahui Setiap Pengguna WordPress

Siapa pun yang memiliki situs WordPress, pada titik tertentu, akan mengalami situasi di mana mereka perlu mengubah beberapa kode. Itu tidak berarti bahwa Anda diharapkan menjadi pengembang web, menulis JavaScript dan PHP seperti seorang profesional. Kemungkinan besar, Anda perlu mengotak-atik HTML dan CSS dasar, dasar-dasar halaman web apa pun, WordPress atau tidak.

Kami memiliki tutorial hebat tentang kode HTML paling umum dan ramah pemula yang Anda perlukan. Lihatlah dan baca juga tentang itu. Kali ini, kami ingin memandu Anda melalui beberapa cuplikan dan ide CSS paling dasar yang akan membantu Anda mengubah situs Anda agar terlihat dan bertindak persis seperti yang Anda inginkan.

Berlangganan Saluran Youtube Kami

1. Selektor, Kelas, dan ID

Di CSS, dasar dari semuanya adalah selector . Sederhananya, ini adalah singkatan yang memberi tahu kode apa yang harus ditargetkan. Anda bisa menargetkan semua paragraf individual di situs dengan p {} . (Kode apa pun yang berlaku untuk pemilih ditempatkan di antara kurung kurawal.) Dalam banyak kasus, pemilih elemen ini akan sejajar dengan tag HTML yang Anda gunakan untuk membuat halaman web (seperti p {} menargetkan <p> atau h2 {} dan < h2> ).

Setelah itu, Anda memiliki kelas . Ini adalah jenis pemilih tertentu yang Anda (atau tema/WP Anda sendiri) tentukan. Jika Anda hanya ingin menargetkan heading H1 untuk postingan, Anda mungkin memiliki .post-title {}. Pemilih kelas CSS dicatat oleh titik/titik di depan pemilih itu sendiri. Ini digunakan untuk menargetkan elemen seluruh situs, tetapi bukan elemen dasar seperti H1 sederhana. Perhatikan bahwa pemilih dasar tidak memiliki titik atau indikator lain, yang berarti mereka adalah HTML dasar.

ID di CSS bekerja persis sama dengan kelas. Kecuali dua perbedaan kecil. Mereka ditunjukkan oleh # di depan pemilih, dan mereka dinamai untuk satu, contoh spesifik (atau jumlah terbatas contoh) dari elemen yang membutuhkan gaya khusus. Seperti #email-subscribe-about-page {} atau #email-subscribe-after-post {}. ID ini menunjukkan bahwa alih-alih menargetkan jenis elemen tertentu, mereka memilih elemen individual itu sendiri.

p {
	color: red;
}

.class {
	color: white;
}

#id {
	color: blue;
}

Pemilih lainnya

Karena kita membahas dasar-dasar CSS, kita tidak akan masuk ke selektor yang lebih kompleks, tetapi mereka memang ada. Anda juga dapat menargetkan apa yang disebut kelas semu yang mungkin hanya berlaku saat tautan diarahkan. Atau pemilih atribut yang hanya akan menargetkan elemen yang memiliki parameter tertentu yang melekat padanya. Selain itu, Anda dapat mengaktifkan CSS untuk menjadi relatif terhadap posisi elemen menggunakan p::after dan img::before.

Ini bisa sangat canggih dan rumit untuk diperbaiki, jadi untuk mempelajari dasar-dasarnya, itu bukan sesuatu yang harus Anda khawatirkan. Namun, kami ingin Anda mengetahui bahwa ada cara yang lebih spesifik untuk berinteraksi dengan dokumen.

2. Titik dua dan titik koma

Kami menyebutkan di atas bahwa semua kode CSS berada di antara kurung kurawal. Namun, di dalam kurung kurawal itu, setiap baris penyesuaian harus diakhiri dengan titik koma (;) . Itu menunjukkan kepada browser bahwa gaya tertentu selesai. Spasi tidak masalah dengan CSS kecuali untuk keterbacaan, tetapi titik koma itu sendiri tidak dapat dinegosiasikan.

Juga, di antara gaya CSS aktual dan nilainya, Anda menempatkan titik dua biasa (:) . Sekali lagi, jarak di sini tidak masalah sama sekali . Anda dapat memiliki spasi di satu sisi, keduanya, atau tidak sama sekali, dan CSS akan tetap dirender.

Perhatikan bahwa meskipun Anda dapat meninggalkan ruang ini, umumnya diterima bahwa Anda tidak boleh melakukannya. Namun, dengan sebagian besar situs web dan tema yang menawarkan minifikasi CSS, semua spasi akan dihapus.

3. Komentar CSS

Jika Anda perlu menyertakan dokumentasi dalam kode CSS, Anda dapat melakukannya dengan komentar. CSS komentar yang dibuka dan ditutup dengan / * dan * / simbol. Mengomentari kode Anda penting tidak hanya bagi Anda untuk kembali ke CSS nanti, tetapi juga untuk pengembang selanjutnya. Secara umum, komentar CSS digunakan untuk menunjukkan apa yang dilakukan cuplikan tertentu.

Anda dapat melihat di atas bahwa kode hanya mengatakan apa yang dilakukan cuplikan berikutnya. Sangat penting untuk terus melakukan ini, karena file CSS Anda bisa menjadi sangat berbelit-belit seiring waktu.

/* This is what a CSS Comment Looks Like */

img {
	display:none;
}

4. !penting

Sulit untuk melebih-lebihkan betapa pentingnya tag !important untuk CSS. Pun intended. Ini adalah salah satu elemen CSS yang paling sering digunakan, tetapi juga salah satu elemen yang paling sering disalahgunakan dan digunakan.

Anda lihat, !important menyatakan bahwa baris apa pun yang ada di dalamnya adalah untuk menimpa gaya lain untuk pemilih itu. Di mana saja di lembar gaya. Jadi jika Anda ingin memastikan bahwa elemen tertentu selalu memiliki warna tertentu, Anda akan menggunakan !important untuk melakukannya. Pastikan untuk mencatat bahwa seluruh tag !important berada di antara nilai dan titik koma, bukan setelahnya.

#author-name {
	color:red!important;
}

#author-name {
	color:blue;
}

5. tampilan: tidak ada;

Cuplikan CSS khusus ini adalah salah satu yang paling penting untuk dipelajari oleh pendatang baru. Yang dilakukannya hanyalah membuat elemen apa pun yang Anda targetkan menghilang begitu saja. Misalnya, jika Anda memerlukan halaman yang tidak memiliki menu header, misalnya, Anda cukup memasukkan kode ini:

Melakukan ini dengan kelas yang muncul di hampir setiap halaman dapat menghapusnya sepenuhnya dari situs. Jadi, Anda perlu berhati-hati tentang apa yang Anda terapkan ini.

Anda dapat menggunakan ini pada Posting atau Halaman WordPress tertentu untuk menghapus elemen individual seperti data meta dari postingan itu sendiri. Di Divi, Anda dapat menyesuaikan modul blog individu agar tidak memiliki kutipan posting dengan menggunakan kode ini:

.home-page-blog .post-content {
	display:none;
}

6. visibilitas: tersembunyi;

Secara singkat, Anda juga dapat menggunakan visibility:hidden; CSS untuk menghapus elemen dari layar. Perlu diingat ada perbedaan antara this dan display:none; dalam kode Anda.

Tampilan; tidak ada; kode akan sepenuhnya menghapus elemen dari halaman. Browser tidak akan merender elemen sama sekali, karena telah dihapus sepenuhnya. Dengan visibilitas: tersembunyi; elemen masih merender dan memuat ke halaman, tetapi tidak terlihat. Untuk semua maksud fungsional, itu masih ada. Pengguna tidak bisa melihatnya.

Jadi Anda biasanya hanya menggunakan ini jika Anda membutuhkan fungsi untuk sesuatu, tetapi tidak ingin itu ditampilkan. Seperti piksel pelacakan atau bagian lain yang akan berinteraksi dengan elemen lain di layar.

#code-module { 
visibility:hidden; 
}

7. Margin dan Padding

Margin dan Padding disalahpahami oleh pendatang baru di CSS. Mereka tampak sama pada awalnya, tetapi begitu Anda menggali, Anda akan melihat bahwa mereka sama sekali berbeda.

Margin adalah ruang di sekitar elemen. Itu tidak terlihat dan transparan, dan bahkan bisa negatif. Memiliki margin kiri yang lebih besar akan mendorong elemen ke kanan. Margin atas yang lebih besar kemudian mendorong elemen ke arah bawah. Margin negatif melakukan sebaliknya. Margin atas negatif akan menarik elemen ke atas, misalnya.

Padding , kemudian, buffer ukuran elemen. Padding di sebelah kiri akan memperpanjang latar belakang elemen ke kiri. Ini pada dasarnya meningkatkan massa fisiknya. Seperti menambahkan sweter kedua di hari yang dingin. Anda mendapatkan lebih banyak bantalan di tubuh Anda. Kamu lebih tebal dari sebelumnya. Begitulah cara kerja padding di CSS, dan karena itu Anda tidak dapat memiliki padding negatif .

Saat menggunakannya sebagai kode, Anda dapat menggunakan margin default :15px; atau bantalan: 1vw; untuk jarak seragam di sekitar pemilih. Atau Anda dapat menggunakan margin-top, margin-left, margin-right, atau margin-bottom untuk hanya memengaruhi sisi tersebut dan memiliki level yang berbeda untuk masing-masing sisi. Padding juga, dengan padding-kiri, dan seterusnya.

h2 {
	margin-bottom:25px;
	padding-left:15vh;
}

8. Elemen Mewarnai

Mengubah warna berbagai elemen adalah salah satu hal yang mungkin Anda mulai mengutak-atik sejak hari pertama Anda memulai sebuah situs. Di CSS, Anda dapat menentukan warna dengan dua cara.

Cara utama adalah menggunakan 6 digit kode hex: #ffffff untuk putih atau #000000 untuk hitam, sebagai contoh. Anda dapat menentukan warna RGB apa pun dengan kode hex, dan jika Anda tidak mengetahuinya, jangan khawatir. Ada banyak situs web dan alat untuk membantu itu.

Cara kedua adalah menggunakan kata warna yang telah ditentukan. Warna dasar seperti biru dan hitam dan merah sudah ditentukan sebelumnya dan Anda dapat menggunakannya tanpa harus mengingat kode hex apa pun. Tetapi jika nada utama bukan yang Anda butuhkan, kode hex adalah pilihan terbaik.

Menggunakan Kode Warna

Dalam hal penggunaan kode warna sebenarnya, ada beberapa cara. Untuk teks apa pun yang perlu diubah, cukup gunakan color:#ffffff; dan teks apa pun di dalam pemilih itu akan berubah. Anda dapat melakukan hal yang sama untuk judul judul seperti H1 dan H2 dengan warna .

p {
	color:white;
	background-color:#000;
}

h3	{
	background:green;
	border: #110011;
}

Mengubah hal-hal seperti background-color:red; atau latar belakang:hijau; dari suatu elemen sama mudahnya. Tambahkan nilai warna. Anda juga dapat menggunakan warna:#000; nilai untuk pemilih seperti a:hover yang akan mengubah warna tautan saat diarahkan. Atau bahkan border:blue; untuk menempatkan tepi berwarna di sekitar elemen apa pun yang Anda inginkan.

Menyelesaikan Dasar-dasar CSS

CSS bisa sangat banyak. Dan Anda dapat melakukan lebih dari sekadar menukar warna dan menampilkan/menyembunyikan elemen. Namun, jika Anda baru mempelajari CSS dan cara memanipulasi situs web melalui kode, menginternalisasi dasar-dasar khusus ini akan membuat Anda nyaman membaca dan mengubah kode bahkan jika Anda belum pernah membuka editor kode sebelumnya.

Apa CSS dasar yang sering Anda gunakan di situs Anda?

Gambar unggulan artikel oleh darkwark / shutterstock.com