Cascading Style Sheets
|
|
Ekstensi berkas
|
.css
|
text/css
|
|
Dikembangkan oleh
|
|
Jenis format
|
|
Apa itu CSS...?
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 stylelainnya untuk dapat digunakan bersama-sama
dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat
denganbahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh 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. 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
Explorerdan 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
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.
Contoh penulisan CSS dengan
metode Inline
Style Sheet :
<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}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</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 halamanwebsite 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
Contoh Berkas CSS
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Referensi
1.
Slamet
Riyanto, Membuat Web Portal Multi Bahasa Jomla 1.5X + CD, halaman 236. Elex Media Komputindo.
2.
Dominikus Juju & Matamaya Studio, Seri
Penuntun Praktis Join Multiply, halaman
95. Elex Media Komputindo.
3.
Sulistyawan,
Rubianto, Rahmad Saleh, Modifikasi Blog Multiply dengan CSS, halaman 32. Elex Media Komputindo.
5.
Untung Julianto, Modifikator Blogger + CD, halaman 22. Elex Media Komputindo.
6.
Untung Rahardja, Augury El Rayeb, & Asep Saefullah (2009). Siapa saja
bisa membuat website dengan CSS dan HTML, halaman 37-41. Andi Yogyakarta.
7.
Jubilee
Enterprise, Seri Penuntun Praktis : Trik Cepat Dreamweaver Cs3, halaman 97. Elex Media Komputindo.
8.
Pupung Budi Purnama, Kiat
Praktis Menjadi Desainer Web Profesional, halaman 8. Elex Media Komputindo.
SEMOGA BERMANFAAT masbro & mbabro .
Jangan lupa mampir lagi di http://masbronotes.blogspot.com
.jpg)
.jpg)
.jpg)
.jpg)
No comments:
Post a Comment