- Cascading Style Sheets di website (blog) merupakan program style sheet yang mengatur dan mengendalikan webpage, termasuk di dalamnya : gambar, bagian body, tabel, mouseover, border, warna, hyperlink (link), alinea, spasi, margin kiri/kanan/atas/bawah dan parameter lain.
CSS memungkinkan ditampilkan webpage sama dengan format beda
- CSS merupakan pemrograman untuk mengendalikan komponen website sehingga lebih terstruktur dan seragam.
Nama Cascading Syle Sheets didapat dari fakta bahwa setiap deklarasi style yang berbeda-beda bisa diletakkan secara berurutan, membentuk hubungan parent-child pada setiap deklarasi style.
Sintax Dasar CSS dalam penulisan file HTML website
Awalnya semua penulisan kode - termasuk pengaturan presentasi - ditulis dalam tag HTML. Kemudian dirintis penulisan kode PENGATURAN PRESENTASI tampilan dokumen website secara tersendiri dan dikenal sebagai bahasa kode CSS untuk style tampilan webpage (halaman web).
Bentuk penulisan dasar CSS - arsip website
selector {property : value}
Selector = merupakan tag HTML atau elemen (baik class maupun id) yang akan diatur.
Bagian yang diapit '{}' disebut declaration terdiri 2 unsur, property dan value.
Property = merupakan atribut elemen yang ingin ditentukan nilainya.
Value = merupakan nilai dari atribut elemen, bisa berupa angka dan text.
Sebagai contoh, sering kita dijumpai kode seperti di bawah ini :
h1 { color: #ff0000; }
kode warna color: #ff0000; bisa juga ditulis dalam bentuk color: red sehingga menjadi :
h1 { color: red; }
Penjelasannya :
- tag header yaitu h1 merupakan selector
- color merupakan property
- #ff0000 atau red merupakan value. Tapi disarankan gunakan code warna (e.g #ff0000)
Perhatikan pendefinisian property dan atribut berada diantara tanda ini { … dan … }. Pendefinisian value dengan tanda ":" dan diakhiri tanda ";"
PENULISAN CSS
CSS Internal memiliki 2 cara penulisan dan 1 cara penulisan CSS Eksternal.
A. METODE PENULISAN CSS INTERNAL
(1). Metode Inline Style Sheet
CSS didefinisikan langsung pada tag HTML bersangkutan. Cara penulisan dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style ini hanya berlaku pada tag bersangkutan, dan tidak berpengaruh pada tag lain. Contoh lihat gambar di bawah ini :
(2). Metode Embedded Style Sheet
CSS didefinisikan terlebih dulu dalam tag <style> ... </style> di atas tag <body> dan dibawah </head>. Pada pendefinisian ini disebutkan, atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag yang bersangkutan (tag-tag yang ada diantara<body> … </body>.
LATIHAN
Sisipkan snippet CSS di bawah ini di bagian head, diantara <head> … </head> dokumen HTML :
Kemudian setiap huruf pertama atau kata pertama atau frase pertama pada posting baru diatur seperti ini : (misalnya pada frase pertama) :
<span class="dropcap">Cascading Syle Sheets</span>  pada website bla bla bla ...
Maka hasilnya terlihat seperti pada baris pertama artikel ini (hasilnya lihat gambar berikut ini) :
B. METODE LINKED STYLE SHEET (Untuk CSS Eksternal)
Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian :
tag <style> ... </style>
Dibuat file terpisah dari file HTML yang membutuhkan CSS. File tersebut disimpan dalam format.css.
File HTML yang akan menggunakan file CSS, harus dibuat tag<link> yang dituliskan di antara :
tag <head> ... </head>
Contoh seperti dibawah ini (simpanlah dengan nama file contoh.css) :
Penggunakan CSS
* Telah didukung oleh kebanyakan browser versi terbaru.
* Fleksibel dalam penempatan posisi layout.
Dalam layouting CSS ada Z-Index untuk menempatkan objek dalam posisi sama.
* Menjaga HTML atau XHTML dalam penggunaan tag dengan jumlah minimal.
Hal ini berpengaruh terhadap ukuran file website dan speed pengunduhan (loading).
* Bisa menampilkan konten utama terlebih dahulu, sementara tampilan gambar menyusul.
* Interpreter CSS setiap browser berbeda, layout akan berubah jika dilihat dari berbagai browser
* Merupakan CSS layouting "Masa Depan" dengan penggabungan bersama XHTML.
* Fleksibel dalam penempatan posisi layout.
Dalam layouting CSS ada Z-Index untuk menempatkan objek dalam posisi sama.
* Menjaga HTML atau XHTML dalam penggunaan tag dengan jumlah minimal.
Hal ini berpengaruh terhadap ukuran file website dan speed pengunduhan (loading).
* Bisa menampilkan konten utama terlebih dahulu, sementara tampilan gambar menyusul.
* Interpreter CSS setiap browser berbeda, layout akan berubah jika dilihat dari berbagai browser
* Merupakan CSS layouting "Masa Depan" dengan penggabungan bersama XHTML.
- That's all we know -
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgqz1Fz0W3QZkeG4LsKvQplfCdmyhCrU3j95NWl1i-XarshrBBaYCr4hKUMKj5XbhHwJRvEFMd3j2pDLZepCzvjQU0kMiNhvbs51qAWczA_Mrw7y_wj0czorZsxBhfr9Y5Q8IN_vsORSA/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
