Membuat Tampilan Web Menarik Dengan CSS
Doli Yolanda
Content Manager
Berbicara tentang CSS, pastinya rekan-rekan semua sudah mulai memahami sumber pembentuk website berasal dari sistem yang satu ini. Bagi yang masih belum paham apa itu CSS, bisa meluangkan waktunya dulu sebentar untuk memahami cara kerjanya disini.
Untuk pemula, membuat website sudah dimudahkan dengan berbagai pilihan template yang manis dan apik. Tapi sayangnya, semua orang yang menggunakan template bawaan akan memiliki style yang sama dengan website anda. Pastinya kita butuh pembeda yang membuat website tampil lebih bagus dan lain dari yang lain.
Modifikasi ini bisa anda lakukan sendiri dalam tingkat CSS mulai dari dengan sedikit perbaikan hingga perubahan total struktur website anda. Cascading Style Sheet atau disingkat CSS ini diprogram untuk memudahkan pekerjaan pembuatan website, sehingga semua elemen yang ditampilkan pada website nanti tersusun sesuai dengan keinginan sipemilik.
Mengubah tampilan website sendiri memakan waktu yang beragam, terkadang cepat dan ada kalanya butuh waktu lama tergantung kebutuhan penyesuaian. Tapi tujuan utama dari penyusunan bahasa CSS adalah unsur estetika. Dimana tujuan kita adalah mengubah tampilannya menjadi lebih baik dan lebih menarik. Pada kesempatan kali ini, kami akan berikan beberapa cara membuat tampilan web menarik dengan CSS dengan cara yang mudah.
CSS Sebagai standar bahasa pemograman
CSS dan HTML adalah 2 standar bahasa website yang tidak akan digantikan dalam waktu dekat. Semua hasil kerja front-end dan back-end seorang developer adalah HTML dan mau tidak mau merka harus paham dengan HTML dan CSS.
Kustomisasi CSS bagaikan mengatur sendiri rak-rak produk toko anda jika website diibaratkan sebagai mini market. Anda sebagai marketing pastinya mempunyai cara dan teknik sendiri dalam menyusun produk yang anda jual. Tidak berbeda dengan modifikasi CSS, tujuannya adalah memberikan tampilan yang menarik dan memiliki format tersendiri.
Menggunakan CSS juga tidak hanya soal tampilan, namun juga pengehematan. Bahasa CSS biasanya akan disimpan secara eksternal dan hanya diakses satu kali ketika pengunjung mengakses website anda, sehingga bandwidth yang terpakai juga lebih sedikit. Selain itu, menggunakan bahasa CSS juga Google-friendly; yang berarti website anda lebih mudah dirangking pada pencaharian Google daripada menggunakan bahasa lain.
5 Cara modifikasi CSS gampang agar website terlihat professional
Dengan modifikiasi CSS yang gampang ini, anda bisa mengganti tampilan website sesuai dengan style yang anda inginkan. Modifikasi yang akan kita bahasa sekarang ini akan sangat simple namun memberikan dampak yang besar terhadap tampilan website anda. Mulai dari dimana sebuah gambar akan muncul, seberapa besar headernya, hingga disebelah mana sidebar akan ditampilkan; semua modifkasi visual sebuah website bisa dilakukan dengan CSS
Modifikasi CSS yang akan kita lakukan ini menggunakan WordPress sebagai medianya dan telah dipasang plugin Simple Custom CSS. Dengan plugin ini, anda bisa dengan mudah mengubah-suaikan tampilan website tau template apapun sesuai keinginan anda.
Mengubah font website
Hal pertama yang akan anda lakukan dalam membuat website menjadi fresh adalah mengubah font menjadi lebih simple dan elegan. Maka anda bisa mengubahnya menjadi seperti ini:
body { background-color: #eeeeee; /* light gray */ font-family:
"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucinda Grande", sans-serif; font-weight: 500;
font-size: 14px; color: #1e1e1e; /* dark gray */ }
Dalam bahasa CSS di atas, "body" merupakan tulisan atau teks selain daripada judul. Background-color adalah warna latar belakang dari halaman, dan "font-family" adalah perintah yang anda tulis untuk menampilkan font yang akan tampil untuk teks.
Adakalanya pengunjung tidak memiliki browser yang bisa menampilkan font yang anda ubah, untuk itu selalu sediakan font standar seperti sans-serif seperti logika CSS di atas. Tapi jika anda hanya ingin mengubah warna font menjadi lebih jelas dan lebih besar, maka langkah mudah seperti ini akan mengobatinya.
body {
font - size: 16px;
color : #000
}
Logika diatas akan memperjelas dan mempertegas warna teks menjadi hitam dan memperbesar font yag terlalu kecil menjadi bisa dibaca. Hal ini sangat penting mengingat sebuah teks yang bagus seharusnya memberikan ruang bernafas bagi konten.
Mendefinisikan Header
Header sangat penting dalam memisahkan antara teks dengan judul sehingga pengunjung bisa dengan mudah mencerna website. Header juga sangat peting dalam konsep SEO, karena dengan Headerlah sebuah website dirangking dalam mesin pencaharian ini.
- Membuat semua header memiliki font yang sama
h1, h2, h3, h4, h5, h6 { font-family: Georgia, serif; font-style: italic; color: #004060; }
Dengan logika diatas, mak semua header yang anda miliki akan memiliki jenis font yang sama dengan bentuk miring dan berwarna biru.
- Membuat salah satu heading memiliki bentuk yang berbeda
Dalam contoh ini, kita akan membuat h1 memiliki perbedaan dari heading lainnya
h1 [ background-color: #004060; color: #ffffff; padding: 4px 8px; }
Hasil dari logika diatas adalah anda akan mendapatkan semua H1 (heading 1) memiliki warna background biru dongker dan warna tulisan putih Selain itu semua H1 juga memiliki jarak yang lebih besar dari heading lainnya.
Memasukkan Link dan Link Hover
Keuntungan dari memiliki sebuah website adalah nilai monetisasinya dan itu didapatkan melalui sebuah link saja. Karena pentingnya link,, maka anda harus membuatnya berbeda dari teks biasa dan bisa di sadari oleh pengunjung.
Terdapat dua macam modifikasi teks link yang simple dan profesional, yaitu:
- Link tanpa animasi
untuk link tanpa ada efek-efek tertentu, anda bisa menggunakan logika berikut ini:
a, a:visited { color: #006699; text-decoration: none; }
Link anda nanti akan memiliki warna dan tanpa efek jika cursor mouse mengarah pada link.
- Link dengan efek (link hover)
Slaah satu efek umum yang bisa anda gunakan untuk membuat tampilan web menarik dengan CSS adalah garis bawah ketika mengarah pada link. Efek garis bawah tersebut dapat anda miliki dengan logika sebagai berikut:
a:hover { text-decoration: underline; }
Jadi, ketika pengunjung menarik cursoer mouse ke sebuah link di website anda, maka link tersebut akan memiliki garis bawah.
Word Wrap!
Membuat website itu ternyata lebih dekat dengan kaidah penulisan bahasa Indonesia yang baik dan benar lho! Contohnya saja ketika area yang bisa anda gunakan untuk menulis terbatas, maka mau tidak mau kata-kata yang anda tulis harus terpotong, dan potongan tersebut terlihat acak.
Untuk membuat teks dengan area tulis yang terbatas di potong per-kata, maka anda bisa gunakan logika:
p {
word-break: keep-all;
}
Logika ini akan membuat penggalan teks yang dipotong pada bagian tengah kata menjadi kata yang utuh dan jauh lebih rapi.
Warnai background widget
Untuk membuat side bar lebih mencolok, kita bisa menambahkan warna backgroundnya dengan langkah mudah seperti ni:
.widget {
background : #B9EBFA;
padding: 25px;
}
Setelah memasukkan logika CSS di atas, maka widget anda akanmemiliki latar belakang biru transparan. Perlu di ingat bahwa ini akan memberikan background yang sama pada widget website anda.
Kesimpulan
Nah, demikianlah beberapa modifikasi CSS gampang yang bisa anda coba untuk membuat website lebih rapi dan terlihat profesional. Untuk awalnya, kustomisasi CSS mungkin terlihat sedikit rumit untuk dikerjakan, namun jika anda terbentur, maka Google search akan memberikan anda jawaban atas pertanyaan anda.
Dengan sedikit latihan, anda akan mampu menambahkan CSS sendiri dalam waktu yang singkat.
Capek-capek belajar CSS tapi website masih lelet?
CSS dan HTML adalah kunci dari semua website, begitu pula dengan web hosting dengan website; mereka harus berjalan dengan baik agar memberikan manfaat. Ketika web hosting anda sering mengalami downtime dan terlalu banyak memakan waktu memuat website, maka tanda-tanda tersebut adalah kode keras bagi anda untuk menggunakan web hosting yang kredibel dan harga bersaing.
Hostinger sebagai salah satu web hosting terbaik saat ini memiliki basis pelanggan yang sangat besar dan mampu untuk memberikan performa terbaik hosting dengan jaminan uptime 99.9%. Anda juga bisa memiliki web hosting ini dengan harga terjangkau dan berbagai kemudahan pembelian layanan dengan diskon-diskon yang menarik. Untuk mengetahui lebih lanjut, anda bisa klik tombol di bawah ini.
Baca Juga
mulai dari
Rp 8,900
/bln
• Garansi Uptime 99,9%
• Instal otomatis WordPress
• Integrasi CloudFlare
• Garantia de Reembolso 30 dias