Mengenal CSS
Apa itu CSS?
CSS (Cascading Style Sheets) adalah kumpulan kode yang digunakan untuk mendefinisikan desain dari bahasa markup (HTML) atau bisa disebut juga kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Perhatikan ilustrasi dibawah ini.
Kenapa harus ada CSS sih? Bukannya untuk medesain tampilan web hanya cukup menggunakan HTML saja bisa?
Jawabannya untuk efisiensi dan memudahkan customisasi atau perubahan desain, contoh kasus ketika kita membuat suatu paragraf berwarna merah dalam sebuah website, kita bisa saja menggunakan salah satu tag di HTML yaitu tag <font> kemudian kita set saja atributnya dengan color=”red” pada kata-kata yang ingin di beriwarna merah.
Namun setelah website tersebut memiliki katakanlah 50 artikel, dan karena suatu hal anda ingin merubah seluruh text merah tadi menjadi biru, maka akan dibutuhkan waktu yang lama untuk mengubahnya satu persatu, halaman per halaman.
Dalam kondisi inilah CSS mencoba ‘memisahkan’ tampilan dari konten.
Cara Menginput Kode CSS ke Halaman HTML
Secara garis besar, terdapat 3 cara menginput kode CSS ke Halaman HTML, yaitu metode Inline Style, Internal Style Sheets dan External Style Sheets.
Metode Inline Style
Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Inline Style CSS</title>
</head>
<body>
<h2 style="background-color:black; color:white" >
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
Hasilnya akan seperti gambar dibawah ini.
Dalam kode diatas, disisipkan atribut style pada tag <h2>, nilai dari atribut style ini adalah kode CSS yang ingin diterapkan.
Penggunaan tag CSS seperti ini walaupun praktis, namun tidak disarankan, karena kode CSS langsung tergabung dengan HTML, dan tidak memenuhi tujuan dibuatnya CSS agar desain terpisah dengan konten.
Metode Internal Style Sheets
Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu halaman HTML. Atribut style yang sebelumnya berada di dalam tag, dikumpulkan pada sebuag tag <style>. Tag style ini harus berada pada bagian <head> dari halaman HTML. Contoh penggunaan metode internal style sheets adalah sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Internal Style CSS</title>
<style type="text/css">
h2 {
background-color:red;
color:white;
}
</style>
</head>
<body>
<h2>
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
Contoh metode internal style sheets diatas sudah jauh lebih baik dari pada inline style. Karena kita sudah memisahkan CSS dari HTML. Seluruh kode CSS akan berada pada tag head dari HTML.
Namun kekurangan menggunakan internal style sheets, jika kita memiliki beberapa halaman dengan style yang sama, maka kita harus membuat kode CSS pada masing-masing halaman tersebut. Hal ini dapat diatasi dengan menggunakan metode external style sheets.
Metode External Style Sheets
Kekurangan dari metode internal style sheets sebelumnya adalah jika ingin membuat beberapa halaman dengan tampilan yang sama, maka akan memiliki kode CSS yang sama.
Metode External Style Sheets digunakan untuk ‘mengangkat’ kode CSS tersebut kedalam sebuah file tersendiri yang terpisah sepenuhnya dari halaman HTML. Setiap halaman yang membutuhkan kode CSS, tinggal ‘memanggil’ file CSS tersebut.
Masih menggunakan contoh yang sama dengan internal style sheets, tahap pertama kita akan pindahkan isi dari tag <style> ke sebuah halaman baru, dan simpan sebagai belajar.css
Perhatikan isi dari file belajar.css
h2 {
background-color:black;
color:white;
}
Pastikan bahwa akhiran dari file tersebut adalah .css dan untuk keperluan contoh kali ini, simpanlah pada folder yang sama dengan halaman HTML kita.
perhatikan gambar berikut :
Kembali kehalaman HTML, CSS menyediakan 2 cara untuk menginput kode CSS tersebut ke halaman HTML, yang pertama adalah mengguanakan @import.
Perhatikan Gambar dibawah ini :
Untuk metode @import external style sheets, ini menyisipkan @import url (belajar.css) pada tag <style>.
Cara yang kedua external style sheets adalah menggunakan tag <link>. Berikut contohnya :
Pada metode link external style sheets ini, kita menggunakan atribut href pada tag <link>, yang berisi alamat dari halaman CSS, dalam hal ini belajar.css
Dari ketiga jenis cara input CSS ke dalam halaman HTML, yang paling direkomendasikan adalah metode external style sheets, baik menggunakan @import maupun dengan tag<link>. Karena dengan menggunakan kode CSS yang dipisahkan, seluruh halaman web dapat menggunakan file CSS yang sama, dan jika kita ingin mengubah seluruh tampilan halaman website, kita cukup mengubah 1 file CSS saja.
Pengertian Selector CSS
Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘mengaitkan’ atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.
Pengertian Property CSS
Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector.
Jika selector digunakan misalnya untuk “mencari seluruh tag <p>”, maka property adalah “efek apa yang ingin dimanipulasi dari tag p tersebut”, seperti ukuran text, jenis fontnya, dll.
Pengertian Value CSS
Value CSS adalah nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latarbelakang dari sebua selector, value atau nilainya dapat berupa red, blue, black atau white.
Untuk lebih jelasnya tentang selector, property dan value CSS, dapat dilihat pada gambar dibawah ini:
Selector, Property dan Value ini adalah elemen inti dari CSS
Sekian Terimakasih
Emoticon