Langsung saja ya dibaca!
CSS atau Cascading Style Sheets adalah sebuah dokumen yang berisi aturan yang digunakan untuk memisahkan isi dengan layout dalam halaman-halaman web yang dibuat. CSS memperkenalkan “template” yang berupa style untuk dibuat dan mengijinkan penulisan kode yang lebih mudah dari halaman-halaman web yang dirancang. CSS mampu menciptakan halaman yang tampak sama pada resolusi layar yang berbeda dari pengunjung berbeda tanpa memerlukan penggunaan tabel seperti pada html klasik.
Dengan menggunakan CSS, maka dokumen yang dibuat menggunakan HTML murni akan dapat lebih disingkat dan akan lebih mengefisiensikan waktu yang dibutuhkan. Bayangkan jika kita membuat sebuah situs yang kompleks dengan banyak atribut untuk tiap halaman dalam situs tersebut, maka kita harus menentukan tiap atribut untuk tiap halaman tersebut satu per satu.
Cara Kerja CSS
Mudah sekali!, hanya membutuhkan style sebagai penentu dari font, warna, dan format-format lain untuk memformat atribut sebuah halaman web yang kita buat. Tiap style memiliki dua buah elemen dasar yaitu “selector” dan “declaration”.
Sebuah selector biasanya adalah tag HTML, sementara declaration adalah satu atau beberapa perintah / nilai dari CSS yang menunjukkan type bentuk yang diaplikasikan pada selector. Declaration ini biasanya di tandai dengan tanda kurung kurawal “{ }” , dan perintah atau nilai CSS yang berbeda dipisahkan satu dengan yang lain dengan menggunakan titik-koma “;” terlihat seperti berikut :
<style type="text/css"> .teks {font-family:verdana; color:blue;} </style>
Hal yang paling umum dalam memasukkan kode Style CSS dengan menggunakan tag < style type=”text/css”>. Tag < style type=”text/css”> ini selalu tampil dalam bagian < head> dan sebelum < /head> dari dokumen anda seperti terlihat pada contoh berikut :
<html> <head> <style type="text/css"> ... aturan-aturan css ... </style> </head> <body> ... Dokumen html yang akan diberikan aturan CSS ... </body> </html>
Penempatan CSS
Menempatkan style CSS dalam dokumen web yang kita buat dalam bahasa html dapat dilakukan dengan beberapa cara dan tingkatan yang berbeda sesuai dengan keinginan kita. Cara penempatan dalam HTML adalah dengan menggunakan beberapa cara, diantaranya adalah menggunakan Inline Style, Internal Style, External style, dan juga teknik Importing dengan Internal Style.Inline Style
Adalah CSS yang dibuat dalam sebuah tag HTML yang hanya berlaku untuk dokumen yang diapitnya saja. Biasanya teknik ini digunakan pada pemformatan khusus pada sebuah elemen HTML dan tidak digunakan untuk memformat seluruh elemen dalam dokumen web. Contohnya adalah sebagai berikut :<html> <head> <title>belajar css< /title> </head> <body> <font style="arial; font-family:Arial; font-size: 20px; background-color:yellow">Penerapan Inline Style </font> </body> </html>
Internal Style
Pada teknik ini, style CSS diletakkan pada tengah tag antara tagdan. Aturan-aturan dalam style ini diatur sedemikian rupa untuk digunakan pada suatu tempat maupun untuk keseluruhan situs. Contoh dari teknik ini terlihat pada contoh berikut :<html> <head> <title>Belajar CSS< /title> <style type="text/css"> <!-- .teks {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; color: white; background-color: blue;} --> </style> </head> <body> <div class=teks>Penerapan Internal Style </body> </html>
Import Style
Dengan teknik ini sebuah Style tidak disimpan pada halaman tersebut, namun untuk menghubungkannya dengan halaman web yang kita buat digunakan perintah import yang terdapat pada style CSS. Seperti terlihat pada contoh berikut :<html> <head> <title>Belajar CSS< /title> <style type="text/css"> <!-- @import url (http://www.nama_situs.com/style.css); --> </style> </head> <body> <div class=teks>Penerapan Import Style< /div> </body> </html>
External Style
Dengan menggunakan teknik ini kita dapat memanggil style CSS pada file CSS yang kita inginkan dengan menggunakan perintah “Link rel” yang berfungsi untuk menghubungkan kedalam sebuah style CSS eksternal dengan nama yang telah kita tentukan seperti terlihat pada contoh :<link rel="stylesheet" type="text/css" href="style.css
Dalam contoh diatas kita menghubungkan sebuah dokumen html dengan sebuah style eksternal dengan nama style.css yang telah kita buat sedemikian rupa sehingga style tersebut dihubungkan untuk memformat tampilan dalam dokumen html tersebut.
Dalam mengimport file CSS, kita dapat langsung mengimport beberapa file CSS sekaligus dalam sebuah dokumen agar memperkaya tampilan dokumen kita seperti terlihat pada contoh berikut :
<link rel="stylesheet" type="text/css" href="style1.css"> <link rel="stylesheet" type="text/css" href="style2.css"> <link rel="stylesheet" type="text/css" href="style3.css">
Setelah membaca apakah kalian sudah lebih mengenal CSS? Komen ya!
No comments:
Post a Comment