Cascading Style Sheet (CSS)

 1.      Pengertian Selector, Property dan Value pada CSS


Gambar 5.1 Selector, Property dan Value pada CSS

A.    Selector

Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk „mengaitkan‟ atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.

Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari seluruh tag HTML yang memiliki atribut class=”warning”” atau “cari seluruh link yang ada di dalam tag <p>”.

Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i, h1, li, dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya.

B.     Property

Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector.

Jika selector digunakan misalnya untuk “mencari seluruh tag <p>“, maka property

adalah “efek apa yang ingin dimanipulasi dari tag p tersebut“, seperti ukuran text, warna text, jenis fontnya, dll.

C.     Value

Value CSS  adalah  nilai  dari property.  Misalkan  untuk  property background- color yang  digunakan  untuk  mengubah  warna   latar  belakang  dari  sebuah selector, value atau nilainya dapat berupa red, blue, black, atau white.

 

2.       Penempatan Sebuah CSS

Ada tiga cara untuk menempatkan sebuah CSS ke dalam sebuah halaman web, ketiga cara ini dapat digunakan untuk memformat halaman web dengan style yang diingkan.

A.    Inline Style Sheet

CSS dalam posisi inline style sheet dituliskan menjadi satu dengan halaman web yang akan diatur style-nya dan menjadi bagian dari body. Penulisan style dilakukan dengan cara menambahkan atribut title pada elemen (tag) HTML yang akan diatur style-nya. Oleh karena itu, untuk mengimplementasikan CSS pada halaman web, semua tag harus diformat secara independen.

Dengan menggunakan model penempatan inline style sheet, jika ada sebuah tag HTML yang digunakan berulang kali dalam sebuah halaman web, pembuat website dapat mengimplementasikan style yang berbeda pada tag tersebut. Ketika menggunakan inline style sheet untuk memanipulasi halaman web, pembuat web hanya dapat menggunakan satu property saja pada tag HTML yang akan dimanipulasi.

Contoh :

Simpan dengan nama file inline style sheet.html

 

Gambar Contoh Skrip CSS Inline Style Sheet

 

B.     Embedded Style Sheet

Sama halnya dengan CSS dalam posisi inline style sheet, penulisan CSS dalam posisi embedded style sheet juga menjadi satu dengan halaman web yang akan diatur style-nya, hanya saja, posisi CSS menjadi bagian dari header (berada diantara tag

<head>) dengan menambahkan tag <style type=”text/css”>.

Dengan  menggunakan  model  penempatan  CSS  sebagai  embedded style sheet, pembuat web cukup satu kali mendefinisikan style yang akan dikenakan pada tag – tag yang berada dalam halaman web. Jika ada sebuah tag yang digunakan secara berulang, secara otomatis akan mempunya style yang sama, berbeda dengan model inline style sheet yang mengharuskan pembuat web menentukan style pada tag –

tag yang digunakan berulang kali dan memungkinkan untuk menentukan style yang berbeda pada tag tersebut.

Contoh :

Simpan dengan nama file embedded style sheet.html


Gambar Contoh Skrip CSS Embedded Style Sheet

 


C.     Linked Style Sheet

Berbeda dengan 2 (dua) model penempatan CSS sebelumnya, menggunakan linked style  sheet berarti harus  menyediakan  sebuah  file  CSS khsusus  berisi berbagai format style yang terpisah dari halaman web. File ini nantinya akan dipanggil oleh halaman web yang membutuhkan pengaturan style.

Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika

ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file CSS.

Dengan menggunakan model ini, style akan terpusat pada sebuah file, sehingga jika ada pengubahan style, pembuat website tidak perlu merubah di semua halaman web yang dibuat, tetapi cukup dengan merubah style yang didefinisikan pada file CSS.

Contoh :

Simpan dengan nama file style definition.css


Gambar Contoh Skrip Linked Style Sheet

Kemudian buat file kedua dengan nama latihan26.html



Gambar Contoh Skrip Linked Style Sheet

3.      Penggunaan CSS Pada Halaman Web

Kita dapat menggunakan salah satu dari ketiga penempatan CSS yang ada, namun tidak  menutup kemungkinan  juga kita dapat menggunakan  dua atau  ketiganya dalam sebuah website jika memang diperlukan.

A.    Pengolahan Font

Salah satu tag HTML yang biasa digunakan untuk memanipulasi font adalah paragraf (<p>). Beberapa tag yang lain juga memungkinkan untuk dimanipulasi atau ditambahkan CSS untuk memanipulasi font jika pada tag HTML tersebut akan berisi tulisan / text, seperti : <th><td>, <a>, <li>, <h1>…<h6>, dan tag – tag lain yang memungkinkan berisi text.

Bentuk manipulasi font yang dimungkinkan dapat dilihat pada tabel di bawah ini :

Tabel 5.1 Font Properties

B.     Memanipulasi Color dan Background

Bentuk lain dari memanipulasi halaman web adalah dengan menentukan warna pada tulisan, menambahkan warna background, atau dengan menambahkan gambar sebagai background.

Beberapa property yang bisa digunakan untuk memanipulasi beberapa hal di atas, ditampilkan pada tabel di bawah ini.

Tabel 5.1 Properties Warna dan Gambar latar

4.      Mengenal Jenis-jenis Selector Dasar CSS

Selector adalah sebuah pola (pattern) yang digunakan untuk „mencari‟ suatu tag di   dalam   HTML.   Analogi   untuk selector,  misalnya: mencari  semua  tag   p, atau mencari seluruh tag h1 yang memiliki atribut class=judul.

Contoh :

Simpan dengan nama file multi kepada selector.html

Gambar Contoh Skrip dalam pemberian property multi kepada selector


A.    Universal Selector

Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini bertujuan untuk „mencari‟ semua tag yang ada.

Contoh Universal Selector CSS:

* {

color: blue;

background-color: white;}

}

Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna biru, dan background berwarna putih.

B.     Element Type Selector

Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya merupakan tag HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut akan ditangkap oleh selector ini.

Contoh Element Type Selector CSS:

h1 {

text-decoration: underline;

}

p {

font-size:14px;

}

Contoh kode CSS diatas akan membuat semua tag <h1> akan bergaris bawah, dan seluruh tag <p>akan berukuran 14pixel.

Efek dari element type selector adalah dari awal tag, sampai akhir tag. Jika didalam tag <p> terdapat tag <i>, maka tag tersebut juga akan berukuran 14 pixel, sampai ditemui tag penutup </p>.


C.    Class Selector

Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class     Selector akan      „mencari‟ seluruh      tag      yang      memiliki atribut class dengan nilai yang sesuai.

Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class. Contohnya:

<p class=”paragraf_pertama”> Ini adalah sebuah paragraf pertama</p>

<h1 class=”judul”>Judul Artikel</h1>

<h2 class=”judul penting berwarna”>Sub Judul Artikel<h2>

Perhatikan bahwa untuk semua tag diatas, kita menambahkan atribut class dengan nilainya adalah nama dari kelas itu sendiri. Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag dapat memiliki lebih dari 1 class.

Contohnya     dalam     baris     terakhir     pada     contoh     diatas,tag h2 memiliki atribut class=”judul   penting    berwarna”. Tag    ini    teridiri    dari    3    class, yaitu judul, penting, dan class berwarna.

Sedangkan untuk kode CSS Class Selector adalah sebagai berikut:

.paragraf_pertama {

                                  color: red;

                                    }

.judul {

            font-size:20px;

           }

.penting {

              color:red;

              font-size: 1em;

               }

Untuk   menggunakan class   selector,   di   dalam   CSS   kita   menggunakan tanda titik sebelum nama dari class.

Untuk contoh kita, seluruh class yang memiliki nilai “paragraf_pertama”, warna text

akan menjadi merah. Dan seluruh class judul akan memiliki font 20 pixel.

D.    ID Selector

ID Selector bersama-sama dengan class selector merupakan selector paling umum dan  juga  sering  dipakai  (walau  tidak  sesering class  selector).  Penggunaan ID selector hampir sama dengan class selector, dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID selector, kita menggunakan atribut id.

Contoh penggunaan atribut id pada tag HTML

<p id=”paragraf_pembuka”> Ini adalah sebuah paragraf pembuka</p>

<h1 id=”judul_utama”>Judul Artikel</h1>

<h2 id=”sub_judul”>Sub Judul Artikel<h2>

Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing- masing tag (terutama dipakai untuk kode JavaScript). Karena hal tersebut, id yang digunakan  harus  unik  dan  tidak  boleh  sama.  Dengan  kata  lain, id  hanya  bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh sama.

Contoh penggunaan id selector kode CSS Class Selector adalah sebagai berikut:

#paragraf_ pembuka {

                                       color: red;

                                        }

#judul utama {

                         font-size:20px

                         }

Di dalam kode CSS, kita menggunakan tanda pagar “#” sebagai penanda bahwa kita mencari tag yang memiliki id tersebut.

Contoh :

Simpan dengan nama file selector bebas,class dan id.html



Gambar  Contoh Hasil Skrip penggunaan multi kepada selector bebas, class dan

ID


E.     Attribute Selector

Selector   ini   sedikit   lebih advanced   dibandingkan   dengan   selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang memiliki atribut yang dituliskan.

Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:

[href] {

           font-size:20px ;

           }

[type="submit"] {

                              width:30px;

                               }

Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada diantara tanda kurung siku “[” dan “]”. [href] akan cocok dengan seluruh tag yang memiliki atribut href, apapun nilai dari href (href biasanya terdapat pada tag <a>). Untuk   contoh [type=”submit”] akan   cocok   dengan   tag   yang   memiliki atribut type dengan nilai submit, yang dalam hal ini adalah tombol submit dalam form. Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut selector ini tidak terlalu sering digunakan.

Komentar

Posting Komentar

Postingan populer dari blog ini

ARRAY DAN FOR

1. BUAT FILE ARRAY.PHP <?php //membuat array $barang =["PENGIN","SUSU","SAPI"]; //menampilkan isi array echo $barang[0]."<br>"; echo $barang[1]."<br>"; echo $barang[2]."<br>"; HASILNYA AKAN MENJADI :                      PENGIN                     SUSU                    SAPI 2. BUAT FILE FOR <?php for($i=1; $i < 10; $i++){    echo "<h2>BANDUNG ke-$i</h2>";    }    ?>                    HASIL AKAN MENJADI :  BANDUNG ke-1 BANDUNG ke-2 BANDUNG ke-3 BANDUNG ke-4 BANDUNG ke-5 BANDUNG ke-6 BANDUNG ke-7 BANDUNG ke-8 BANDUNG ke-9
Baca selengkapnya

PENGENALAN HTML

Gambar
  1.   Format Penulisan HTML Untuk membuat suatu halaman HTML standar digunakan tag <html>, <head>, <body> beserta tag penutupnya masing-masing. Susunan tag – tag tersebut membentuk dokumen HTML sebagai berikut : Contoh : Memformat Bentuk Tulisan dalam HTML ( penebalan, penulisan miring dan garis bawah pada font).Simpan dengan nama bentuk tulisan.html Gambar Contoh skrip format penulisan Contoh : Simpan dengan nama superscript dan subscript.html Gambar Contoh skrip format penulisan 2    Memulai Membuat Dokumen dengan Format HTML Langkah – langkah untuk memulai membuat dokumen HTML sebagai berikut : 1.   Buka notepad++ sebagai editor dokumen HTML. 2.   Buat skrip sederhana seperti di bawah ini di notepad++ : Gambar 1.2 Format Penulisan HTML 3.   Simpan dokumen yang telah dibuat dengan menggunakan ekstensi .htm atau .html Path directory : …./nama_folder/xxx.hmtl Gambar 1.3 Format Penyimpa...
Baca selengkapnya

Link dan Gambar (html)

Gambar
1.   Link Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau lebih singkat lagi disebut link. Dengan hyperlink ini kita bisa membuka dokumen HTML lain atau langsung menuju ke bagian tertentu sebuah dokumen HTML. Hyperlink ini dapat diletakkan pada teks tertentu ataupun pada sebuah image, bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan warnanya menjadi berbeda. Sintaksis penulisan : Beberapa    atribut    yang    sering    ditambahkan    atau    sering    digunakan    dalam penggunaan sintak diatas adalah seperti dibawah ini: Tabel. 2.1. Atribut dalam Link Contoh Membuat Link Antar Dokumen : Dalam Contoh ini, dapat dilihat dari script di bawah ini, sebelumnya siapkan halaman html   dengan   nama   Magister   Teknik   Informatika.html,   Sistem Informasi.html, Teknik Informasi.html (disimpan di d...
Baca selengkapnya