Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen HTML. CSS memungkinkan kita untuk mengatur tampilan dari banyak dokumen html dengan satu file serta untuk merubah tampilan dari banyak dokumen html tersebut secara cepat dan praktis.
Sederhanya CSS merupakan kumpulan dari tag html yang kita buat kedalam satu file dan dengan metode penulisan tersendiri yang telah distandarisasi oleh W3C (World Wide Web Consortium).
Mengapa harus menggunakan CSS?
Seperti yang telah kita ketahui dengan tag html pun kita telah bisa mengatur tampilan halaman html tersebut dan mengapa harus menggunakan CSS lagi? Banyak manfaat jika kita mengatur tampilan menggunakan CSS.
Bayangkan jika anda misalnya ingin mengganti warna font di web/blog anda, tentu saja anda harus mengedit lagi satu persatu file html dari web/blog tersebut. dan bagaimana jika filenya berjumlah puluhan bahkan ratusan??
hmmm.. pasti akan banyak memakan waktu dan tenaga bukan?? dengan CSS kode HTML menjadi lebih sederhana dan lebih mudah diatur.Bagaimana cara menggunakan CSS?
Ada tiga cara penempatan kode CSS dalam HTML, yaitu :
1. Internal CSS
Yaitu menuliskan secara langsung script CSS kedalam file HTML.
Contoh :
<html>
<head>
<title>CSS Pertamaku</title>
<style type=”text/css”>
p {color: white;}
body {background-color: black;}
</style>
</head>
<body>
<p>Ayo belajar CSS</p>
</body>
</html>
Keterangan : yang berwarna biru adalah script CSS
2. External CSS
External CSS adalah kita membuat file CSS tersendiri dengan eksistensi *.css dan terpisah dari file html dan didtempatkan di folder lain atau di folder yang sama dengan file html tersebut. browser akan menbaca file tersebut dan akan menampilkan file html sesuai dengan format yang telah kita atur dalam file CSS.
Contoh :
<html>
<head>
<title>CSS Pertamaku</title>
<link rel=”stylesheet” type=”text/css” href=”file.css”/>
</head>
<body>
<p>Ayo belajar CSS</p>
</body>
</html>
Keterangan : yang berwarna biru adalah lokasi dari file CSS
3. Inline CSS
Yaitu menuliskan secara langsung script CSS kedalam tag HTML.
Contoh :
<html>
<head>
<title>CSS Pertamaku</title>
</head>
<p style=”background: blue; color: white;”>Ayo belajar CSS</p>
</body>
</html>
Keterangan : yang berwarna biru adalah script CSS
Dari ketiga cara di atas saya menganjurkan anda untuk menggunakan Eksternal CSSSintaks CSS
Dalam menuliskan tag CSS maka terdapat sedikit perbedaan dalam aturan penulisan dengan tag HTML. jika dalam HTML kita akan memformat suatu komponen maka kita gunakan tag dan atribut. contohnya jika kita ingin memformat paragraf menggunakan align (perataan kanan kiri) maka kita menggunakan sintaks berikut <p align=”center”>. p adalah tag dan align=”center” adalah atributnya.
Sedangkan jika menggunakan CSS, sintaks yang kita gunakan adalah Selector, Property dan Value
Penulisan kode CSS dibuat menjadi tiga bagian, yaitu:
selector { property1: value; property2:value; dst}
- Selector
Selector pada CSS sama dengan tag atau komponen pada HTML yaitu yang terdapat antara tanda < dan tanda > misalnya <h1>, <p>, <b> dll. - Property
Selector pada CSS sama dengan atribut pada HTML yaitu. berfungsi untuk memberi nilai dari selector. - Value
Value adalah nilai yang kita berikan kepada property
Jika di HTML kita memformat paragraf dengan <p align=”right”> maka dengan CSS menjadi p {text-align: right;}
Keterangan :
- p adalah selector dan text-align adalah property, right; adalah value atau nilai dari property.
- jika di HTML kita menggunakan tanda <> tetapi pada CSS kita menggunakan tanda {}
- p dalam CSS tidak terdapat dalam tanda { dan tanda } tetapi sebelum tanda tersebut.
- Jika dalam HTML untuk menunjukan Value atau nilai dari atribut kita menggunakan sama dengan (=) sedangkan dalam CSS untuk menunjukan value atau nilai dari property kita menggunakan tanda titik dua (:).
- setelah memberi value di CSS, kita harus menambahkan tanda titik koma (;) di belakangnya.
- Jika selector lebih dari satu dan memiliki property dan value yang sama maka gunakan tanda koma (,)
Class Selector
Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. Misalnya dua type paragraf, peragraf pertama menggunakan align-left dan yang paragraf satu lagi menggunakan align-center.
Contoh Penggunaan atribut class di dalam HTML :
<p class=”left”>
Paragraf ini rata kiri
</p>
<p class=”left”>
paragraf ini rata tengah
</p>
maka penulisan pada file CSS-nya menjadi :
.left {text-align: left}
.center {text-align: center}
Keterangan :
- Pada penulisan nama class dalam file CSS diawali dengan tanda titik (.)
- Tidak dianjurkan memberi nama class dengan angka
- Nama class tidak boleh menggunakan spasi, jika nama class lebih dari dua suku kata maka berikan tanda hubung (-) atau (_)
ID selector digunakan dengan tujuan mendefinisikan per-elemen dasar. setiap halaman id selector hanya boleh digunakan dengan satu id unik, itulah yang menjadi perbedaannya dengan class selector. Dengan class selector kita dapat mendefinisikan perbedaan style untuk tag elemen html yang sama. tetapi dengan id selector kita hanya diperbolehkan memanggil satu id untuk satu elemen yang sama.
Contoh:
<p id=”tebal”>
Paragraf ini ditulis dengan huruf tebal dan warna merah
</p>
<p id=”miring”>
Paragraf ini ditulis dengan huruf miring dan warna biru
</p>
maka penulisan pada file CSS-nya menjadi :
#tebal { font-weight : bold;
color : red; }
#miring { font-style : italic;
color: blue; }
Keterangan :
- pada penulisan nama id dalam file CSS diawali dengan tanda pagar (#)
- Nama id dapat ditulis dengan angka, huruf atau garis bawah
- Karakter pertama sebaiknya huruf atau garis bawah (_)
Dalam aturan standarnya ada beberapa perbedaan antara selector id dan class yang perlu anda ketahui, tetapi pada prakteknya tidak terlalu diperhatikan dan dianggap sama ajaPenulisan Komentar Dalam CSS
Dalam pemograman kita mengenal istilah komentar yaitu bermanfaat untuk memberi penjelasan pada bagian tertentu dari kode yang kita tulis. dan tulisan ini tidak akan ikut dieksekusi oleh browser.
Cara memberi komentar pada CSS adalah diawali tanda /* dan di akhiri tanda */
Contoh :
.left {text-align: left}
.center {text-align: center}/*ini adalah komentar*/
Demikianlah pengenalan tentang apa itu CSS,
Semoga Bermanfaat.....
Nama saya Yudi Aditya, Saya Bukan Seorang Blogger, Desainer atau Apapun Tapi Saya Hanya Seseorang Yang Ingin Selalu Belajar dan Ingin Tahu Sesuatu Yang Baru...
Postingan
0 komentar:
Posting Komentar