Pagi yang cerah dimana saya dapat diberi rahmat taufik dan hidayah oleh Allah SWT, Alhamdulillah dapat nulis di blog lagi nih.... :)
Sekarang kita seru2 an ama CSS yukk... Sebelum kita seru seruan bareng CSS mari kita ketahui terlebih dahulu Apa sih itu CSS...
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
.artikel
Jika anda
hanya menuliskan satu selector, seperti contoh kode 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).
Anda-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: #66666; }
Property dan Value
Property
adalah sifat-sifat yang ingin diterapkan pada selector, seperti warna text,
warna background, 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.
merubah warna background kita gunakan property
background-color, untuk merubah ukuran huruf kita gunakan property font-size.
Mudah dimengerti bukan?
.artikel
h1 {
color
: red;
background-color
: blue;
font-size
: 20px;
}
Menurut saya,
Kode CSS sangat mudah dimengerti, karena kata-kata yang digunakan sudah tidak
asing lagi, perhatikan contoh kode CSS sebelumnya, jika kita ubah ke bahasa
kita sehari-hari, kira-kira 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?”
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.
<HTML>
<head>
<title>Judul
HTML</title>
<style>
h1
{
color
: red;
}
</style>
</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 misanya namafile.CSS.
Pemanggilan
file CSS dilakukan dengan menggunakan tag link:
<HTML>
<head>
<title>Judul
HTML</title>
<link
rel=‚stylesheet‛ href=‚fileCSS.CSS‛ />
</head>
...
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.
Sekian dahuluyah dah ngantuk nih.. tunggu aku di jam 12 siang yah....
dan Selamat Mencoba :D
0 komentar:
Post a Comment