in

Apa Itu CSS ? Dan Bagaimana Menggunakan CSS di WordPress

wpJakarta.Com – Apa Itu CSS ? Dan Bagaimana Menggunakan CSS di WordPress. Tidak terbayang sebelumnya, bahwa membuat website saat ini tampak begitu mudah. Kita pasti berfikir bahwa setiap aplikasi komputer pasti harus di buat dengan mengetikan script kode pemrograman.

Membuat website dengan CMS WordPress

Namun dengan CMS WordPress (Content Management Systems) atau dapat kita artikan sebagai sistem pengelolaan konten seperti WordPress, membuatnya menjadi lebih mudah. Saat ini bahkan tidak perlu belajar dan memahami bahsa program. Cukup instal aplikasi CMS, Instal tema WordPress dan lakukan penyesuaian.

Paling tidak itu yang dapat di lakukan pada sisi user. Meskipun sebenarnya aplikasi atau program tetap saja terbangun dari ribuan bahkan puluhan ribu baris kode pemrograman. Biarlah itu di lakukan pada sisi developer. Tidak diketahui banyak orang, pengembang atau developer pemrograman menulis banyak kode HTML, CSS, PHP, dan JavaScript untuk membuat tema website atau plugin WordPress.

Tutorial HTML, CSS, JS, PHP dan WordPress Hook

Apa Itu CSS, HTML, JS ?

Paling minim, website bisa di buat hanya dengan bahasa HTML saja. Namun hasilnya mungkin akan menjadi seperti website di tahun 90an. Terlihat kaku dan tanpa banyak kemampuan selain hanya sebagai media baca. Lalu ada CSS, apa itu CSS, CSS yang bisa di katakan memberikan sentuhan sihir dan membuat website menjadi menarik dan interaktif. Lalu Javascript yang membuat website menjadi lebih interaktif dengan banyak dan tanpa batasan fitur. HTML, CSS, JS (Javascript) bisa di katakan sebagai tiga pilar utama untuk membuat website.

Apa itu HTML ? Apa Itu CSS ? dan Javascript ?

  • HTML, yang merupakan kependekan dari HyperText Markup Language, adalah yang membuat struktur halaman website. HTML mendefinisikan semua elemen yang kita lihat di halaman website melalui browser, baik itu judul, paragraf, menu, dan sebagainya. Ini adalah bahasa markup standar dan menyediakan blok bilding untuk halaman website.
  • CSS, adalah kependekan dari Cascading Style Sheets. CSS adalah bahasa yang digunakan desainer website untuk menata halaman. CSS yang mengontrol warna, jenis font atau huruf, background atau latar belakang, membelah satu halaman menjadi beberapa kolom dan menentukan ukuran kolom, dan semua gaya lainnya yang biasa kita lihat dari sebuah halaman website. Tanpa CSS, halaman web akan menjadi membosankan dan sulit di baca.
  • JavaScript, sering disingkat JS, adalah bahasa tingkat tinggi sisi klien dan sisi server yang membantu kita membuat halaman website menjadi interaktif.

Karena kita berbicara tentang website WordPress, maka ada satu bahasa pemrograman yang sepertinya perlu untuk kita mengerti, PHP.

  • PHP, adalah akronim rekursif untuk HyperText Preprocessor. PHP adalah bahasa scripting yang dijalankan pada sisi server. PHP digunakan untuk mengembangkan situs website baik statis maupun dinamis. dan aplikasi berbasis web. Semua situs WordPress sangat bergantung pada PHP untuk mengcompie konten dinamis yang diambil dari database.

Pada artikel ini, kami akan fokus pada yang namanya CSS. Untuk mengerti apa itu CSS secara baik, maka perlu untuk mengetahui element HTML. Karena CSS juga sangat bergantung pada element di HTML. Seperti yang kami jelaskan sebelumnya, bahwa CSS digunakan untuk mengatur dokumen HTML.

Contoh halaman HTML yang di padukan dengan CSS

Contohnya ketika kita membuat sebuah halaman menggunakan HTML sebagai berikut :

<html>

<head>
<title>Apa itu CSS?</title>
</head>

<body>
<h1>Judul Halaman</h1>
<h3>Sub Judul Halaman</h3>
<p>Isi dari halaman dalam sebuah paragraf.</p>
</body>

</html>

Tanpa CSS, kode HTML di samping akan di tampilkan oleh browser seperti berikut.


Apa itu CSS?

Judul Halaman

Sub Judul Halaman

Isi dari halaman dalam sebuah paragraf.

Halaman yang hanya di buat hanya dengan HTML, mungkin sudah cukup untuk memberikan suatu informasi. Namun dengan memberikan kode CSS ke dalam dokumen tersebut maka akan membuat informasi tersebut menjadi lebih baik lagi. Akan jauh lebih menarik karena ada penambahan warna background, efek timbul dan warna pada huruf seperti sebagai berikut.

<html>
<head>
<title>Apa itu CSS?</title>

<style>
.apa-itu-css {
  background-color: lightblue;
  box-shadow:0 4px 8px 0 #000;
}

.apa-itu-css h1 {
  color: red;
  text-align: center;
}

.apa-itu-css h3 {
  color: blue;
  text-align: center;
}
</style>
</head>

<body>
<div class="apa-itu-css">
<h1>Judul Halaman</h1>
<h3>Sub Judul Halaman</h3>
<p>Isi dari halaman dalam sebuah paragraf.</p>
</div>
</body>
</html>

Dengan CSS, kode HTML di samping akan di tampilkan oleh browser seperti berikut.


Apa itu CSS?

Judul Halaman

Sub Judul Halaman

Isi dari halaman dalam sebuah paragraf.

Penulisan kode dan selector CSS

Pada dokumen di atas di tambahkan kode css di dalam tag <head>. Juga ada penambahan tag <div class="apa-itu-css"> yang membungkus element-element HTML tersebut. Memang akan ada konsekuensi di mana ukuran halaman akan bertambah. Pada kondisi jumlah baris kode yang banyak, maka dapat mempengaruhi kecepatan loading halaman. Tapi tenang saja karena ada tips-trik dan optimisasi untuk mempercepat loading halaman website meskipun ada kode CSS yang di tambahkan.

Dengan contoh di atas menjadi lebih jelas tentang apa itu CSS. CSS memberikan gaya pada element HTML. Namun tentu CSS harus di kaitkan dengan element HTML itu sendiri yang di sebut dengan selector. Selain juga kita perlu tau tentang property pada CSS.

Tips-trik, tutorial dan artikel WordPress

(Selipan) Menambahkan kode javascript ke dalam dokumen

Sedikit kami berikan contoh tentang penggunaan kode javascript ke dalam halaman website. Seperti penjelasan di atas bahwa javascript akan membuat halaman menjadi lebih interaktif. Melanjutkan kode sebelumnya dengan menambahkan kode javascript seperti contoh sebagai berikut.

<html>
<head>
<title>Apa itu CSS?</title>

<style>
.apa-itu-css {
  background-color: lightblue;
  box-shadow:0 4px 8px 0 #000;
}

.apa-itu-css h1 {
  color: red;
  text-align: center;
}

.apa-itu-css h3 {
  color: blue;
  text-align: center;
}
</style>
</head>

<body>
<div class="apa-itu-css">
<h1>Judul Halaman</h1>
<h3>Sub Judul Halaman</h3>
<p>Isi dari halaman dalam sebuah paragraf.</p>
</div>
</body>
</html>
Apa itu CSS?

Judul Halaman

Sub Judul Halaman

Klik tombol di bawah…

Kesimpulannya jelas, bahwa dengan menambahkan kode CSS halaman website menjadi lebih menarik. Lalu dengan menambahkan kode javascript maka halaman website menjadi lebih interaktif dan bisa menarik atau melibatkan pengunjung anda. Untuk penjelasan yang lebih lengkap tentang apa itu Javascript, lihat artikel kami berikut, Apa itu Javascript. Untuk artikel-artikel tutorial javascript, lihat artikel yang kami tag dengan "Javascript".

Kembali ke topik tentang apa itu CSS ?

Kembali ke topik artikel ini, yaitu tentang Apa Itu CSS ? Dan Bagaimana Menggunakan CSS di website WordPress. Jadi, semakin jelas apa itu CSS ? CSS (Cascading Style Sheets) adalah stylesheet (dan bukan bahasa pemrograman seperti HTML atau javascript atau PHP). CSS memungkinkan kita dan pengembang untuk mengontrol tampilan halaman website.

“CSS digunakan untuk menentukan gaya halaman website, termasuk desain, tata letak atau layout, dan variasi tampilan untuk perangkat dan ukuran layar yang berbeda.”

w3school, https://www.w3schools.com/css/default.asp

Dalam hal pemrograman website, CSS adalah hal yang penting untuk dipelajari. Jika anda berencana untuk mengembangkan situs website dari awal atau untuk membuat sedikit perubahan atau penyesuaian gaya pada tema website WordPress yang anda gunakan. Dengan beberapa trik CSS, kita dapat mengubah tampilan situs website di beberapa perangkat (Handphone, tablet, laptop dll).

Ketika kita membangun sebuah website menggunakan WordPress. Lalu menggunakan satu tema yang ada di pasar, percayalah bahwa hal itu belum cukup. Akan ada saat di mana kita perlu untuk merubah sedikit dari beberapa bagian website. Maka di situ kita akan menggunakan pemahaman tentang HTML dan CSS ini.

CSS saat ini juga bukan sekedar memberikan warna backgroud maupun tulisan. CSS telah berevolusi secara signifikan dari waktu ke waktu hingga saat ini. CSS memungkinkan kita untuk menambahkan interaktivitas dan bahkan membuat animasi seperti animasi yang bisa di lakukan oleh javascript. Sebagian kalangan pengembang seperti kami sebetulnya sedikit menghindari javascript. Jika efek yang ingin kami tambahkan pada website ini masih bisa di handle dengan CSS, maka kami akan memilih menggunakan CSS saja tanpa harus menambahkan javascript.

Tips-trik, tutorial dan artikel WooCommerce

Menambahkan kode CSS ke dalam website WordPress

Secara umum ada tiga (3) cara menambahkan kode CSS ke dalam website. Semuanya mudah di lakukan meskipun website anda berbasis WordPress.

CSS Eksternal

Kode HTML dan kode CSS berada pada file terpisah. kita kemudian dapat menautkan file CSS menggunakan elemen yang ada di dalam bagian dokumen HTML.

Buat sebuah file CSS untuk menyimpan kumpulan-kumpulan kode CSS. File ini berekstensi .css dan di simpan di dalam folder tema. Pada website WordPress umum di namakan style.css. Anda bisa menemukan file style.css di dalam folder tema (/wp-content/themes/nama-tema/style.css). Jika anda menemukan file style.min.css sebenarnya itu adalah file yang sama namun isi kode css tersebut sudah di minify. CSS minify adalah salah satu teknik yang di gunakan untuk mengurangi ukuran file CSS dan memepercepat loading halaman website. Tentang CSS minify lihat artikel kami tentang optimasi halaman website.

Internal CSS

Penulisan CSS secara internal. Jika kita ingin menambahkan gaya ke satu halaman website yang berbeda pada umumnya. Misalnya kita ingin membuat satu halaman landing page, Dan ingin memberikan gaya yang berbeda dari halaman yang lain. Cara penulisan internal CSS ini bisa di lakukan.

Inline CSS

Inline CSS di tuliskan langsung menjadi satu dengan elemen HTML dan dengan menambahkan style="" atribut.

Penulisan CSS secara Eksternal di anggap sebagai cara yang paling baik. Namun mungkin ada saat di mana kita di haruskan menuliskannya secara internal maupun inline. Masing-masing memiliki cara penulisan yang berbeda maupun cara mengaitkannya dengan selector html. Tentang cara bagaimana menulis CSS secara eksternal, internal dan inline, lihat artikel kami berikut. Cara menuliskan kode CSS.

Menambahkan kode CSS melalui customizer WordPress

Jika anda menggunakan tema yang sudah jadi. Maka untuk menambahkan kode CSS tidak perlu mengakses file asli style.css. Dari halaman customizer, anda akan melihat bagian atau menu "Additional CSS" atau Kode CSS tambahan. Akan terbuka file editor di sisi kiri sidebar customizer dan anda kan menuliskannya sesuai dengan selector HTML. Anda bisa mencoba dengan mengetikan kode sebagai berikut :


h1 {
  color: blue;
}

h2, h3, h4, h5 {
  color: red;
}

Lalu klik tombol biru "Publish", Lihatlah salah satu halaman post anda. Anda akan menemukan perubahan pada warna judul dan subjudul sesuai kode warna yang di ketikan pada editor.

Membahas CSS tidak akan pernah cukup pada satu halaman post. Artikel ini mungkin hanya sebatas tentang apa itu CSS dan sedikit trik bagaimana menulisnya. Tentang CSS Properties, Selectors, Fungsi, Animasi dan terkait referensi CSS lainnya, kami tulis pada artikel kategori /snipet/css.

Artikel kami lainnya

What do you think?