Penerapan Syntax CSS dan Penjelasnnya
CSS adalah suatu kode perintah untuk mengatur dan mengubah tampilan web atau halaman web yang akan ditampilkan sesuai dengan halaman yang tampil dari kode CSS yang diinginkan dengan menggunakan perintah kode CSS tertentu pada bagian tag atu elemen HTML.
Kode CSS memiliki bagian yaitu Selector, Declaration (Property: Value).
Selector adalah Elemen HTML yang ingin diberi style.
Property adalah Atribut dari Elemen HTML yang ingin ditentukan stylenya.
Value adalah Atribut itu sendiri.
selector {
property: value;
}
property: value;
}
body {
background-color: #CCCCCC;
font-family: "Calibri", Verdana, Helvetica;
}
background-color: #CCCCCC;
font-family: "Calibri", Verdana, Helvetica;
}
Keterangan :
Elemen body (tag<body>) akan ditampilkan dengan perintah background berwarna abu-abu (#CCCCCC) dan memberi perintah menggunakan font tulisan "Calibri", Verdana dan Helvetica. Mengapa "Calibri" diberi tanda kutip, ini dikarenakan "Calibri" bukan font standart CSS. Untuk font yang bukan/tidak ada dalam standart CSS maka perlu diberikan tanda kutip. Begitu juga font dengan namanya terdiri dari satu kata maka perlu diberi tanda kutip.
Perlu diperhatikan :
Inheritance/Pewarisan
Memberi style pada elemen body maka elemen yang ada didalamnya akan mengikuti style yang ada di elemen body kecuali, elemen lain didalam body di beri style tertentu/tersendiri.
Contoh :
<html>
<head>
<title>Latihan syntax CSS</title>
<style type="text/css">
body {
background-color:#cccccc;
font-family: "Calibri", Verdana, Tahoma;
}
</style><head>
<body>
<h1>Halo apa kabar</h1>
<p>paragraf halo apa kabar</p>
</body>
</html>
Keterangan :<head>
<title>Latihan syntax CSS</title>
<style type="text/css">
body {
background-color:#cccccc;
font-family: "Calibri", Verdana, Tahoma;
}
</style><head>
<body>
<h1>Halo apa kabar</h1>
<p>paragraf halo apa kabar</p>
</body>
</html>
Elemen didalam body mengikuti style yang ada di elemen body karena belum diberi style tertentu pada elemen didalam body.
<html>
<head>
<title>Latihan syntax CSS</title>
<style type="text/css">
body {
background-color:#cccccc;
font-family: "Calibri", Verdana, Tahoma;
}
h1 {
font-family: "Times New Roman";
}
</style><head>
<body>
<h1>Halo apa kabar</h1>
<p>paragraf halo apa kabar</p>
</body>
</html>
<head>
<title>Latihan syntax CSS</title>
<style type="text/css">
body {
background-color:#cccccc;
font-family: "Calibri", Verdana, Tahoma;
}
h1 {
font-family: "Times New Roman";
}
</style><head>
<body>
<h1>Halo apa kabar</h1>
<p>paragraf halo apa kabar</p>
</body>
</html>
Keterangan :
Elemen head tidak mengikuti style body karena elemen head sudah diberi style sendiri.
body {margin:20px}
Keterangan :
Property margin tidak akan diwarisi oleh eleman didalamnya. Menambahkan property margin pada style body tidak akan mempengaruhi style head <h1> dan paragraph <p>.
Kombinasi Selector
Untuk menghindari pengetikan ulang Style CSS pada eleme HTML yang memiliki style yang sama maka bisa menggunakan selector yang sama dengan cara menambahkan nama tag/elemen nya saja dan dipisahkan dengan tanda koma.
Contoh :
h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}
color: #009900;
font-family: Georgia, sans-serif;
}
Memberikan Komentar pada CSS
Diawali /* diakhiri */ berfungsi mengetikan sesuatu pada file CSS tapi anda tidak ingin teks tersebut di proses.
Contoh : /*Ini adalah komentar*/
Ada 3 cara meletakkan Kode CSS pada elemen HTML :
Internal Style Sheet :
Meletakkan kode CSS pada bagian head pada File HTML atau diantara tag<head> dan tag</ head>.
Contoh :
<head
<style type="text/css">
.. letak kode css ..
</style>
</head>
<body>
<style type="text/css">
.. letak kode css ..
</style>
</head>
<body>
Dengan meletakkan kode CSS pada bagian head, berarti halaman HTML yang anda buat akan mengandung kode CSS. Cara ini bagus jika ingin meletakkan style untuk satu halaman itu saja. Anda juga dapat membuat style berbeda-beda pada tiap-tiap halaman berbeda.
Meletakkan kode CSS pada bagian Tag/Elemen HTML.
Contoh :
<p style="color:#ff0000;">teks warna merah </p>
Keterangan :
Meletakan kode CSS langsung pada paragraph (tag<p>) dengan menambah atribut style dan mengetikkan kode CSS. Ini bagus untuk membuat tiap tag/elemen memiliki style tampilan berbeda. Seperti membuat tulisan berbeda warna.
Eksternal Style Sheet File(.css):
Meletakkan kode CSS pada File yang berbeda. Membuat File Khusus yang berekstensi .css untuk meletakkan kode-kode CSS. Menghubungkan File Khusus .css dengan File HTML dengan mengetikkan kode perintah.
Contoh :
<link rel="stylesheet" type="text/css" href="letak file .css" />
Keterangan:
Misal perintah kode diatas diletakkan pada head.
Atau
Misal perintah kode diatas diletakkan pada head.
External Style Sheet adalah cara terbaik untuk digunakan dari 3 cara yang ada. Hal ini dikarenakan mempermudah pengeditan sewaktu-waktu ada perbaikan selain itu juga mengurangi ukuran file HTML dan menghemat bandwith.
Anda bebas memilih cara yang diinginkan. Jika anda menggabungkan ke tiga cara tersebut maka dalam perintah kode CSS yang digunakan adalah cara yang dipriotaskan. Misalkan anda membuat perintah untuk membuat tulisan berwarna hijau pada cara 3. sedangkan dicara 2 anda ingin tulisan berwarna kuning maka yang digunakan adalah perintah cara 2 secara otomatis.
Menggunakan CSS sebenarnya mudah, hanya saja diperlukan latihan berulang-ulang agar terbiasa. Seperti para desainer web yang profesional, mereka melakukan latihan berulang-ulang dan mengalami kesalahan dan memperbaikinya sehingga mereka menguasai teknik CSS.
Namun, tampilan ditiap browser berbeda-beda karena setiap browser memiliki cara tersendiri dalam menterjemahkan kode CSS. Akan membutuhkan kerja keras untuk membuat tampilan sebuah halaman tampil sama pada browser yang berbeda.
Misal perintah kode diatas diletakkan pada head.
Atau
<style type="text/css">
@import url(letak file .css)
</style>
Keterangan:@import url(letak file .css)
</style>
Misal perintah kode diatas diletakkan pada head.
External Style Sheet adalah cara terbaik untuk digunakan dari 3 cara yang ada. Hal ini dikarenakan mempermudah pengeditan sewaktu-waktu ada perbaikan selain itu juga mengurangi ukuran file HTML dan menghemat bandwith.
Anda bebas memilih cara yang diinginkan. Jika anda menggabungkan ke tiga cara tersebut maka dalam perintah kode CSS yang digunakan adalah cara yang dipriotaskan. Misalkan anda membuat perintah untuk membuat tulisan berwarna hijau pada cara 3. sedangkan dicara 2 anda ingin tulisan berwarna kuning maka yang digunakan adalah perintah cara 2 secara otomatis.
Menggunakan CSS sebenarnya mudah, hanya saja diperlukan latihan berulang-ulang agar terbiasa. Seperti para desainer web yang profesional, mereka melakukan latihan berulang-ulang dan mengalami kesalahan dan memperbaikinya sehingga mereka menguasai teknik CSS.
Namun, tampilan ditiap browser berbeda-beda karena setiap browser memiliki cara tersendiri dalam menterjemahkan kode CSS. Akan membutuhkan kerja keras untuk membuat tampilan sebuah halaman tampil sama pada browser yang berbeda.
