Bagaimana Anda Dapat Menggunakan CSS – Tip Dan Trik Desain Web Untuk Pemula

Bahkan Anda dapat mempelajari cara menggunakan CSS untuk menata halaman web Anda dengan tips CSS ini untuk pemula.

Anda tidak perlu tahu apa-apa tentang kode komputer. Yang perlu Anda ketahui hanyalah cara menyalin dan menempel.

Tapi pertama-tama, apa itu CSS?

Cascading Style Sheets (CSS) adalah kode bahasa stylesheet yang digunakan pengembang tema untuk mendeskripsikan dan mengubah presentasi atau tampilan dokumen HTML.

Apa yang dilakukan CSS?

Secara sederhana, file CSS membuat halaman HTML terlihat bagus.

Apa pun platform blog yang Anda gunakan, Anda dapat mengubah properti CSS untuk membuat blog Anda terlihat lebih baik.

Tidak peduli apa platform blogging yang Anda gunakan.

Anda akan memiliki opsi di setelan tema untuk CSS Khusus atau CSS Tambahan .

Anda mungkin tidak pernah melihat opsi ini.

Atau, jika sudah, Anda mungkin berpikir terlalu sulit untuk mempelajari cara membuat kode.

Tapi itu sangat mudah.

Saya tidak tahu apa-apa tentang pengembangan web atau sintaks CSS, tetapi saya dapat mengubah atribut gaya dalam hitungan detik.

Yang perlu Anda lakukan hanyalah menggunakan Alat Pengembang peramban web Chrome atau Firefox dan mempelajari beberapa trik dan kiat CSS sederhana.

Mari kita lihat betapa mudahnya.

Mengapa Anda ingin mempelajari cara mengedit CSS blog Anda?

Anda mungkin memiliki banyak pengaturan dalam tema blog Anda.

Tapi ada banyak elemen kecil yang mungkin hilang.

Bahkan di tema premium untuk WordPress, beberapa opsi tidak tersedia di opsi standar.

Itu sebabnya Anda dapat membantu CSS Anda bekerja lebih baik dengan melakukan pengeditan dan perubahan sendiri.

Dengan mengubah style sheet eksternal, itu dapat mereferensikan semua halaman HTML Anda.

Jika Anda mengubah judul HTML di satu halaman, itu akan mengubah tag HTML di semua halaman Anda.

Referensi disebut elemen semu.

Artinya jika Anda mengubah tampilan heading H2 Anda, itu akan mengubah semua heading H2 di situs Anda.

Tetapi Anda tidak perlu mempelajari semua tentang komplikasi ini.

Yang perlu Anda ketahui adalah itu berfungsi dan Anda dapat menata blog Anda persis seperti yang Anda inginkan tanpa mengetahui apa pun tentang pengkodean.

Mari kita mulai dengan beberapa tip CSS mudah untuk pemula.

Cara mudah mengubah CSS sebaris Anda

Langkah pertama adalah membuka blog Anda di Firefox, Chrome, atau Microsoft Edge.

Dalam contoh di bawah ini, saya telah menggunakan Firefox. Saya merasa sedikit lebih ramah untuk digunakan daripada Chrome.

Namun keduanya bekerja dengan cara yang sama.

Buka blog Anda di tab atau jendela baru. Anda dapat menavigasi ke halaman yang ingin Anda ubah.

Sekarang buka Developer Tools, Inspector, dari menu Tools di Firefox atau menu View di Chrome.

Klik Inspektur untuk membuka panel alat.

Anda dapat memilih elemen gaya sebaris apa pun di halaman Anda dengan menggunakan panah pemilih di kiri atas panel alat.

Gerakkan kursor Anda melintasi halaman Anda untuk memilih elemen. Atau Anda dapat mengklik elemen individual dalam daftar.

Anda akan melihat setiap elemen yang Anda pilih disorot dengan warna biru di tampilan browser halaman web Anda.

Sekarang Anda siap membuat perubahan pada tampilan halaman Anda.

Menggunakan pemilih CSS

Dalam contoh saya, saya akan mengubah tampilan elemen judul H2.

Anda dapat memilih untuk mengubah elemen H1, teks isi, atau keterangan gambar.

Saya ingin memulai dengan mengubah ukuran font. Yang perlu Anda lakukan hanyalah mengeklik ukuran font tag gaya, dan mengubah nomornya.

Saya mengubah ukuran dari 33px menjadi 56px. Anda dapat melihat bahwa ukuran judul sekarang lebih besar.

Jangan khawatir. Anda belum mengubah halaman blog langsung Anda. Apa yang Anda lihat di panel browser Anda hanyalah pratinjau dari perubahan Anda.

Anda dapat bermain-main sebanyak yang Anda suka dengan elemen HTML apa pun.

Semua yang Anda lihat di panel browser hanyalah pratinjau seperti apa perubahan Anda pada aturan CSS nantinya.

Sekarang saya ingin mengubah warna teks.

Jika Anda mengklik titik warna antara label warna dan nomor, Anda membuka pemilih warna.

Sekarang cukup pilih warna yang ingin Anda gunakan.

Sangat mudah untuk mengubah warna atribut HTML Anda. Di sini saya telah mengubah dari hitam menjadi biru.

Kelihatannya bagus, tapi ketinggian garis bisa lebih baik. Saya akan mengubahnya.

Pengaturan saat ini adalah 1.2, yang terlalu banyak ruang antar baris. Saya ingin garisnya lebih dekat.

Jadi, saya akan mengubahnya menjadi 1.0.

Itu terlihat jauh lebih baik.

Saya telah membuat tiga perubahan pada tampilan judul H2 saya dalam mode pratinjau. Saya telah mengubah ukuran font, warna, dan spasi baris.

Sekarang saatnya menambahkan perubahan ini ke situs langsung saya.

Cara mendapatkan kode untuk situs Anda

Anda perlu menyalin baris kode yang telah Anda modifikasi.

Pilih dan salin semua kode. Pastikan Anda menyalin semua baris, termasuk tanda kurung terakhir.

Sekarang rekatkan ke editor teks. Anda dapat menggunakan Notepad di PC atau Editor Teks di Mac.

Perubahan lain yang kami buat adalah warna. Kita perlu menyalin baris ini juga.

Anda hanya perlu menyalin garis untuk warnanya.

Anda dapat melihat bahwa elemen H2 dicetak tebal pada gambar di atas. Artinya, ini adalah elemen semu yang sama dengan kode pertama kita. Jadi Anda bisa menggunakannya bersama-sama.

Salin barisnya.

Sekarang tambahkan baris ke editor teks Anda.

Anda mungkin perlu menambah atau menghapus beberapa spasi agar garis warna Anda memiliki indentasi yang sama.

Sekarang Anda siap menambahkan tiga perubahan ini ke situs langsung Anda.

Tambahkan kode ke situs Anda

Buka opsi tema Anda dan pilih opsi CSS Anda.

Di tema WordPress, itu ada di Penyesuai Tema dan disebut CSS Tambahan atau CSS Kustom.

Ini akan disebut sesuatu yang serupa di platform blogging lainnya.

Sekarang salin semua kode dari editor teks Anda, dan tempelkan ke tab Penyesuai Anda.

Segera setelah Anda menempelkan kode, pratinjau Anda akan menampilkan perubahan yang telah Anda buat.

Klik terbitkan, dan Anda telah melakukannya.

Berikut adalah perbandingan sebelum dan sesudah perubahan saya.

Anda dapat melakukan lebih banyak lagi

Kiat CSS saya untuk pemula pengenalan langkah demi langkah untuk mengedit gaya HTML CSS Anda hanyalah permulaan.

Anda dapat melakukan lebih banyak lagi jika ingin bereksperimen dan mencoba mengubah elemen lain.

Sangat mudah untuk menambahkan batas atau bayangan ke gambar, memindahkan teks ke kiri atau ke kanan, atau mengubah ukuran lebar badan teks.

Anda dapat memindahkan margin atau mengurangi atau menambah padding dan mengubah perataan.

Ada ratusan opsi yang dapat Anda pilih untuk diedit.

Ingatlah bahwa saat Anda bekerja di Alat Pengembang, Anda tidak akan memengaruhi situs Anda.

Setiap perubahan yang Anda buat adalah pratinjau dan hanya terlihat di dalam jendela browser itu.

Tidak masalah apa yang Anda coba, atau apakah berhasil atau tidak.

Anggap saja sebagai taman bermain bagi Anda untuk mempelajari seberapa banyak lagi yang dapat Anda lakukan untuk menata situs web atau blog Anda.

Penasaran, dan Anda akan bersenang-senang mempelajari keterampilan baru ini dengan tips tentang CSS untuk pemula ini.

Tip bonus besar dengan Alat Pengembang

Sekarang setelah bingkai Alat Pengembang Anda terbuka, ada satu hal yang sangat rapi yang dapat Anda lakukan.

Anda dapat menguji kecepatan situs Anda.

Yang perlu Anda lakukan hanyalah mengklik tab Jaringan.

Kemudian klik CTRL+R.

Anda akan melihat waktu kecepatan halaman terisi penuh dengan warna merah pada baris di bagian bawah yang ditandai dengan panah.