Pengenalan CSS

No Comments


Selamat Siang.
Pada kesempatan kali ini kita akan belajar CSS dasar, jadi kita akan memulai dengan Pengenalan CSS terlebih dahulu, baiklah langsung saja disimak dibawah ini.

CSS adalah kependekan dari Cascading Style Sheet, berfungsi untuk mempercantik penampilan HTML atau menentukan bagaimana elemen HTML ditampilkan, seperti menentukan posisi, merubah warna teks atau background dan lain sebagainya.

Perhatikan contoh kode CSS berikut :


Selector

Selector adalah elemen/tag HTML yang ingin diberi style. Anda dapat menuliskan langsung nama tag yang ingin diberi style tanpa perlu menambahkan tanda <>. Pada contoh kode CSS di atas, kita akan memberi style pada seluruh tag h1 yang terdapat dalam file HTML.

Jika tag HTML yang ingin diberi style memiliki ID, anda dapat menuliskan nama ID tersebut dengan diawali tanda kress (#).

#header

Dan jika tag yang diberi style memiliki class, maka penulisan selector bisa dilakukan dengan tanda titik (.) diikuti dengan nama class.

.artikel

 Jika anda hanya menuliskan satu selector, seperti contoh code CSS di atas, maka seluruh tag h1 yang terdapat dalam file HTML akan memiliki style yang sama. Bagaimana jika kita hanya ingin memberi style pada tag h1 yang hanya terdapat di dalam Class artikel. Maka penulisan selectornya seperti berikut :

.artikel h1

 Kode tersebut akan memerintahkan pada browser untuk memberi style pada tag h1 yang hanya terdapat di dalam class artikel (atau - h1 yang merupakan child dari class artikel).

Andap -pun dapat memilih lebih dari satu tag untuk penghematan kode CSS. Misalnya ketika anda memiliki dua atau lebih tag dengan warna  background yang sama, dari pada menuliskan kode seperti ini :

h1{ background-color: #666666; }
p { background-color: #666666; }
a{ background-color: #666666; } 

anda dapat menggabungkan selector dengan menambahkan tanda koma pada nama tag yang ingin diberi style.

h1, p, a { background-color: #666666; }


Property dan Value 

Properti adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text, warna background, jarak antar halaman, jarak antar elemen, garis pinggir dan lain sebagainya.

Untuk memberikan nilai/value pada property kita gunakan tanda titik dua (:). Setiap property diakhiri dengan titik koma (;), jika anda tidak mengakhirinya maka browser tidak akan mengetahui maksud dari property tersebut.

Property-property pada CSS sangat mudah dimengerti karena lebih mirip bahasa sehari-hari. Misalnya untuk merubah text kita gunakan property color, untuk merubah warna background kita gunakan property background-color, untuk merubah ukutan huruf kita gunakan property font-size. Mudah dimengerti bukan?

.artikel h1 {
 color : red;
bakcground-color : blue;
font-size : 20px;
}

Menurut saya, kode CSS sangat mudah dimengerti, karen kata-kata yang digunakan sudah tidak asing lagi, perhatikan contoh kode CSS sebelumnya, jika kita ubah ke bahasa kita sehari-hari menjadi seperti berikut :

"Hey Brow (Browser) Cari tag h1 yang terdapat di dalam class artikel, jika ditemukan/ada, ubah warnanya menjadi merah, warna background menjadi biru dan ukuran huruf menjadi 20 pixel."

Cukup perkenalan dengan CSS-nya, lalu yang menjadi pertanyaan besar anda saat ini adalah : 

"Dimana saya mengetikkan kode tersebut?" 


Penulisan CSS

Ada tiga cara penulisan kode CSS, yaitu inline, internal dan external. Ketiganya bisa anda lakukan sesuai dengan kebutuhan. Berikut contoh penggunaan dari metode-metode tersebut :

Inline

Penulisan kode CSS dengan metode inline ini bisa dilakukan langsung pada tag yang ingin diberi style dengan menggunakan atribut style.

<h1 style="color : red; "> Judul Situs </h1> 

Pada metode ini, anda tidak perlu menuliskan selector. Karena anda menuliskan CSS langsung pada tag yang ingin diberi style. 
Cara ini sangat tidak dianjurkan, karena anda akan mencampurkan antara "Format" dan "Presentasi" . Cara ini juga tidak efektif ketika anda akan melakukan perubahan pada CSS.

Internal

Metode CSS internal ditulis di dalam tag style yang ditempatkan pada tag head.


Metode kedua ini sangat dianjurkan untuk pengujian style, atau ketika anda hanya memiliki satu halaman web.

External

Metode yang terakhir adalah dengan membuat file CSS dan dipanggil di dalam tag head. File CSS memiliki ekstensi (akhiran). CSS misalnya namafile.CSS.

Pemanggilan file CSS dilakukan dengan menggunakan tag link :


Atribut rel adalah informasi hubungan (relationship) dari tag link tersebut, yaitu sebagai stylesheet. Href diisi dengan lokasi file CSS yang ingin dimuat. Pemanggilannya sama dengan pemanggilan gambar atau link.


Demikian dulu postingan kali ini, semoga bermanfaat bagi kita semua terutama untuk saya sendiri.
Next PostPosting Lebih Baru Previous PostPosting Lama Beranda

0 komentar

Posting Komentar