Cascading Style Sheets

Kata Pengantar

CSS yang merupakan singkatan dari Cascading Style Sheets merupakan bagian tak pernah terpisahkan dari website baik dalam bentuk wordpress yang paling banyak dipakai dunia online saat ini maupun engine lain yang menggunakan script seperti PHP. Jika sebelumnya anda sudah mengenal HTML, sebagai pembuat konten atau kerangka logis dari laman web, maka CSS berfungsi dalam mengatur tampilan sebuah website, baik itu warna dan font yang digunakan. Jadi CSS digunakan sebagai style atau gaya website anda sendiri yang mempunyai keunikan sendiri, sehingga akan terlihat berbeda ketika dilihat di berbagai browser.

/photo/ai-close-up-code-160107/

Jika pada file HTML secara umum tanpa css kadang website terlihat polos oleh browser, atau Jadi jika Anda pernah menggunakan tag detail, ternyata adanya beberapa tag tidak didukung di beberapa browser saat berada di tempat lain. Ya, setiap browser memiliki gaya standarnya sendiri yang berbeda. Disini kita ingin melhat bagaimana title H1 web kita terlihat mempunyai style tersendiri, atau berapa banyak padding saya inginkan di sekitar paragraf saya.

Disinilah fungsinya CSS, tampilan default website yang benar-benar polos anda dapat rubah dengan memasukkan beberapa gaya (style). Tutorial ini akan membantu anda maupun profesional yang ingin membuat situs web atau blog pribadi mereka lebih menarik. Jadi mari kita mulai mencari style Anda sendiri melalui tutorial di website ini.

Kita mulai dengan memahami apa itu CSS? Ya, CSS merupakan kumpulan kode program untuk mendesain atau mempercantik tampilan halaman HTML dengan gaya anda sendiri. Disini anda bisa mengubah desain text, warna, gambar dan latar belakang, dll pada kode HTML sehingga dapat dikatakan CSS selalu terkait dengan HTML, karena keduanya memang saling melengkapi.

Salah satu cara untuk menambah gaya website dengan membuat HTML berevolusi, mengubah tag yang biasa saja dengan warna, atau centering yang berbeda, dan hal-hal seperti itu. Namun kadang pemilik website menginginkan tag yang harus dilakukan dengan konten.

Jadi bagaimana mereka bisa melakukan ini, tentu saja dengan menambahkan atribut gaya. Seperti halnya saya sudah mengambil tag h1 dan kemudian menambahkan atribut gaya seperti berikut ini :

<font color="biru">h1</font>

Dan itu akan membuat judul h1 khusus ini memiliki font biru. Jadi ini sangat sederhana. Ini cara yang bagus menambahkan menambahkan gaya sederhana ke halaman Anda. Namun bagaimana jika tag H1 lebih dari 1 disetiap content yang ada buat? Maka fungsi css sangat memungkinkan untuk memberi cukup 1 perintah dan mengubah latar warna tag h1 seperti code css yang ditempatkan sebelum body website:

<style type="text/css">
.clor {
color: biru;
}
</style>

Dan hanya menambahkan code:

<span class=warna>h1</span>,

maka semua tag h1 otomatis berubah menjadi warna biru. Menarik bukan.

Jadi dasar yang tepat untuk style-kan halaman Anda adalah menggunakan CSS. Lembar gaya Cascading pada dasarnya adalah cara bagi Anda untuk menulis aturan yang mengatakan bagaimana Anda ingin menata semua paragraf, atau bagaimana Anda ingin menata semua judul Anda, atau bagaimana Anda ingin menata beberapa gambar Anda.