Apakah situs Anda akan terlihat lebih baik jika logo dipindahkan lima piksel ke kanan atau memiliki latar belakang biru? Apakah menambahkan batas atau bayangan pada gambar di postingan unggulan Anda akan membuatnya lebih menonjol? Peramban modern seperti Firefox hadir dengan Alat Pengembang Web yang memungkinkan Anda memeriksa bagian dalam situs dan melakukan pengeditan langsung, melihat hasilnya secara waktu nyata.
Dalam tutorial ini Anda akan belajar cara memanfaatkan Alat Pengembang Web Firefox untuk mengedit langsung situs apa pun.
Catatan : Tutorial ini berlaku untuk sebagian besar browser, termasuk Chrome, Opera, dan Safari.
Temui Alat Pengembang Web
Alat Pengembang Web Firefox adalah seperangkat alat yang komprehensif, mulai dari menampilkan semua elemen DOM hingga dapat mengukur kecepatannya. Untuk tutorial ini, Anda hanya memerlukan alat “Inspektur” dan “Editor Gaya”.
Jalankan Firefox dan kunjungi salah satu/situs Anda. Dari menu hamburger Firefox (di kanan atas secara default), pilih “Web Developer -> Style Editor” atau tekan kombinasi Shift + F7 pada keyboard Anda.
Panel Pengembang Web Firefox akan muncul di salah satu sisi jendelanya – biasanya di bagian bawah. Anda dapat mengubah posisinya dengan mengeklik tombol tiga titik di kanan atas panel dan memilih “Dock to Right/Left†atau “Separate Window.â€
Catatan : Tutorial ini tidak menunjukkan kepada Anda cara membuat kode HTML dan CSS. Anda dapat mempelajari dasar-dasarnya di sini.
Memeriksa elemen
Untuk dapat memengaruhi tampilan suatu elemen, Anda harus dapat mengidentifikasinya. Klik tombol pertama pada bilah alatnya atau tekan Ctrl + Shift + C pada keyboard Anda untuk mengaktifkan mode pemilih elemen.
Gerakkan mouse Anda di sekitar situs untuk melihat berbagai elemen halaman web yang disorot. Di sebelahnya, Anda akan melihat pengidentifikasi utama mereka melayang di pop-up.
Ketika Anda mengklik sebuah elemen, itu akan dipilih di tab Inspektur pada Alat Pengembang.
Saat Anda menemukan elemen yang ingin Anda atur, klik kanan pada entri di Developer Tools Inspector dan pilih dari jendela pop-up yang muncul – “Copy -> CSS Selector.â€
Mulai Edit Langsung Anda
Dengan Pemilih CSS elemen Anda disalin ke papan klip, kembali ke tab Editor Gaya di jendela Alat Pengembang. Klik tombol “+” di kiri atas untuk “Buat dan tambahkan lembar gaya baru ke dokumen.”
Tempel Pemilih CSS Anda di dalam stylesheet kosong yang baru. Tambahkan spasi, diikuti dengan satu set tanda kurung kurawal buka dan tutup.
Di CSS, tampilan elemen ditentukan dengan terlebih dahulu “menargetkannya” menggunakan pengidentifikasi seperti Pemilih CSS itu, lalu menambahkan beberapa aturan yang memengaruhi tampilannya, dikelompokkan di dalam kurung kurawal. Segala sesuatu yang ditempatkan di antara tanda kurung kurawal pembuka dan penutup memengaruhi “elemen yang ditargetkan”.
Misalnya, jika Anda menambahkan aturan di bawah ini:
tampilan : tidak ada ;
Ini akan menyembunyikan dari tampilan elemen tempat ia digunakan. Ini mungkin cara termudah untuk mengetahui bahwa Anda menargetkan elemen yang tepat di halaman Anda. Jika menghilang, itu memang yang Anda inginkan, dan Anda dapat menghapus aturan ini untuk mencoba yang lain. Jika tidak hilang, saatnya kembali ke Inspektur dan memilih sesuatu yang berbeda.
Kami tidak akan menunjukkan cara membuat kode CSS di sini, tetapi Anda dapat bermain-main dengan beberapa aturan populer seperti:
perbatasan : 2px padat rgba ( 255 , 0 , 0 , 0,5 ); warna : #333 ; ukuran font : 20px ;
Anda akan melihat bahwa elemen situs berubah saat Anda menambahkan aturan ke lembar gaya CSS.
Sebagai catatan penutup, ingatlah bahwa tidak ada yang disimpan. Jika Anda menyukai tampilan tweak Anda, salin kode Anda di suatu tempat – dalam file TXT atau aplikasi pencatat favorit Anda – sehingga Anda atau desainer/pengembang dapat menambahkannya ke stylesheet situs Anda untuk membuat perubahan permanen. Jika Anda perlu mempelajari tentang CSS, lihat beberapa game online untuk membantu Anda menguasai keterampilan tersebut.
