Pada awal mulai terjun didunia design web, saya sama sekali tidak mengerti apa itu CSS, yang ngerti hanyalah sedikit tag HTML dan beberapa tag table untuk mendesign sebuah situs. Namun semakin ditelusuri ternyata CSS itu asik juga, disamping bisa berdiri sendiri, juga dapat digabungkan dengan tag table juga, CSS menjadi suatu pelengkap yang dinamis dan fleksibel dalam HTML.
CSS merupakan singkatan dari Cascading Style Sheet. Fungsi utamanya adalah menetapkan aturan-aturan tampilan yang akan digunakan, kontribusinya dalam tampilan website saat ini sudah tidak diragukan lagi. Karena ke-fleksibelan-nya maka kebanyakan template website yang didesign saat ini telah mengunakan CSS untuk mendukung tampilan website nya, walaupun tidak dipungkiri masih ada yang mengunakan table.
Salah satu keunggulan CSS adalah kita dapat menghemat banyak script HTML. Karena jika CSS ditulis dalam suatu file terpisah, maka file CSS tersebut bisa digunakan oleh beberapa layout/tampilan HTML. Dan jika ingin merubah warna tampilan maka cukup dilakukan di file CSS tersebut saja, tidak perlu layout HTMLnya. Ini akan sangat-sangat menghemat waktu apabila kita mempunyai beberapa layout HTML.
Sebelum memulai ada baiknya kita mengenali dulu beberapa point penting tentang CSS:
Extension file:
namafile.css
contoh: sytle.css
Ada tiga metode atau cara dalam menulis script css:
Pertama, menyisipkan langsung di tag HTMLnya.
Contoh:
<p style="color:red;">Tulisan ini merah warnanya</p>
Kedua, menyisipkan di antara tag <head> dan </head>
Contoh:
<html>
<head>
<style>
p {
color:red;
}
</style>
</head>
<body>
<p> Tulisan ini merah warnanya</p>
</body>
</html>
Ketiga, membuat file CSS terpisah dari file HTML. untuk menghubungkan file
CSS dan HTML, digunakan tag sebagai berikut.
<link rel="stylesheet" type="text/css" href="namafile.css">
Sisipkan diantara tag <head> dan </head>
Contoh: <link rel="stylesheet" type="text/css" href="style.css">
Metode ketiga termasuk metode yang sering digunakan, karena lebih fleksibel dan bisa digunakan untuk beberapa file HTML sekaligus. Metode kedua biasanya digunakan pada template-template blogger, sedangkan untuk joomla biasanya mengunakan metode ketiga.
Untuk melihat langsung bagaimana CSS bekerja maka buatlah sebuah file dengan nama style.css isinya sebagai berikut, ( kita akan memakai metode yang ketiga )
#cssnih {
font-size: 15px;
text-decoration: underline;
font-transform: uppercase;
}
Kemudian, buat satu lagi file terpisah dengan nama latihan.html, isikan dengan script berikut:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Gue lagi belajar CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Baris 1: Ini adalah tulisan yang tidak mengunakan CSS<br/>
<div id="cssnih"> Baris 2: Dan ini mengunakan CSS</div>
</body>
</html>
Simpan kedua file tersebut dalam folder/lokasi yang sama, kemudian jalankan latihan.html maka yang terjadi adalah.
Baris 1: Ini adalah tulisan yang tidak mengunakan CSS
BARIS 2: DAN INI MENGUNAKAN CSS
Tampilan BARIS 2 mengambil settingan tampilan dari file style.css, sedangkan tampilan untuk baris satu tidak mengunakan settingan CSS. Nah, apakah anda sudah memiliki sedikit gambaran tentang CSS dan cara pemakaiannya?
Masih belum! Ingin lebih mengenal CSS? Baca Mengenal CSS Selector lebih dekat lagi
3 comments:
hmmm... aku kok agak bingung juga sih ya??? (coz jujur nih q belajarnya dari blog gratisan sih jadi kurang familiar ma CSS )
maz, gmana tuch caranya menulis script web programming di blogspot...??
Dulu saya mencoba menulis script html di blogspot tapi scriptnya ga terbaca, malah hasilnya yang terlihat.
:(
@aa'mil, sebenarnya sama kita mas. Karena kebanyakan sy juga belajar dari blog gratisan, memang terkadang ada juga sih belajar dari buku. Yang pentingkan kita mau terus bereksperimen "Try and error", dan kuncinya "Practice make perfect". Untuk itu sy mencoba share pengalaman try and error tersebut diblog ini neh. Biar sy bisa baca lagi di blog ini sewaktu diperlukan. ^_^!
@Belajar Pemograman, kebetulan ini artikel yang akan saya tulis selanjutnya mas.
Post a Comment