CSS
CSS merupakan
singkatan dari Cascading Style Sheet. Menurut wikipedia,
CSS adalah aturan untuk mengendalikan beberapa komponen dalam sebuah web
sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa
pemograman. Css saat ini di kembangkan oleh World Wide Web Consortium
atau yang biasa lebih dikenal dengan istilah W3C. Css bukan menggantikan
kode html, tetapi hanya di fungsikan sebagai penopang atau pendukung dari file
html yang berperan dalam penataan kerangka dan layout web.
1. Aturan Penulisan CSS
Prinsip dasar penggunaan CSS di dalam dokumen HTML
adalah untuk menyediakan style yang digunakan untuk mengatur
bagian-bagian HTML. Contoh, suatu style dapat di pakai untuk mengatur
jenis, ukuran, dan bahkan warna suatu teks. Style mengandung dua bagian yaitu selektor
dan deklarasi properti. Selektor untuk menyatakan bagian dalam
HTML yang akan diatur melalui style. Sedangkan properti untuk menyatakan
sifat dalam tag HTML yang diatur melalui style.
Sintaks penulisannya :
2. Css Bersifat Case Sensitive
Maksud case sensitive disini membedakan huruf
kapital dan huruf kecil. Hal ini penting diketahui karena kalau kita ingin
menulis nama kelas atau nama ID dalam style. Contoh :
Maka nim akan dibedakan dengan
Nim ataupun NIM.
mudah dipahami
gunakan penamaan yang
mengandung makna dan
mudah dipahami oleh
orang.Contoh :
·
nama
seperti warna Merah lebih baik dari pada wmr.
·
warnaMerah bisa juga ditulis menjadi
warna-merah atau warna_merah. Tanda minus (-) ataupun garis bawah ( _ ) boleh
dipakai untuk nama.
·
Namun yang perlu di ingat, warnaMerah,
warna-merah, warna_merah adalah tiga nama yang berbeda.
·
Penulisan nama boleh menggunakan angka,
tetapi spasi atau tanda-tanda lain tidak boleh digunakan untuk nama.
Komentar adalah suatu bagian dalam kode yang
diperlakukan bukan sebagai kode, melainkan berfungsi sebagai keterangan bagi
pembaca kode. Pada dokumen HTML, komentar diawali dengan <!-- dan diakhiri
dengan -->. Adapun pada CSS, komentar ditulis dengan awalan /* dan diakhiri
*/.
Sintaks
Penulisannya:
4. Cara Menggunakan CSS
Untuk menggunakan CSS, ada 3 cara yang bisa kita
gunakan yaitu Embedded Style Sheet, Inline
Style Sheet, dan Linked Style Sheet.
4.1 Embedded Style Sheet
Embedded Style Sheet adalah
cara penulisan kode dimana penulisan CSS dilakukan pada tag HTML, yaitu
pada tag <style> ... </style> dan sebelum tag <body>. Pada
tag tersebut akan disisipkan kode CSS yang akan digunakan oleh tag HTML.
Sintaks
penulisannya
:
<style type="text/css">
<!—Atribut CSS -->
</style>
latihan1.html
><!DOCTYPE
HTML>
<html>
<head>
<title>Latihan
1</title>
<style
type="text/css">
/* Ini Selektor h1 di jadikan sebuah komentar
h1{
background-color:purple;
}
*/
body{ background-color:blue; color:white;
}
h1{ text-align:center;
}
p{ text-align:right;
font-size:18px; font-weight:bold; color:yellow;
} hr{
color:red;
}
</style>
</head>
<body>
<h1>=|| TOKO PAKAIAN MURAH MERIAH
||=</h1> <p>Jl.Gratis No.008, Condong Catur, Sleman<br/>
Yogyakarta
</p>
<hr />
</body>
</html>
4.2 Inline Style Sheet
Inline Style
Sheet adalah cara
penggunaan CSS langsung
pada tag HTML
yang di
butuhkan saja.
Cari ini dilakukan umumnya dikarenakan hanya sedikit properti yang dibutuhkan.
Sintaks
penulisannya
:
latihan2.html
4.3 Linked Style Sheet
Linked Style
Sheet adalah cara
yang dianjurkan untuk
menggunakan kode css
dengan
HTML. Metode ini merupakan cara pengerjaan dimana antara kode css dan HTML di
pisahkan. Untuk menggunakan kode css yang telah dipisahkan ini, maka dalam kode
html dibuat skrip yang isinya adalah memanggil file css tersebut untuk
digunakan dalam kode html. Untuk me-link/memanggil kode css di dalam kode html,
bisa menggunakan kode berikut.
Sintaks
penulisannya
:
latihan3.html
<!DOCTYPE HTML> <html>
<head>
<title>Latihan
3</title>
<link rel="stylesheet"
href="style.css" type="text/css" /> </head>
<body>
<h1>TANAMAN
HIAS BUNGA</h1> <h2>ANGGREK</h2>
<p>Suku anggrek-anggrekan atau
Orchidaceae merupakan satu suku tumbuhan berbunga dengan anggota jenis
terbanyak. Jenis-jenisnya tersebar luas dari daerah tropika basah hingga
wilayah sirkumpolar, meskipun sebagian besar anggotanya ditemukan di daerah
tropika.</p>
</body>
</html>
style.css
body{
background:url(latar.jpg);
font-family:Georgia;
}
h1{ background-color:purple;
text-align:center; color:white;
} h2{
color:red; font-size:25px;
}
p{ margin-left:50px; color: blue; font-size:24px;
}
5. Jenis-Jenis Selektor
Selektor atau pemisah dalam CSS,
dibagi menjadi beberapa bagian, antara lain:
5.1 Tag / elemen HTML
Menggunakan tag yang
terdapat pada HTML. Setiap tag yang ada dalam HTML bisa dijadikan selector.
Contoh :
5.2 Kelas
Penggunaan selektor
kelas akan diawali pengan tanda titik ( . ) di awal penulisannya, kemudian pada
tag HTML ditambahkan class = (nama kelas).
Contoh :
5.3 ID
Selektor ID digunakan
untuk mendefinisikan tag secara individual atau spesifik. Penggunaan selector
ID akan diawali dengan tanda pagar ( # ).
Contoh :
Style diatas akan digunakan oleh
tag yang mengandung identitas khusus header, misalnya:
latihan4.html
<!DOCTYPE HTML> <html>
<head>
<title>Latihan
4</title>
<link rel="stylesheet"
href="gaya.css" type="text/css" /> </head>
<body>
<div
id="atas"> Toko Onlineku </div>
<h1>Deskripsi:</h1> <div class="isi">
Toko online ini menjual barang-barang
elektronik baru dan bekas dengan harga yang terjangkau.</div>
</body>
</html>
gaya.css
#atas { background-color:red; color:white;
font-size:50px; text-align:center;
}
h1 {
color:black;
}
.isi{ font-family:arial; font-size:30px;
color:blue;
}
6. Grouping Element
Tag DIV dan SPAN digunakan untuk
mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan
inline content, sementara div digunakan untuk block level content.
Perbedaan dari kedua tag tersebut adalah sebagai berikut:
- Tag div akan membagi halaman web secara otomatis meskipun di dalam tag div tersebut tidak diatur format stylenya (css).
- Tag span hanya akan mengatur konten/isi yang dilingkupinya tanpa membagi halaman web ke dalam bagian-bagian kecil (seperti yang dilakukan tag div).
<!DOCTYPE HTML> <html>
<head>
<title>Latihan
5</title>
<style
type="text/css"> div{ font-family:verdana; color:#0000FF;
background-color:#FFFF00; font-size:36px; text-align:center; width:800px;
}
</style>
</head>
<body>
<div>
<p>Ini Contoh Penggunaan DIV</p>
</div>
<span style="font:Arial;
color:#FF0000; font-size:24px">Ini Contoh dalam Span dengan warna
merah</span>
</body>
</html>
