Pengenalan CSS

Standard

CSS Merupakan singkatan dari Cascading Style Sheet. Dengan CSS, Anda bisa memisahkan antara desain tampilan website dengan konten/isi website.

Cascading StyleSheet

Cascading StyleSheet. Image from Adobe Design Center

HTML/xHTML sebenernya digunakan untuk memberi tahu browser bagaimana sebuah tag HTML ditampilkan di browser. Misalnya saja tag HTML <i>Teks miring</i>, tag tersebut sama artinya dengan “Halo web browser, teks ini tolong dicetak miring”. Dengan begitu, web browser yang Anda gunakan akan menampilkan teks secara miring(italic). Contoh lainnya, tag HTML <b>halo semua</b>, sama artinya dengan “Browser, tolong teks halo,semua ditampilkan dengan cetak tebal” yang selanjutnya web browser akan menampilkannya dengan cetak tebal.

Tapi bagaimana jika Anda ingin menampilkan teks tersebut agar tampil dengan teks yang miring dan bercetak tebal? Jika menggunakan HTML, solusinya adalah menuliskan tag HTML sebagai berikut :

<i><b>teks ini blod dan italic</b></i>

Yup, masalah selesai dengan tag tersebut. Tapi bagaimana jika Anda memiliki banyak teks yang harus dicetak tebal sekaligus miring? Apakah dengan menuliskan tag HTML seperti contoh diatas? Bisa saja tapi sangat tidak direkomandasikan dan tidak ada orang yang melakukan hal seperti itu. Selain karena harus mengetikkan berulang-ulang, juga akan memperbesar ukuran file HTML. Solusi untuk permasalahan diatas adalah dengan menggunakan CSS.

CSS sebenarnya berguna untuk memberikan perintah tambahan terhadap web browser agar suatu teks/elemen HTML bisa ditampilkan dengan tampilan tertentu sesuai yang dideskripsikan pada perintah stylesheet. Intinya, CSS berfungsi untuk memberikan style pada suatu tag/elemen HTML.

Ada 3 cara dimana kita bisa meletakkan kode CSS, yaitu:

Internal StyleSheet

Internal StyleSheet adalah sebutan kalau kita meletakkan kode CSS di bagian head sebuah file HTML. Atau dengan kata lain, kita meletakkan kode CSS diantara tag <head> dan tag </head>. Formatnya bisa seperti contoh dibawah:

<head
<style type="text/css">
.. letak kode css ..
</style>
</head>
<body>

Dengan meletakkan kode CSS pada bagian head, berarti halaman HTML yang Anda buat akan mengandung kode CSS. Cara ini bagus jika Anda hanya perlu untuk memberikan style pada halaman HTML itu saja. Jika Anda ingin agar tiap halaman HTML memiliki style yang berbeda-beda, Anda bisa menggunakan cara ini.

Inline Style

Inline Style berbeda dengan Internal StyleSheet. Jika Internal StyleSheet berarti Anda meletakkan kode CSS pada file HTML (bagian head), maka Inline Style berarti Anda meletakkan kode CSS pada elemen HTML. Untuk lebih memberikan gambaran seperti apa Inline Style, berikut adalah contoh kodenya:

<p style="color:#ff0000;">teks warna merah </p>

Hasil dari kode diatas adalah:

teks warna merah

Seperti yang bisa Anda lihat, disini kode CSS diletakkan langsung pada elemen paragraf (tag <p>), dengan menambahkan atribut style dan mengetikkan kode CSS. Cara ini bagus jika Anda ingin suatu elemen memiliki tampilan yang berbeda. Misalnya saja Anda ingin ada teks yang berwarna merah dan ada teks yang berwarna biru.

External StyleSheet

External StyleSheet adalah peletakkan kode CSS pada file yang berbeda. Dimana nantinya Anda akan membuat sebuah file khusus yang berekstensi .css dimana nantinya kode-kode CSS akan diletakkan pada file tersebut. Setelah kode CSS diketikkan pada file tersebut, Anda bisa menghubungkan file CSS dengan file HTML yang Anda buat dengan mengetikkan perintah:

<link rel="stylesheet" type="text/css" href="letak file .css" />

Perintah diatas diketikkan pada bagian head. Atau dengan cara kedua seperti berikut ini:

<style type="text/css">
@import url(letak file .css)
</style>

Dengan menggunakan Eksternal StyleSheet, maka file HTML akan terhubung dengan file CSS. Jika Anda perlu untuk mengubah suatu style, cukup dengna mengubah kode CSS pada file .css. Ada beberapa alasan mengapa cara ini dianjurkan:

  • Maintenance kode CSS lebih mudah
  • Mengurangi ukuran file HTML, karena kode CSS diletakkan pada file yang berbeda
  • Dapat menghemat bandwidth

Yang mana yang lebih baik ?

Dengan banyaknya cara untuk meletakkan kode CSS Anda mungkin bertanya cara yang mana yang sebaiknya dipilih? Jawabannya adalah tergantung kebutuhan. Tapi saya sendiri lebih menyukai menggunakan External StyleSheet karena beberapa alasan yang sudah disebutkan tadi.

Bagaimana jika ketiga cara diatas digabungkan?

Jika ketiga cara diatas digabungkan atau jika Anda menggunakan 2 cara, maka web browser akan membuat style baru hasil dari penggabungan style tersebut dengan prioritas pertama ada pada Inline Style, kedua adalah Inline StyleSheet dan terakhir adalah External StyleSheet.

Maksud dari prioritas disini adalah jika pada External StyleSheet anda mengetikkan kode CSS untuk menampilkan teks warna merah, sedangkan di Internal StyleSheet Anda mengetikkan kode CSS untuk menampilkan teks warna biru, maka hasil yang tampil adalah teks warna biru akan prioritas Internal StyleSheet lebih diutamakan daripada External StyleSheet.

Tampilan berbeda di tiap web browser

Semakin Anda mendalami CSS maka Anda akan semakin sadar bahwa setiap browser mempunyai cara berbeda dalam menterjemahkan kode CSS. Inilah yang membuat sedikit kerja keras bagi para web designer untuk membuat tampilan sebuah halaman bisa tampil sama pada browser yang berbeda.

Pada artikel berikutnya saya akan membahas tentang Syntax CSS. Syntax CSS adalah bentuk kode CSS. Untuk mendapatkan update terbaru, jangan lupa untuk berlangganan via feed. Jika ada pertanyaan silahkan ditanyakan via komentar.

20 thoughts on “Pengenalan CSS

  1. fajri

    mau tanya nih, bisa tlg jelasin bagian inherit sm float ga?soalnya bingung nih dibagian ini.

    inherit: nilai mengikuti elemen diatasnya.
    Misal ada kode CSS;
    body{
    color:#fdfdfd;
    }
    .style1{
    color:inherit;
    }

    True ada kode HTML:
    <body>
    <div style=”color:red;”>Teks</div>
    <div class=”style1″>Teks</div>
    </body>

    Div yang pertama akan menampilkan teks berwarna merah, sedangkan Div yang kedua akan menampilkan teks sesuai elemen induknya, yaitu elemen body yang memiliki teks warna #fdfdfd;

    float: artinya element tersebut dicopot dari halaman tersebut. Rasanya float perlu penjelasan tersendiri. Nanti saya buat artikel lebih jelasnya.

    • Masing2 browser memang punya cara sendiri2 merender kode-kode html dan css sebuah halaman web. Tapi justru disinilah nilai seninya! Ini mungkin salah satu berkah bwt para desainer web, sebab kalo semua browser sama mungkin seorang desainer web gak dibutuhkan lg…:)

      Salam.

  2. Pingback: Cute^.^Jin
  3. Pepeng

    Pak, makasih atas ilmunya !!! saya mau sharinng, saya udah buat CSS dengan external stylesheet, tetapi pas dipanggil (dengan menggunakan tag , tidak ada pengaruh apa-apa yang nampak pada browser, mohon penjelasannya pak !!!! Terima kasih sebelumnya……!!! Wassalam

    • sebelum atau sesudah apa maksudnya?
      Biasanya CSS code terletak diantara

      <head></head>

      diawali dengan

      <style type="text/css">

      dan diakhiri dengan

      </style> 

      baik untuk Internal StyleSheet maupun External StyleSheet.

  4. lha kloq naruh kode CSS buat rounder/sudut tumpul..naruhnya di atas/bawahnya kode apa brow…?? atau di antara kode apa dan apa?soalnya sya udh coba2 tp gk brhasil..
    maaf sya msih bljar..

Leave a Reply

Your email address will not be published. Required fields are marked *