Posted on

Cara Menambahkan Kode CSS Pada Website WordPress

wpjakarta – Cara menambahkan kode CSS pada website WordPress. Jika kode HTML harus dituliskan langsung pada halaman atau post. Maka untuk menambahkan kode CSS pada WordPress secara default memiliki kotak snippet khusus, yang di dedikasikan untuk menuliskan kode CSS sekedar memberikan kustomisasi ringan atau “menormalisasi” element tema website yang “bekerja tidak sebagaimana mestinya”.

Tanpa harus menginstall plugin tambahan, kotak snippet CSS bisa ditemukan pada halaman “Customizer”. Meskipun secara global, CSS bisa di tuliskan melalui metode, yaitu : “Inline”, “Internal” dan “External”. Namun jika hanya ingin melakukan kustomisasi ringan, maka cukup gunakan kotak snippet kode yang ada pada halaman “Theme customizer” tersebut. Jika kurang puas, tentu ada banyak plugin yang bisa digunakan. Plugin custom CSS.

CSS dan HTML berhubungan sangat erat dalam hal membangun sebuah website. Jika sebuah website diibaratkan seperti sebuah rumah, maka HTML adalah fondasi dasar dan struktur-struktur kongkret rumah tersebut. Sementara CSS diibaratkan memberikan nilai estetika sehingga rumah tersebut dapat terlihat minimalist, mewah atau luxury tergantung keinginan si arsitek. (Langkah pada artikel ini termasuk kedalam metode penulisan “external CSS”).

CSS juga membuat element statis website menjadi “terlihat” lebih dinamis. Artinya tulisan bisa terlihat “lebih hidup” dengan beberapa estetika ketimbang hanya sebuah tulisan semata. Seperti misalnya font atau tulisan dan gambar, atau element lainnya seperti tombol. Prinsipnya semua element HTML bisa di berikan style CSS dengan selector yang sesuai. Contohnya pada beberapa element HTML berikut :

<!-- ELEMENT TANPA CSS : -->

Heading & paragraf tanpa CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur nibh sit amet porttitor egestas. Nunc tincidunt ipsum sollicitudin magna euismod pretium non sed urna.

Tombol tanpa CSS

Gambar Polaroid tanpa CSS

gambar dengan box-shadow css kustom

Cara menambahkan kode CSS website WordPress

Gambar tanpa CSS

<!-- ELEMENT DENGAN CSS : -->

Heading & paragraf CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consectetur nibh sit amet porttitor egestas. Nunc tincidunt ipsum sollicitudin magna euismod pretium non sed urna.

Tombol dengan CSS

C  Tombol dengan CSS

Gambar Polaroid dengan CSS

gambar dengan box-shadow css kustom

Cara menambahkan kode CSS website WordPress

Gambar dengan CSS

Cara menambahkan kode CSS pada website WordPress

Element sebelah kanan tentu saja terlihat lebih hidup dan menarik karena diberikan style properti CSS. Silahkan menuju halaman customizer pada menu “CSS tambahan” atau “Additional CSS”. Untuk menambahkan properti CSS pada masing-masing element HTML maka anda harus dapat atau tau “selector” dari element tersebut. Paling mudah untuk mengetahui selector adalah :

  • Contoh gambar disamping untuk mengetahui selector “judul” dari sebuah website.
  • Dari browser (chrome) klik kanan pada element yang dimaksud.
  • Klik “Inspect” maka jendela chrome dev tools akan keluar.
  • Lihat pada tab “element” dan style dibagian bawahnya.
  • Untuk ilustrasi gambar disamping selector element dari judul tersebut adalah : “h1.site-title”

Maka dari kotak “CSS customizer” bisa di ketikan dengan kode CSS sebagai berikut :

 h1.site-title {
   color: white;
   text-shadow: 2px 2px 4px #000000;
 }

Artikel diatas menjelaskan bagaimana cara menambahkan kode CSS pada website WordPress menggunakan kotak snippet yang ada pada halaman “customizer”. Untuk bagaimana menuliskan kode CSS secara inline, internal dan external akan di tulis dalam artikel yang lain.