Cascading Style Sheets
Cascading Style Sheets
|
|
Ekstensi berkas
|
.css
|
text/css
|
|
Dikembangkan oleh
|
|
Jenis format
|
|
Cascading Style Sheet (CSS)
merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web
sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa
pemograman.
Sama halnya styles dalam aplikasi pengolahan
kata seperti Microsoft
Word yang dapat mengatur beberapa style,
misalnya heading, subbab,bodytext, footer, images,
dan style lainnya untuk dapat digunakan bersama-sama dalam
beberapa berkas (file). Pada
umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat
dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border,
warna hyperlink,
warna mouseover, spasi
antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan
parameter lainnya.CSS adalah bahasa style sheet yang
digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan
kita untuk menampilkan halaman yang sama dengan format yang berbeda.
Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap
deklarasi style yang berbeda dapat diletakkan secara
berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child)
pada setiap style.CSS sendiri merupakan sebuah teknologi internet yang
direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
Setelah
CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru
mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
Versi
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 CSS yang
kedua diharapkan lebih baik dari versi pertama dan kedua.
CSS3 juga dapat melakukan animasi pada
halaman website, diantaranya animasi warna hingga animasi 3D. Dengan CSS3
desainer lebih dimudahkan dalam hal kompatibilitas websitenya pada smartphone
dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru
pada CSS3 seperti: multiple background, border-radius, drop-shadow,
border-image, CSS Math, dan CSS Object Model.
Penulisan
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
h1 {
color: #0789de;
}
Bagian pertama sebelum tanda '{}'
dinamakan selector, sedangkan yang diapit oleh '{}' disebut declaration yang
terdiri dari dua unsur, yaitu property dan value.Selector dalam
pernyataan di atas adalah h1, sedangkan color adalah property,
dan #0789de adalah value.
Selain itu ada tiga metode penulisan CSS
atribut, yaitu :
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.
<html>
<head>
<title>Contoh Bentuk Inline </title>
</head>
<body bgcolor="#FFFFFF">
<p id="cth1">
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
<p id="cth2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
<p id="cth3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
Embedded 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.
Contoh penggunaan CSS dengan metode Embedded
Style Sheet :
<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
l; text-indent:0.5in}
p {font-size:12pt; font-family:ari
a</style>
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan
mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin
kiri 0.5 inch dan warna background biru</p>
</body>
</html>
Sifat CSS
Ada dua sifat CSS yaitu internal dan
eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke
halaman website yang
akan didesain. Kalau halaman web yang lain akan didesain dengan model yang
sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain
itu.
Sifat yang kedua adalah eksternal di mana
skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti,
cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang
didesain akan dibuat seperti model yang
ada di skrip tersebut.
Fakta Menggunakan CSS
Fakta Menggunakan CSS
diantaranya :
·
Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung
oleh browser-browser lama.
·
Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita
mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
·
Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh
terhadap ukuran berkas dan kecepatan pengunduhan.
·
Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat
ditampilkan sesudahnya.
·
Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika
dilihat di berbagai browser
·
CSS adalah layouting "Masa Depan" dengan penggabungan
bersama XHTML.
Contoh Berkas CSS
<html>
<head>
<style type="text/css">
body
{
ckground-color:#d0e4fe;
}
b
a
a
h1
{
color:orange;
p
{
font-family:"T
text-align:center;
}
imes New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Sumber : Dari Wikipedia bahasa Indonesia, ensiklopedia bebas
