CSS adalah kepanjangaan dari Cascading Style Sheets yang merupakan bagian dari Web Design dan Development. Dengan CSS kita bisa memberikan styling ke tag HTML sehingga membuat tampilan website yang kita buat menjadi lebih manarik.

Sejarah CSS

CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman. Anda hanya perlu menulis markup untuk situs.

HTML dan CSS memiliki keterikatan yang erat. Karena HTML adalah bahasa markup (fondasi situs) dan CSS memperbaiki style (untuk semua aspek yang terkait dengan tampilan website), maka kedua bahasa pemrograman ini harus berjalan beriringan.

Tak hanya penting di sisi teknis, CSS juga berpengaruh pada tampilan sebuah website. Tentunya Anda tidak ingin website terlihat seperti situs yang ‘telanjang’ tanpa modifikasi apa pun, bukan?

Manfaat CSS

Dengan menggunakan css, proses styling HTML menjadi lebih mudah.

Jika tanpa css, proses styling html perlu dilakukan secara langsung di dalam tag html. Tentu ini bisa saja dilakukan, tapi jika kamu bekerja untuk project yang besar, menulis setiap styling di tag html tentu akan merepotkan.

Dengan css, kamu bisa mendeklarasikan styling yang bisa digunakan oleh banyak elemet sekaligus. Dengan ini selain memperkecil ukuran website yang kamu buat juga bisa mempercepat loading website kamu.

Apa itu CSS3 ?

CSS3 merupakan versi terbau dari CSS untuk saat ini dan bagian dari pengembangan dari versi CSS 2.1 dengan penambahan beberapa fitur baru yang canggih dan berguna untuk pengembangan website dimasa depan. Pada CSS3 terdapat banyak tambahan untuk mendukung gaya suatu halaman website, yang meliputi: property dan value dari properti itu sendiri.

Cara Kerja CSS ?

Fungsi CSS adalah memberikan styling ke tag html.

Coba perhatikan gambar dibawah ini.

Belajar CSS
Tampilan website tanpa css

Gambar pertama ini tidak memiliki css.

Setelah kita apply css, maka tampilannya akan menjadi lebih bagus seperti gambar di bawah ini.

Belajar CSS
Tampilan website dengan css

Untuk membuat css, langkat paling sederhana adalah dengan membuat tag <style></style> dan menaruh css di dalamnya.

<style>
.button {
    background: blue;
    color:white;
}
</style>

Diatas adalah contoh css sederhana dengan nama class button.

Tenang, kita akan belajar syntac CSS lainnya di artikel selanjutnya.

Tipe CSS

Secara umum penulisan css bisa dibagi menjadi 3 macam.

Yaitu:

1. Inline CSS

Inline CSS adalah penempatan css secara langsung di dalam tag HTML. Sesuai dengan namanya yaitu inline.

Inline CSS ini hanya akan berpengaruh terhadap element itu saja.

Contohnya?


<p style="text-align:center;color:red">Ini adalah contoh paragraph dengan inline css</p>

2. Internal CSS

Internal CSS adalah agak mirip dengan inline css, bedanya kita memisahkan tag css ke dalam sintak <style></style> dan menaruhnya di dalam tag head.

Cara ini lebih efisien dibandingkan dengan membuat inline CSS karena kita bisa mengurangi pengulangan CSS yang bisa dipakai di banyak elemen HTML.

Tapi kekurangannya adalah CSS ini hanya bisa dipakai di dalam file HTML tersebut.

Contohnya?

<html>
    <head>
        <style>
        .p {
            text-align:center;color:red
        }
        </style>
    </head>
    <body>
        <p class="p">Ini adalah contoh paragraph dengan inline css 1</p>
        <p class="p">Ini adalah contoh paragraph dengan inline css 2</p>
    </body>
</html>

3. External CSS

Lalu bagaimana dengan external CSS? External CSS adalah cara penulisan CSS melalui file .css diluar file HTML. Cara ini paling efektif dan efisien apalagi kalau kamu sedang membuat project website yang besar.

Selain meningkatkan kecepatan website, external CSS bisa dipakai berulangkali di banyak file HTML sekaligus.

Bagaimana cara membuat external CSS?

Pertama buat sebuah file dengan extensi .css misalnya style.css

Kemudian, di file HTML kami tinggal include file tersebut. Biasanya di dalam tag head dengan tag <link rel="stylesheet" href="path_ke_css_file" />.

Contoh style.css

.p {
    text-align:center;color:red
}
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <p class="p">Ini adalah contoh paragraph dengan inline css 1</p>
        <p class="p">Ini adalah contoh paragraph dengan inline css 2</p>
    </body>
</html>

Nah itulah sedikit perkenalan tentang CSS.

Sudah siap untuk belajar CSS?

Silakan lanjutkan ke pembahasan css di artikel selanjutnya ya.