Mengenal CSS Selector lebih dekat lagi.

Melanjutkan tutorial yang pertama, kini kita akan mengenal selector yang ada pada CSS. Perhatikan kode css pada posting yang pertama. Dalam penulisan kode-kode CSS kita dikenalkan pada selector, dimana selector inilah yang akan mengantarkan format-format dalam file CSS tersebut kedalam dokumen HTML kita. Secara garis besar selector dibagi menjadi dua, yaitu:

Class dan ID Selector
Beda kedua jenis selector ini adalah cara penulisannya, bila kita ingin membuat Class selector maka gunakan tanda ”.” (titik) didepan nama class dan bila ingin mengunakan ID Selector kita dapat mengunakan tanda ”#” (pagar) setelah nama ID. Umumnya ID Selector lebih sering digunakan untuk memformat bagian yang hanya muncul satu kali saja. (cth: Top-menu, Main-menu, Left-menu, Background, dan lain-lain). Perbedaan cara penulisannya dapat dilihat seperti berikut ini.

Struktur ID Selector
#nama {
property: value;
}

Contoh penulisan:
#kolom {
color: blue;
font-size: 14px;
}

Struktur Class Selector
.nama {
property: value;
}

Contoh penulisan:
.kolom {
color: blue;
font-size: 14px;
}

Satu lagi kelebihan CSS adalah kita dapat merubah tampilan tag-tag HTML itu sendiri, baik itu untuk keseluruhan dokumen atau hanya bagian-bagian tertentu saja.

Untuk keseluruhan dokumen kita dapat menuliskan tag HTML tersebut sebagai penganti nama ID atau Class, tanpa “.” dan “#”. Struktur nya seperti berikut:

Tag-html {
property: value;
}

Contoh penulisan:
b {
Color: red;
}

Dan jika kita ingin memformat tag-html pada bagian-bagian tertentu saja, maka kita harus mengkombinasikan tag-tag html tersebut dengan ID dan Class selector, strukturnya akan terlihat seperti berikut (perlakuannya sama untuk ID dan Class):

#nama tag-html {
property: value;
}

Contoh penulisan:
#kolom b {
color: red;
Font size: 26px;
}

untuk yang satu ini penulisan dalam kode HTML harus ditulis dalam format seperti ini:
<div id=”kolom”><b>Semua tag b dalam bagian ini akan berwarna merah</b></div>

Untuk penulisan dalam file .css, kita dapat mengabungkan selector-selector yang memiliki format yang sama dengan cara meletakan koma ”,” diantara selector-selector itu.

Contoh kasus,
#kolom-kiri {
color: red;
font-size: 14px;
}

#kolom-kanan {
color: red;
font-size: 14px;
border: 1px solid #ccc;
}

Dapat kita lihat kedua ID memiliki property ”color” dan ”font-size” yang sama, maka dapat kita gabungkan keduanya untuk menghindari penulisan property yang sama tersebut. Penulisannya akan menjadi seperti berikut:

#kolom-kiri, #kolom-kanan {
color: red;
font-size: 14px;
}

#kolom-kanan {
border: 1px solid #ccc;
}

Penggabungan dapat juga dilakukan antar ID dan Class, misalnya seperti ini.
#kolom-kiri, #kolom-kanan, .isi, #bawah, #atas h1, .pinggir b {
Property: value;
}

Selesai sudah kita mengenal selector pada CSS, jika ada yang kurang mohon ditambahkan (^_^!), karna ini semua dari pengalaman saya selama ini meng-utak-atik kode-kode tersebut.

READ MORE - Mengenal CSS Selector lebih dekat lagi.

Mulai bekerja dengan CSS

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

READ MORE - Mulai bekerja dengan CSS