CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”. Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.(http://imaniania5.blogspot.com/2013/10/pengertiandefinisi-dan-fungsi-dari-css.html)
B. Perintah CSS
SYNTAX CSS
Aturan penulisan CSS terdiri dari dua bagian utama, yaitu sebuah selector dan satu atau
beberapa deklarasi.
Keterangan:
• Selector
selector adalah HTML elemen yang ingin kita ubah. Selector bisa juga berupa id/
• Declaration
Declaration terdiri dari property dan value.
• Property
Property adalah atribut dari style yang ingin kita ubah.
• Value
Value adalah nilai dari atribut style yang dideklarasikan.
Penulisan syntax html akan sedikit berbeda dengan syntax CSS. Pada syntax html,
pendeklarasian attributnya selalu diberi tanda petik dua ( “ ) pada bagian value dan
tanpa diakhiri titik koma ( ; ), sedangkan pendeklarasian attribute CSS pada bagian value
tidak akan diberikan tanda petik dua ( “ ) dan selalu diakhiri dengan titik koma ( ; ), dan
declaration groups akan diapit di dalam kurung kurawal ( { } ).
Agar Syntax CSS lebih mudah dibaca, penulisannya seperti dibawah ini:
P
{
color : red;
Text-align : Center;
}
Sintaks dari HTML
Penulisan kode CSS dibuat menjadi tiga bagian, yaitu:
selector { property1: value; property2:value, . . .}
ex. H1{ color:green; background-color:orange}
Ket:
1. Selector
Bagian pertama sebelum tanda “{}” disebut selector.Selector adalah tag html yang umumnya kamu
ketahui.
2. Declaration
Terdiri dari property dan nilainya.Property adalah atribut yang kamu ingin ubah dan tiap property
mempunyai nilai/value.
Catatan:
- Jangan ada spasi antara property value dengan unitnya(1).
- Nama property bersifat case sensitif dan menggunakan huruf kecil.
- Jika nilai /value lebih dari satu kata, maka gunakan tanda petik di antara nilai(2)
- Jika property lebih dari satu, maka gunakan tanda titik koma untuk membatasi property
- Jika selector lebih dari dan mempunyai property dan value yang sama maka gunakan tanda koma(6).
Ada tiga cara penempatan kode CSS dalam HTML, yaitu :
1. Internal CSS
Yaitu menuliskan langsung script CSS di file HTML-nya.
Contoh :
<html>
<head>
<title>Belajar CSS</title>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>Selamat Datang CSS</p>
</body>
</html>
2. External CSS
Yaitu memanggil file CSS dari tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan
file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format
tersebut.Eksternal style ditulis di text editor lain dengan ekstention .css Untuk lebih jelasnya kita
lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
<link rel=”stylesheet” type=”text/css” href=”test.css”/>
</head>
<body>
<h3> Selamat Datang CSS </h3>
</body>
</html>
3. Inline CSS
Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini:
<html>
<head>
<title>Belajar CSS</title>
</head>
<p style=”background: blue; color: white;”>Style Menggunakan CSS</p>
</body>
</html>
(https://aisah94.wordpress.com/2014/05/24/pemrograman-internet-definisi-css-fungsi-css-syntax-css-sifat-css-metode-penulisan-css-property-csscss-id-class/)
Tidak ada komentar:
Posting Komentar