Membuat dan menggunakan Cascading Style Sheet (CSS) bagi pemula lengkap
Tuesday, 16 October 2018
Add Comment
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS
bukan merupakan bahasa pemograman. Pada umumnya CSS dipakai untuk memformat
tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat
mengendalikan ukuran gambar, warna pada teks, warna tabel, ukuran border,
warna border, warna hyperlink, warna mouse over, spasi antar paragraf,
spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter
lainnya.Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang
sama dengan format yang berbeda. Untuk saat ini terdapat tiga versi CSS,
yaitu CSS1, CSS2, dan CSS3. CSS1 dikembangkan berpusat pada pemformatan
dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format
dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi
terbaru dari CSS yang mampu melakukan banyak hal dalam desain website. CSS2
mendukung penentuan posisi konten, downloadable, huruf font,
tampilan pada tabel /table layout dan media tipe untuk printer.
Kehadiran versi CSS3 diharapkan lebih baik dari versi pertama dan kedua.
1. Konstruksi aturan Style
CSS memiliki aturan dalam penulisannya yaitu ada bagian utama, yang dinamakan selector dan ada satu atau lebih bagian deklarasi.
Bagian selector biasanya ditulis menggunakan perintah html yang biasa digunakan , sedangkan deklarasi biasanya terdiri atas properti dan nilai. Properti sendiri adalah atribut style yang ingin diubah. Setiap properti selalu memiliki sebuah nilai Sebuah deklarasi CSS selalu diakhiri dengan titik koma dan kelompok deklarasi dikelilingi kurung kurawal. Seperti yang sudah dibahas sebelumnya bahwa ada 2 cara yang bisa diterapkan untuk menggunakan CSS pada web yaitu dengan inline style sheet dengan membuat CSS langsung dari satu file ataupun external style sheet menggunakan file CSS tersendiri.
Inline style sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut.Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.
Embedded Style Sheet
Cara penulisan secara embedded termasuk ke dalam internal style sheet. CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Melakukan link ke External Style Sheet
Cara penulisan External Style Sheet dengan menuliskan code css di sebuah file terpisah kemudian memanggilnya dengan perintah link untuk menggabungkannya dengan program utama yang memanggil.
2. Menciptakan class selector dan Id untuk diaplikasikan ke Style
Selain menggunakan style html , CSS memungkinkan untuk menentukan penyeleksi yang dibuat pengguna sendiri yang disebut ―id‖ dan ―kelas‖. Id selektor harus elemen tunggal yang unik didefinisikan dengan tanda #
Class selector digunakan untuk menentukan gaya sekelompok elemen. Berbeda
dengan id selector , class selector paling sering digunakan pada beberapa
elemen. Hal ini memungkinkan pengguna untuk menetapkan gaya tertentu untuk
banyak elemen HTML dengan kelas yang sama.
3. Menciptakan Style untuk nested tag (Pengelompokan tag)
Dalam style sheet sering terdapat unsur-unsur dengan gaya/style yang sama. Misalkan sebagai berikut :
Untuk meminimalkan kode, style tersebut dapat di kelompokkan dengan
memisahkan masing-masing nama style dengan koma. Pada contoh di bawah ini
merupakan hasil pengelompokkan kode program di atas.
4. Aplikasi Style ke hyperlink dengan Pseudo-classes
pseudo-class biasa digunakan untuk mendefinisikan state khusus dari elemen web. Sebagai contoh dapat digunakan untuk menciptakan style pada elemen pada saat mouse berada di atasnya atau Menambahkan style pada link yang sudah pernah di kunjungi. Sintak dari pseudo-classes:
Macam macam pseudo-classes
1. Konstruksi aturan Style
CSS memiliki aturan dalam penulisannya yaitu ada bagian utama, yang dinamakan selector dan ada satu atau lebih bagian deklarasi.
Bagian selector biasanya ditulis menggunakan perintah html yang biasa digunakan , sedangkan deklarasi biasanya terdiri atas properti dan nilai. Properti sendiri adalah atribut style yang ingin diubah. Setiap properti selalu memiliki sebuah nilai Sebuah deklarasi CSS selalu diakhiri dengan titik koma dan kelompok deklarasi dikelilingi kurung kurawal. Seperti yang sudah dibahas sebelumnya bahwa ada 2 cara yang bisa diterapkan untuk menggunakan CSS pada web yaitu dengan inline style sheet dengan membuat CSS langsung dari satu file ataupun external style sheet menggunakan file CSS tersendiri.
Inline style sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut.Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.
Embedded Style Sheet
Cara penulisan secara embedded termasuk ke dalam internal style sheet. CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Melakukan link ke External Style Sheet
Cara penulisan External Style Sheet dengan menuliskan code css di sebuah file terpisah kemudian memanggilnya dengan perintah link untuk menggabungkannya dengan program utama yang memanggil.
2. Menciptakan class selector dan Id untuk diaplikasikan ke Style
Selain menggunakan style html , CSS memungkinkan untuk menentukan penyeleksi yang dibuat pengguna sendiri yang disebut ―id‖ dan ―kelas‖. Id selektor harus elemen tunggal yang unik didefinisikan dengan tanda #
| #paragraf1
{ text-align:center; color=red; } |
| .center
{ Text-align:center; } |
Dalam style sheet sering terdapat unsur-unsur dengan gaya/style yang sama. Misalkan sebagai berikut :
| h1
{ color:green; } h2 { color:green; } p { color:green; } |
| h1,h2,p {
color:green; } |
pseudo-class biasa digunakan untuk mendefinisikan state khusus dari elemen web. Sebagai contoh dapat digunakan untuk menciptakan style pada elemen pada saat mouse berada di atasnya atau Menambahkan style pada link yang sudah pernah di kunjungi. Sintak dari pseudo-classes:
| selector:pseudo-class
{ property:value; } |
| :link | Menambahkan style pada link yang belum pernah di kunjungi atau klik |
| :visited | Menambahkan style pada link yang sudah pernah di kunjungi |
| :hover | Menambahkan style pada elemen pada saat mouse berada di atasnya |
| :active | Menambahkan style pada elemen yang sedang aktif |
| :first-child | Menambahkan style pada elemen yang merupakan element yang pertama dipakai dari elemen yang lain |
| :focus | Menambahkan style pada kolom input yang sedang aktif |
0 Response to "Membuat dan menggunakan Cascading Style Sheet (CSS) bagi pemula lengkap"
Post a Comment