Pengertian CSS
CSS (Cascading
Style Sheet) adalah salah satu bahasa desain web (style sheet
language) yang mengontrol format tampilan sebuah halaman
web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML
dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML,
termasuk SVG dan XUL bahkan ANDROID.
Ciri-ciri script / perintah CSS
- Bila digabungkan bersama dengan file HTML, diletakkan pada tag <head>, dan diletakkan didalam tag <style>.
Contoh: <head><style>
</style><head>
- Bila tidak tergabung pada file HTML, atau file berdiri sendiri, biasanya menggunakan perintah / kode <link rel="stylesheet" href="alamat_file_css">, untuk me-load atau memanggilnya ke halaman HTML.
- Penulisannya seperti ini, elemen_atau_selector{property: value;} , artinya elemen atauselector (ID / Class) yang akan kita berikan gaya/ css kita buat terlebih dahulu kemudian properti css diletakkan pada kurung kurawal "{ }", dan sebagai pemisah antar CSS menggunakan semi kolon (Titik Koma)";". Contoh: #menu{background: blue; width: 100%;}
- Kode CSS juga dapat terletak dibagian elemen terkait / yang membutuhkan itu sendiri, contohnya : <div id="header-wrapper" style="height: 200px; background: red;>. Disini elemen header-wrapper menggunakan tinggi 200 pixel dan background berwarna merah, dan yang mendapatkan pengaruh dari CSS tersebut hanya elemen "header-wrapper".
Contoh kode CSS
- Background
- CSS yang mengatur warna dari suatu elemen, contoh :#footer{background:brown;}
- Dapat juga digunakan untuk menjadikan gambar sebagai background suatu elemen.
- Agar lebih detail bisa menggunakan background-color untuk warna, dan background-image untuk gambar. Selengkapnya tentang Background pada artikel ini
- Color
- CSS yang mengatur warna huruf atau kata-kata yang ada pada halaman website atau suatu elemen, contoh: #article{color: #000;}
- Width
- CSS yang mengatur lebar suatu elemen, contoh: body{width: 1200px;};
- Height
- CSS yang mengatur tinggi suatu elemen, contoh: header{height: 200px;}
- Border
- CSS yang mengatur bingkai suatu elemen, contoh: .sidebar{border: 2px solid #000}
- Dan lain sebagainya
Eksternal Style Sheet
Eksternal style sheet sangat ideal digunakan untuk halaman web yang banyak. Dengan cara ini, apabila Anda ingin mengubah tampilan web, Anda hanya perlu mengedit/mengubah file CSS saja. Untuk menggunakannya, setiap halaman harus di link-kan ke style sheet menggunakan tag link. Tag link diletakkan dibagian head.
Internal Style Sheet
Cara ini, perintah CSS akan didefinisikan langsung dibagian head HTML, dengan menggunakan tag style.
1
2
3
4
5
6
7
| <head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head> |
Inline Style
1
| <p style="color:sienna;margin-left:20px">Ini adalah sebuah paragraf.</p> |
style.css merupakan nama file style sheet (CSS). File ini ditulis dengan perintah CSS tanpa mengandung tag HTML. Serta disimpan dengan ekstensi .css. Berikut contoh dari file style.css :
Catatan : Ketika menuliskan value property dan unitnya, jangan menambahkan spasi (seperti “margin-left:20 px”). Namun yang benar ialah :
Catatan : Ketika menuliskan value property dan unitnya, jangan menambahkan spasi (seperti “margin-left:20 px”). Namun yang benar ialah :
Tidak ada komentar:
Posting Komentar