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 difungsikan 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.
Lihat gambar berikut.
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 :
.nim {
. . .
}
Maka nim akan berbeda dengan Nim ataupun NIM. Untuk memberikan nama dalam CSS misalnya untuk nama kelas atau nama ID agar mudah dipahami gunakan penamaan yang mengandung makna dan mudah dipahami oleh orang.Contoh :
- nama seperti warna Merah lebih baik dari pada wmr.
- warna Merah 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 */.
Sintaknya :
/*
Isi komentar
*/
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.
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.
Sintaknya :
<style type="text/css">
<!—Atribut CSS -->
</style>
Contoh :
<!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>
Output script diatas :
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.
Sintaknya :
<tag HTML style=”Properti:value/nilai”> ... </tag HTML>
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Contoh</title>
</head>
<body>
<h1 style="background-color:red; color:white; text- align:center">Belajar CSS</h1>
<p style="border:1px solid">
CSS adalah aturan untuk mengendalikan beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan merupakan bahasa pemograman.
</p>
<p>CSS merupakan singkatan dari Cascading Style Sheet.</p>
</body>
</html>
Output script diatas :
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 :
Sintaknya :
<link rel=”stylesheet” href=”namafile.css” type=”text/css”>
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Contoh</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(x.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;
}
Semoga bermanfaat, terima kasih atas kunjungannya.
Tidak ada komentar:
Posting Komentar