Css sendiri memiliki kelebihan sebagai berikut:
1. Memisahkan desain dengan konten halaman website
2. Dapat mengatur desain seefisien mungkin
3. Ukuran file ringan dan mudah didownload
4. Satu css dapat digunakan banyak halaman website.
Css dapat dibagi menjadi 3 berdasarkan letak penempatannya yaitu:
1. Inline style css, yaitu kode css diletakkan sebagai atributpada tag html. Contohnya dapat dilihat sebagai berikut.
<p style="color : #999;">
teks paragrap ditulis disini
</p>
Penulisan css seperti ini dianggap tidak efisien karena style hanya berlaku pada tag html yang ditempatinya saja, sementara jika kita mau memberikan style yang sama pada tag html yang lain maka kita harus mengetikkan lagi stylenya sebagai atribut di tag tersebut.
2. Header style css, yaitu baris kode css yang diletakkan diantara tag head buka dan tag head tutup.
<head>
<style>
p{
color : #999;
font-size : 25px;
}
</style>
</head>
Metode ini sudah efisien dan dapat memberikan style kepada banyak tag html tetapi masih kurang baik karena hanya dapat memberikan style pada satu file website saja
3. External style css, yaitu kode css yang dibuat pada file tersendiri yang terpisah dari file html website teman - teman, metode ini dianggap sangat efisien dalam membuat style menggunakan css karena dapat digunakan oleh beberapa file website. File website kita dapat dihubungkan dengan file css melalui tag seperti berikut
<link href="lokasi file css" rel="stylesheet" type="text/css">
Lokasi file css diletakkan pada atribut rel.
Selector
Menurut saya selector adalah hal yang paling penting dalam membuat style menggunakan css. Selector digunakan untuk menentukan bagian mana pada tag - tag html yang akan dikenakan style. Selector pada css juga dibagi menjadi 3 yaitu:
1. Class selector
Class digunakan untuk memberikan identitas pada suatu tag html dan dapat diterapkan kepada beberapa tag html sekaligus, sehingga selector ini adalah selector yang paling serbaguna. Class dideklarasikan dengan memberikan atribut "class" pada tag html dan teman - teman bisa dengan bebas memberikan nama class tersebut. Penulisan class pada css disimbolkan dengan tanda "." (titik) kemudian nama class yang akan dikenakan style.
.header{
color : #999;
font-size : 40px;
}
Pada baris pertama terdapat selector class "header" yang ditandai dengan tanda "." (titik). Style dituliskan diantara kurung kurawal buka "{" dan kurung kurawal tutup "}". Maka semua tag html yang diberikan class "header" akan mendapatkan style tersebut diatas.
2. Id selector
Id selector ditandai dengan tanda "#" (pagar) dalam css. Id selector menggunakan penamaan yang unik kepada tag pada html, dengan kata lain tidak boleh ada dua id atau lebih yang memiliki nama yang sama. Sebagai contoh bisa dilihat kode dibawah ini.
Penulisan kode dalam html
<!DOCTYPE>
<html>
<head>
<title>id selector</title>
</head>
<body>
<div id="footer">
copyright candukoding.blogspot.com
</div>
</body>
</html>
Penulisan kode dalam css
#footer{
color : green;
border : 1px solid #999;
}
Dengan bahasa yang lebih mudah, id selector hanya digunakan kepada section - section yang berjumlah satu di dalam website misalkan header, konten, footer.
baca juga: (Penggunaan div tag pada html)
3. Tag selector
Nama dari tag html yang digunakan sebagai selector misalkan <h1>, <p> dan banyak lagi lainnya. Dalam penulisan kodingnya di css kita hanya perlu mengetikkan nama tag yang akan diberikan style.
Penulisan kode dalam html
<!DOCTYPE>
<html>
<head>
<title>tag selector</title>
</head>
<body>
<p>
ini adalah paragrap
</p>
</body>
</html>
Penulisan kode dalam css
p{
background-color : #999;
font-size : 20px;
}
Kode css diatas berarti seluruh tag <p> akan mendapatkan style.
Kita dapat menggunakan selector dengan tepat jika kita mengerti kegunaan masing - masing selector dengan baik, class selctor digunakan ketika kita ingin memberikan style kepada banyak section sekaligus, id selector digunakan jika kita ingin memberikan style kepada satu section khusus yang ada pada website.
Berikut adalah beberapa properti dasar pada css beserta dengan value yang dapat anda gunakan untuk mendesain website anda.
1. Width & Height. Digunakan untuk mengatur lebar & tinggi objek dan atau section pada website
Value. Dapat diatur sendiri menggunakan satuan pixels dan em, contoh: width : 10px;
2. Margin. Mengatur jarak antara objek yang dikenakan style dengan objek yang berada diatas, kanan, bawah dan juga kirinya.
Value. Dapat diatur sendiri menggunakan satuan pixels dan em, contoh: margin : 10px 10px 10px 10px;
Value disusun mulai dari margin atas, margin kanan, margin bawah dan margin kiri.
3.Padding. Mengatur jarak isi dari sebuah section dengan border section. Value sama dengan properti margin.
4. Color. Mengatur warna tulisan.
Value. Dapat berupa hexadecimal (#999), rgb(rgb(250,250,250)),nama warna(red)
5. Background color. Mengatur warna latar belakang suatu section. Value sama dengan properti color.
6. Text-align. Mengatur perataan suatu objek atau section pada website.
Value. Left, center, right, justify.
7. Border. Mengatur border suatu section pada website.
Value(ukuran,jenis border,warna border), sebagai contoh: border : 1px solid black.
8. Float. Mengatur section agar dapat ditempatkan dikiri atau dikanan.
Value. left, right.
9. Font-size. Digunakan untuk mengatur ukuran font pada website.
10. Font-family. Digunakan untuk mengatur jenis font yang digunakan.
11. Font-weight. Digunakan untuk mengatur ketebalan tulisan pada website.
Masih banyak lagi properti css yang dapat anda gunakan untuk mendesain website anda yang dalam tutorial - tutorial berikutnya akan saya praktekkan. Semoga tutorial dasar css ini dapat dimengerti dan bermanfaat bagi teman - teman sekalian. Sekali lagi, jangan segan - segan untuk bertanya jika ada yang belum jelas ya teman - teman.
