CSS

Playwebstar

Cascading Style Sheet (CSS)
Latihan Membuat Web Untuk Pemula

Pengenalan CSS

     CSS merupakan singkatan dari Cascading Style Sheet, yaitu fitur yang digunakan untuk mendefinisikan style atau tampilan pada halaman web (template halaman web). Dengan CSS kita juga dapat mengatur dan mengontrol tampilan halaman web serta memisahkan antara tampilan dan konten halaman web.

     Meski tak selalu harus ada dalam sebuah halaman web, namun dengan CSS penyusunan halaman web jadi lebih mudah dan praktis. Pada HTML 4.0, Style style dapat dipisahkan dari file HTML dan disimpan dalam sebuah file CSS yang terpisah. Dengan demikian, kita dapat menggunakan sebuah style untuk banyak halaman web sehingga pekerjaan menjadi lebih efisien.

     Contoh penggunaannya, misalnya kita memiliki dokumen HTML yang di dalamnya terdapat banyak teks "Aku" yang tiap teks ingin dibuat berwarna biru dan dicetak tebal. Jika menggunakan HTML, tiap teks harus diformat satu persatu. Namun dengan CSS, kita tinggal mendefinisikan sebuah style berupa biru dan dicetak tebal, selanjutnya kita tinggal menyematkan style tersebut di tiap teks. Jika nantinya ada perubahan, hanya satu style itu saja yang diubah maka semuanya akan berubah. Bayangkan jika menggunakan HTML konvensional, apakah sanggup mengganti format tiap teks "Aku" itu jika jumlahnya ribuan ? Bahkan jika kalian memiliki halaman serupa berjumlah banyak, sangat tidak praktis. Namun dengan CSS, semua keterbatasan itu dapat diatasi.

Struktur dan Aturan Penulisan CSS

Deklarasi umum penulisan CSS terdiri dari 2 komponen. Yaitu selector & declaration (yang terdiri dari property dan value).

     Secara umum selector merupakan tag/elemen HTML yang ingin didefinisikan. Property yaitu atribut atau sifat elemen dimana tiap property bisa mempunyai sebuah value yang menentukan perubahan (penampilan) elemen. Declaration ini ditandai dengan tanda kurung kurawal, dan untuk tiap pasang atribut dan value dipisah dengan tanda titik koma.
Contoh penulisan secara umum :
body {color:black}

Jika value terdiri dari lebih dari satu kata, ditulis dalam tanda petik :
p {font-family:"sans serif"}

jika kita ingin menuliskan lebih dari satu property, maka pisahkan property menggunakan tanda titik koma.
p {text-align:center; color:red}

Agar pendefinisian style lebih mudah dibaca dan dipahami, tiap penulisan property sebaiknya dibuat baris baru.
p {
    text-align:center;
    color:black;
    font-family:srial
}

Kita dapat melakukan grouping pada selector jika ingin menerapkan style yang sama. Tiap selector dipisahkan dengan tanda koma.
h1, h2, h3, h4, h5, h6 {
    color:green
}

Aturan penerapan CSS dalam dokumen HTML

► Inline Style

Cara ini sebenarnya kurang efisien dan ribet dalam implementasinya. Yaitu dengan mendefinisikan style pada tiap elemen dalam dokumen HTML. Cara ini hanya digunakan jika kita ingin menggunakan style yang sifatnya konstan terhadap suatu elemen (tidak akan diubah dikemudian hari). Contoh cara penerapannya:
<p style="color:sienna; margin-left:20px">Contoh.</p>

► Internal Style Sheet

     Pendefinisian style dilakukan pada suatu halaman dimana terdapat style yang sifatnya unik atau hanya ada pada halaman tersebut. Style dituliskan pada bagian <head> dengan menggunakan tag <style>.

<head>
    <style type="text/css">
        hr {color:sienna}
        p {margin-left:20px}
        body {background-image:url ("image/back40.gif")}
    </style>
</head>

► External Style Sheet

     Yaitu memisahkan antara dokumen HTML dan CSS style ke dokumen sendiri (.css). Cara ini ideal jika style tersebut akan diterapkan pada banyak halaman. Dengan style sheet yang terpisah menjadi file tersendiri, kita dapat dengan mudah mengubah tampilan beberapa halaman web hanya dengan mengubah satu file CSS nya saja. Tiap halaman web harus merujuk ke file CSS menggunakan tag <link> yang ditempatkan pada bagian <head> halaman HTML

<head>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Browser akan membaca style-style yang telah didefinisikan dalam file "style.css" dan menyesuaikan format tampilan. Atau dilain kasus misalnya file CSS yang ingin kita pakai tersimpan di direktori atau server lain. Misal kita memiliki stylesheet "mystyle.css" di www.alamatsitus.com/mystyle.css penulisan sintaknya menjadi :

<head>
   <link rel="stylesheet" type="text/css"
   href="www.alamatsitus.com/mystyle.css" />
</head>

► Multiple Style Sheet

Jika dalam suatu kondisi terdapat 3 macam penggunaan stylesheet secara bersamaan (inline, internal, dan external), maka urutan atau prioritas yang dipakai adalah : (Makin ke bawah makin tinggi)

Eksternal style sheet
Internal Style Sheet
Inline Style Sheet

Jadi prioritas tertinggi adalah inline style (di dalam tag HTML), artinya dia akan mengabaikan style yang telah terdefinisi secara internal (di dalam tag <head>) maupun eksternal (terpisah dalam file .css).

Penulisan komentar dalam CSS

Komentar digunakan untuk memberi keterangan terhadap kode yang kita tulis. Hal ini dimaksudkan agar memudahkan jika nantinya kita akan melakukan perubahan pada source code style dikemudian hari. Komentar tidak akan dieksekusi (diabaikan) oleh browser. Penulisan komentar dalam CSS ditulis dalam tanda "/*" dan "*/". Contoh:

/* ini adalah komentar */
p {
    text-align: center;
    /* ini juga komentar */
    color: black;
    font-family: Arial;
}

Untuk latihan ketikkan script berikut dan simpan dengan nama "style-01.html"

<html>
  <head>
    <title>
      Contoh Penggunaan Style Sederhana
    </title>
    <style type="text/css">
      /* contoh penggunaan internal style sheet */
      p {
          line-height: 20px;
          font-family: Arial, Helvetica;
      }
   
      /* Penggunaan grouping */
      b, i {
          color: red;
          text-decoration: underline;
          text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h1 style="color:#0066ff">
      Hanya Ini
    </h1>
    <p>
      Kuberikan seikat <i>rumput liar</i> sebagai 
      pengganti <b>mawar</b><br />
      Walau orang tak menganggapnya berharga<br />
      Kuharap <b>indah</b> di matamu
    </p>
  </body>
</html>

Hasil dari script di atas :

Contoh lain jika kita ingin mendefinisikan style sheet dalam file CSS terpisah (eksternal style sheet), kita pisahkan style style yang ada dalam file HTML pada contoh sebelumnya ke dalam file CSS terpisah. Caranya :

Untuk latihan ketikkan script berikut dan simpan dengan nama "stylesheet.css"

/* contoh penggunaan eksternal style sheet */
p {
    line-height: 20px;
    font-family: Arial, Helvetica;
}

h1 {
    color: #0066ff;
}
   
b, i {
    color: red;
    text-decoration: underline;
    text-transform: uppercase;
}

Lalu ketikkan script berikut dan simpan dengan nama "style-01a.html"

<html>
  <head>
    <title>
      Contoh Penggunaan Style Sederhana
    </title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <h1>
      Hanya Ini
    </h1>
    <p>
      Kuberikan seikat <i>rumput liar</i> sebagai 
      pengganti <b>mawar</b><br />
      Walau orang tak menganggapnya berharga<br />
      Kuharap <b>indah</b> di matamu
    </p>
  </body>
</html>

Hasil dari script di atas :

Pewarisan dalam CSS

Pada dasarnya, dalam pewarisan, properti turunan memiliki spesifikasi yang lebih tinggi ketimbang properti yang dituruni (moyang/ancestor). Jadi satu style yang terdefinisi pada induk akan terdefinisi pula pada anaknya.

Untuk latihan ketikkan script berikut dan simpan dengan nama "style-02.html"

<html>
    <head>
        <title>
            Pewarisan dalam CSS
        </title>
        <style type="text/css">
            body {
                font-family: "Trebuchet MS";
                font-style: italic;
            }
  
            p {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h1>
            Judul
        </h1>
        text
        <p>
            Text ini miring karena di dalam tag body
        </p>
    </body>
</html>

Hasil dari script di atas :

Mendefinisikan selector class dan id

CSS memperbolehkan kita untuk menyatukan elemen elemen secara bersamaan dalam sebuah kelas yang berupa selector yang dapat diterapkan atau dipanggil ke dalam suatu tag HTML. Terdapat 2 macam pendefinisian kelas di dalam CSS yaitu selector class (.) dan selector id (#).

► Sintak penulisan selector class (.)

Dengan menggunakan selector class kita bisa mendefinisikan style yang berbeda pada elemen tag/elemen HTML yang sama. Format pendefinisian selector class secara umum adalah :

.nama_class { property: value }

Sebagai contoh, misalnya kita mempunyai dua buah paragraf pada halaman web dimana paragraf yang satu ingin ditampilkan rata kanan, sedangkan satunya ingin ditampilkan rata tengan. Format penulisan stylenya :

p.kanan {
    text-align: right;
}

p.tengah {
    text-align: center;
}

Kemudian, cara menerapkan style tersebut ke dalam HTML adalah sebagai berikut :

<p class="kanan">
    Paragraf ini rata kanan.
</p>
<p class="tengah">
    Paragraf ini rata tengah.
</p>

Untuk menerapkan lebih dari satu class pada suatu elemen (misalnya kita ingin menerapkan class "tengah" dan class "tebal"), caranya :

<p class="tengah tebal">
    Contoh pararaf.
</p>

Pendefinisian class juga bisa dilakukan tanpa menulis tag/elemen HTML. Jadi class tersebut akan digunakan disemua elemen HTML yang menerapkan class tersebut.

.tengah {
    text-align: center;
}

Sebagai contoh, pada kode di bawah kedua elemen (h1 dan p) sama sama menggunakan class "tengah". Maka kedua elemen akan menerapkan aturan yang ada pada selector ".center" tersebut.

<h1 class="tengah">
    Judul rata tengah
</h1>
<p class="tengah">
    Paragraf rata tengah
</p>

► Sintak penulisan selector id (#)

Kita juga bisa mendefinisikan style pada elemen HTML menggunakan selector id. Format pendefinisian id secara umum :

#nama_id { property:value }

Di bawah ini contoh jika kita ingin mengenakan style dengan selector id "hijau"

#hijau {
    color: green;
}

Dan penerapan style tersebut dalam dokumen HTML adalah

<h1 id="hijau">
    Judul warna hijau
<h1>

Sedangkan jika kita ingin menerapkan selector id pada elemen HTML, caranya hampir sama dengan selector class

p#paragraf {
    text-align:center;
    color:red;
}

Untuk menerapkan style tersebut ke dokumen HTML

<p id="paragraf">
    Contoh paragraf.
</p>

Untuk latihan ketikkan script berikut dan simpan dengan nama "style-03.html"

<html>
    <head>
        <title>
            CSS Class dan ID
        </title>
        <style type="text/css">
            body {
                line-height:20px;
                font-family: Arial, Helvetica;
            }

            /*  membuat selector class */
            .judul {
                text-decoration: underline;
                font-style: italic;
                font-weight: bold;
            }

            /*  membuat selector id */
            #merah {
                color: red;
            }
            #tebal {
                font-weight: bold;
                letter-spacing: 4px;
            }

            /*  Kontekstual selector, hanya akan dievaluasi
                jika kondisi terpenuhi */
            b i {
                color: green;
                letter-spacing: 2px;
            }
        </style>
    </head>
    <body>
        <center>
            <h1 class="judul">
                Hanya ini
            </h1>
            <h2 id="tebal">
                Oleh : Rere
            </h2>
            <p>
                Kuberikan seikat <i id="merah">rumput liar</i>
                sebagai pengganti <b id="merah">mawar</b><br />
                Walau orang tak menganggapnya berharga<br />
                Kuharap <b><i>indah</i></b> di matamu.
            </p>
        </center>
    </body>
</html>

Hasil dari script di atas :