Cascading
Style Sheets (CSS)
Assalamualaikum wr.wb.
hy guys..
masih bingung gimana cara mempercantik tampilan web kaliann..?
sekarang sobat tidak perlu bingung lagi karena sekarang aku akan menjeaskan cara-cara jitu untuk mempercantik/memperindah tampilan web kaliaan menggunakan CSS..
sebelum lanjut kira-kira apa sih CSS itu?
yuk langsung simak aja ya guyss..
Cascading Style Sheets (CSS)
adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan sebuah
dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan untuk pengembangan
website kurang lebih pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap
deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian
akan membentuk hubungan parent-child pada setiap style. Penggunaan yang paling
umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan
XHTML. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS
memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk
metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu
dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca
braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda,
baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS. Setelah
CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru
mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML
B. Keuntungan Menggunakan CSS
· CSS
memberikan keseragaman pada halaman web.
· Dengan
CSS dapat menghemat banyak waktu dan pekerjaan berulang.
· CSS
memungkinkan Anda untuk memuat halaman web Anda dengan mudah.
· Layers
(Lapisan), seperti item pop-up, dapat digunakan dalam dokumen.
· CSS
membantu Anda memelihara halaman web Anda dengan mudah dan efektif.
C. Pengertian
Selector, Property dan Value pada CSS
1. Selector
Karena
kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS
membutuhkan suatu cara untuk „mengaitkan‟ atau menghubungkan
kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector
dalam CSS. Sesuai dengan namanya, selector digunakan untuk mencari bagian
web yang ingin dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh
tag <p>”, atau “cari seluruh tag HTML yang memiliki atribut
class=”warning”” atau “cari seluruh link yang ada di dalam tag <p>”.
Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag
p, i, h1, li, dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya.
2. Property
CSS
adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS
memiliki puluhan property yang dapat digunakan agar menampilkan hasil
akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai
untuk seluruh selector. Jika selector digunakan misalnya untuk “mencari
seluruh tag <p>“, maka property adalah “efek apa yang ingin dimanipulasi
dari tag p tersebut “, seperti ukuran text, warna text, jenis fontnya, dll.
3. Value
CSS
adalah nilai dari property. Misalkan untuk property background-color yang
digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau
nilainya dapat berupa red, blue, black, atau white.
Penempatan Sebuah CSS
Ada tiga cara untuk
menempatkan sebuah CSS ke dalam sebuah halaman web, ketiga cara ini dapat
digunakan untuk memformat halaman web dengan style yang diingkan.
1. Inline Style Sheet CSS dalam posisi inline style sheet dituliskan menjadi satu dengan halaman web yang akan diatur style-nya dan menjadi bagian dari body. Penulisan style dilakukan dengan cara menambahkan atribut title pada elemen (tag) HTML yang akan diatur style-nya. Oleh karena itu, untuk mengimplementasikan CSS pada halaman web, semua tag harus diformat secara independen. Dengan menggunakan model penempatan inline style sheet, jika ada sebuah tag HTML yang digunakan berulang kali dalam sebuah halaman web, pembuat website dapat mengimplementasikan style yang berbeda pada tag tersebut. Ketika menggunakan inline style sheet untuk memanipulasi halaman web, pembuat web hanya dapat menggunakan satu property saja pada tag HTML yang akan dimanipulasi.
2. Embedded Style Sheet Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS dalam posisi embedded style sheet juga menjadi satu dengan halaman web yang akan diatur style-nya, hanya saja, posisi CSS menjadi bagian dari header (berada diantara tag <head>) dengan menambahkan tag <style type=”text/css”>. Dengan menggunakan model penempatan CSS sebagai embedded style sheet, pembuat web cukup satu kali mendefinisikan style yang akan dikenakan pada tag – tag yang berada dalam halaman web. Jika ada sebuah tag yang digunakan secara berulang, secara otomatis akan mempunya style yang sama, berbeda dengan model inline style sheet yang mengharuskan pembuat web menentukan style pada tag – tag yang digunakan berulang kali dan memungkinkan untuk menentukan style yang berbeda pada tag tersebut.
3. Linked Style Sheet Berbeda dengan 2 (dua) model penempatan CSS sebelumnya, menggunakan linked style sheet berarti harus menyediakan sebuah file CSS khsusus berisi berbagai format style yang terpisah dari halaman web. File ini nantinya akan dipanggil oleh halaman web yang membutuhkan pengaturan style. Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file CSS. Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file CSS.
Penggunaan CSS Pada Halaman Web
1. Inline Style Sheet CSS dalam posisi inline style sheet dituliskan menjadi satu dengan halaman web yang akan diatur style-nya dan menjadi bagian dari body. Penulisan style dilakukan dengan cara menambahkan atribut title pada elemen (tag) HTML yang akan diatur style-nya. Oleh karena itu, untuk mengimplementasikan CSS pada halaman web, semua tag harus diformat secara independen. Dengan menggunakan model penempatan inline style sheet, jika ada sebuah tag HTML yang digunakan berulang kali dalam sebuah halaman web, pembuat website dapat mengimplementasikan style yang berbeda pada tag tersebut. Ketika menggunakan inline style sheet untuk memanipulasi halaman web, pembuat web hanya dapat menggunakan satu property saja pada tag HTML yang akan dimanipulasi.
2. Embedded Style Sheet Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS dalam posisi embedded style sheet juga menjadi satu dengan halaman web yang akan diatur style-nya, hanya saja, posisi CSS menjadi bagian dari header (berada diantara tag <head>) dengan menambahkan tag <style type=”text/css”>. Dengan menggunakan model penempatan CSS sebagai embedded style sheet, pembuat web cukup satu kali mendefinisikan style yang akan dikenakan pada tag – tag yang berada dalam halaman web. Jika ada sebuah tag yang digunakan secara berulang, secara otomatis akan mempunya style yang sama, berbeda dengan model inline style sheet yang mengharuskan pembuat web menentukan style pada tag – tag yang digunakan berulang kali dan memungkinkan untuk menentukan style yang berbeda pada tag tersebut.
3. Linked Style Sheet Berbeda dengan 2 (dua) model penempatan CSS sebelumnya, menggunakan linked style sheet berarti harus menyediakan sebuah file CSS khsusus berisi berbagai format style yang terpisah dari halaman web. File ini nantinya akan dipanggil oleh halaman web yang membutuhkan pengaturan style. Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file CSS. Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file CSS.
Penggunaan CSS Pada Halaman Web
Kita
dapat menggunakan salah satu dari ketiga penempatan CSS yang ada, namun tidak
menutup kemungkinan juga kita dapat menggunakan dua atau ketiganya dalam sebuah
website jika memang diperlukan.
A. Pengolahan Font
Salah
satu tag HTML yang biasa digunakan untuk memanipulasi font adalah paragraf
(<p>). Beberapa tag yang lain juga memungkinkan untuk dimanipulasi atau
ditambahkan CSS untuk memanipulasi font jika pada tag HTML tersebut akan berisi
tulisan / text, seperti : <th><td>, <a>, <li>,
<h1>…<h6>, dan tag – tag lain yang memungkinkan berisi text. Bentuk
manipulasi font yang dimungkinkan dapat dilihat pada tabel di bawah ini :
B. Memanipulasi Color dan Background
Bentuk
lain dari memanipulasi halaman web adalah dengan menentukan warna pada tulisan,
menambahkan warna background, atau dengan menambahkan gambar sebagai
background. Beberapa property yang bisa digunakan untuk memanipulasi beberapa
hal di atas, ditampilkan pada tabel di bawah ini.
C. Mengenal Jenis-jenis Selector Dasar CSS
Selector adalah
sebuah pola (pattern) yang digunakan untuk „mencari‟ suatu
tag di dalam HTML. Analogi untuk selector, misalnya: mencari semua tag p, atau
mencari seluruh tag h1 yang memiliki atribut class=judul.
· 1. Universal Selector
Universal selector hanya ada 1 di dalam CSS, yaitu
tanda bintang “*”. Selector ini bertujuan untuk „mencari‟ semua tag yang ada. Contoh
Universal Selector CSS:
Kode CSS diatas bermaksud untuk membuat seluruh
tag HTML berwarna biru, dan background berwarna putih.
2. Element Type Selector
Element Type Selector atau Tag Selector adalah
istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag
HTML bisa digunakan sebagai selector, dan seluruh tag tersebut akan ditangkap
oleh selector ini. Contoh Element Type Selector CSS:
Contoh kode CSS diatas akan membuat semua tag
<h1> akan bergaris bawah, dan seluruh tag <p>akan berukuran
14pixel. Efek dari element type selector adalah dari awal tag, sampai akhir
tag. Jika didalam tag <p> terdapat tag <i>, maka tag tersebut juga
akan berukuran 14 pixel, sampai ditemui tag penutup </p>.
· 3. Class Selector
Class Selector merupakan salah satu selector yang
paling umum dan paling sering digunakan. Class Selector akan „mencari‟ seluruh tag yang memiliki
atribut class dengan nilai yang sesuai. Untuk penggunaan Class Selector, kita
harus memiliki tag HTML yang mempunyai atribut class. Contohnya:
Perhatikan bahwa untuk semua tag diatas, kita
menambahkan atribut class dengan nilainya adalah nama dari kelas itu sendiri.
Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag
dapat memiliki lebih dari 1 class. Contohnya dalam baris terakhir pada contoh
diatas,tag h2 memiliki atribut class=”judul penting berwarna”. Tag ini teridiri
dari 3 class, yaitu judul, penting, dan class berwarna. Sedangkan untuk kode
CSS Class Selector adalah sebagai berikut:
Untuk menggunakan class selector, di dalam CSS
kita menggunakan tanda titik sebelum nama dari class. Untuk contoh kita,
seluruh class yang memiliki nilai “paragraf_pertama”, warna text akan menjadi
merah. Dan seluruh class judul akan memiliki font 20 pixel.
· 4. ID Selector
ID Selector bersama-sama dengan class selector
merupakan selector paling umum dan juga sering dipakai (walau tidak sesering
class selector). Penggunaan ID selector hampir sama dengan class selector,
dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk
tag HTML, untuk ID selector, kita menggunakan atribut id. Contoh penggunaan
atribut id pada tag HTML:
Atribut id selain untuk selector CSS, juga
berperan sebagai kode unik untuk masingmasing tag (terutama dipakai untuk kode
JavaScript). Karena hal tersebut, id yang digunakan harus unik dan tidak boleh
sama. Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman
web dan tidak boleh sama. Contoh penggunaan id selector kode CSS Class Selector
adalah sebagai berikut:
Di dalam kode CSS, kita menggunakan tanda pagar
“#” sebagai penanda bahwa kita mencari tag yang memiliki id tersebut.
· 5. Attribute Selector
Selector ini sedikit lebih advanced dibandingkan
dengan selector-selector sebelumnya. Atribut Selector ini digunakan untuk
mencari seluruh tag yang memiliki atribut yang dituliskan. Contoh penggunaan
Attribute Selector kode CSS adalah sebagai berikut:
Seperti yang dapat dilihat dari contoh diatas, setiap atribut
selector harus berada diantara tanda kurung siku “[” dan “]”. [href] akan cocok
dengan seluruh tag yang memiliki atribut href, apapun nilai dari href (href
biasanya terdapat pada tag <a>). Untuk contoh [type=”submit”] akan cocok
dengan tag yang memiliki atribut type dengan nilai submit, yang dalam hal ini
adalah tombol submit dalam form. Walaupun memiliki kemampuan mencari tag yang
sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan.
Segitu dulu ya guys.. pembahasan kali ini..
Wassalamualaikum wr.wb
#semoga
bermanfaat
#rstnpynt:)
0 Komentar