Showing posts with label Pengantar CSS. Show all posts
Showing posts with label Pengantar CSS. Show all posts

10/04/2016

CSS Box Model

Penggunaan istilah Box Model (sebagaimana yang sering digunakan di berbagai pembelajaran CSS dan HTML) menunjukkan bahwa setiap elemen HTML didefinisikan sebagai elemen yang membentuk model kotak persegi panjang (terlepas dari bentuk yang disajikan), dan model kotak berlaku untuk semua elemen HTML (dan XHTML). Oleh karena itu, "Box Model" adalah spesifikasi yang mendefinisikan bagaimana sebuah kotak dan atributnya berhubungan satu sama lain. Dalam contoh yang paling sederhana, gambar berikut akan menjelaskan apa yang disebut box model.
box-model
Setiap elemen akan ditampilkan sebagai kotak persegi panjang, dan ada beberapa sifat yang menentukan ukuran kotak itu, seperti: lebar kotak (width); tinggi kotak (height); jarak antara batas kotak dengan isi kotak (padding); jarak antara batas kotak dengan elemen di luar kotak (margin; dan lain sebagainya.

Sampai di sini, penting untuk kita ketahui bahwa contoh kotak elemen pada gambar di atas hanya bersifat ilustratif belaka. Garis tepi yang saya gambarkan hanya berfungsi untuk menandai area kotak elemen beserta atributnya. Dan di bawah ini saya sertakan contoh nyata dari dokumen HTML beserta atribut CSS pembentuk Box Model. Klik tab "preview" untuk melihat demo.

Pada contoh di atas, kita akan fokus pada kotak berwarna kuning sebagai elemen yang menjadi contoh box model. Kotak kuning tersebut saya buat dengan tag HTML <p> dan saya membungkusnya dengan kotak biru yang saya buat dengan tag HTML <div>. Di sini kita melihat bahwa sebuah kotak elemen bersama atributnya (width, height, margin, dan padding) saling berkaitan dalam menentukan ukuran sebuah elemen, dalam kasus ini saya menggunakan jenis satuan ukuran lenght, yaitu pixel / px (pelajari lebih lanjut pada tautan berikut: satuan ukuran lenght). Jika diakumulasikan maka contoh kotak elemen pada gambar di atas (kotak kuning) memiliki ukuran total 200px untuk lebar elemen dan 150px untuk tinggi elemen dengan asumsi sebagai berikut:
  1. Lebar Kotak
    • width(lebar elemen) : 100px
    • padding kanan : 20px
    • padding kiri : 20px
    • margin kanan: 30px
    • margin kiri : 30px
    • Total ukuran lebar : 100px + 20px + 20px + 30px + 30px = 200px
  2. Tinggi Kotak
    • height(tinggi elemen) : 50px
    • padding atas : 20px
    • padding bawah: 20px
    • margin atas: 30px
    • margin bawah: 30px
    • Total ukuran tinggi: 50px + 20px + 20px + 30px + 30px = 150px

Mengenal Lebih Jauh Atribut CSS Box Model

Sebagian kita mungkin masih belum benar-benar memahamai apa dan bagaimana atribut CSS Box Model bekerja. Sebab, untuk menentukan ukuran sebenarnya dari kotak elemen kita perlu memperhitungkan lebar kotak elemen, jarak antara batas kotak elemen dengan isi kotak (konten), dan jarak antara batas kotak elemen dengan area luar kotak elemen.
Sejauh ini banyak sifat-sifat penentu ukuran kotak elemen seringkali menguras perhatian kita. Untuk memperjelas hal tersebut, mari kita mengulas satu persatu sifat-sifat kotak elemen yang juga menjadi atribut CSS Box Model pada tautan di bawah ini.

08/04/2016

3 Model Penulisan CSS

Model penulisan css Model penulisan CSS yang saya maksudkan di sini adalah cara kita menyisipkan kode CSS dalam sebuah dokumen HTML dengan 3 cara yang paling umum digunakan. Yaitu,
  1. Internal CSS
    • Model Penyisipan css di dalam file Html.
  2. Eksternal CSS
    • Model Penyisipan Css di luar file Html.
  3. Inline CSS
    • Model penyisipan Css langsung di dalam tag Html.
Sebelum kita bahas lebih jauh, sebagai gambaran umum, berikut ini saya sertakan contoh struktur dokumen HTML dasar.

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>

<div id="page-wrapper">
    <div id="header-wrapper">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>

    <div id="main"></div>
    <aside id="sidebar"></aside>
    <footer id="footer-wrapper"></footer>
</div>

</body>
</html>

Model Penulisan Internal CSS

Internal CSS adalah model penulisan css dengan menyispikan kode CSS langsung didalam file HTML, penggunaanya harus diapit di dalam tag <style type="text/css"> ... </style> dan berada diantara tag <head> dan </head>. Contoh model penulisan Internal CSS di bawah ini merujuk pada contoh struktur dokumen HTML dasar yang telah saya sertakan di atas.

HTML

<head>
<style type="text/css">
 body {
            background: #EEEEEE;
            color: #000000;
}
#header-wrapper {
            background: #000000;
            color: #FFFFFF;
} 
</style> 
</head>
Contoh selengkapnya

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
 body {
            background: #EEEEEE;
            color: #000000;
}
#header-wrapper {
            background: #000000;
            color: #FFFFFF;
} 
</style> 
</head>
<body>
<div id="page-wrapper">
    <div id="header-wrapper">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>
    <div id="main"></div>
    <aside id="sidebar"></aside>
      <footer id="footer-wrapper"></footer>
</div>
</body>
</html>

Model Penulisan Eksternal CSS

Model penulisan External CSS adalah model penulisan CSS yang terpisah dari file HTML dan hanya berisikan kode kode CSS saja, biasanya dokumen tersebut berextensi “css”. Anda bisa menuliskannya dalam text editor dan menyimpannya di hosting semacam code.google atau yang lainnya. Untuk menerapkan dokumen External CSS dalam dokumen HTML dibutuhkan sebuah tag <link> dan diletakkan diantara tag <head> … </head>.

HTML

<head>
<link rel="stylesheet" href="doc/css/main.css" /> 
</head>
Contoh selengkapnya

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="doc/css/main.css" /> 
</head>
<body>
<div id="page-wrapper">
    <div id="header-wrapper">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>
    <div id="main"></div>
    <aside id="sidebar"></aside>
      <footer id="footer-wrapper"></footer>
</div>
</body>
</html>

Model Penulisan Inline CSS

Inline CSS adalah model penyisipan css langsung didalam tag HTML. Cara penulisannya cukup dengan menambahkan atribut style="....." dalam tag HTML. Inline Css pada dasarnya tidak direkomendasikan penggunaannya, namun terkadang Inline Css dibutuhkan untuk memberi format HTML yang lebih spesifik.

HTML

<body style="background: #EEEEEE; color: #000000">
..... 
</body> 
Contoh Selengkapnya

HTML

<!DOCTYPE HTML>

<html>
<head>
<title>Judul</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body style="background: #EEEEEE; color: #000000">
<div id="page-wrapper">
    <div id="header-wrapper" style="background: #000000; color: #FFFFFF">
    <header id="header">
        <h1><a href="#" id="logo">Logo</a></h1>
        <nav id="nav"></nav>
    </header>
</div>
    <div id="main"></div>
    <aside id="sidebar"></aside>
      <footer id="footer-wrapper"></footer>
</div>
</body>
</html>

20/03/2016

Satuan Ukuran Dalam CSS

no-image
CSS memiliki banyak cara untuk menentukan ukuran sebuah elemen, untuk beberapa properti, dibutuhkan satuan ukuran yang berbeda yang meliputi beberapa tipe ukuran seperti ukuran panjang, frekuensi atau nilai waktu atau unit. Pada artikel ini kita akan mengenal satuan ukuran yang dapat diterapkan sebagai sebuah nilai pada properti CSS.

16/07/2015

Properti dan NIlai CSS untuk Teks dan Font

no-image
Ada banyak varian dalam menentukan gaya CSS untuk font dan teks, misalnya jenis font dan warna teks apakah yang akan kita gunakan, apakah bentuk teks akan dibuat normal, miring, tebal, ataukah bergaris bawah, juga menentukan besar dan kecilnya teks dan seterusnya. Dengan sentuhan CSS, gaya font dan teks bisa kita sesuaikan dengan kebutuhan kita sehingga tampilan artikel pada web tidak terkesan monoton dan membosankan. Karena itu pada bagian ini kita akan mengetahui bagaimana CSS melakukan hal-hal tersebut dengan properti berserta nilainya (value). Saya telah merangkum properti CSS font dan teks pada tabel di bawah ini, sementara nilai (value) dari masing-masing property tersebut akan kita uraikan satu persatu pada bagiannya masing-masing.

Dasar-dasar Selektor (Selectors) dalam CSS

no-image
Meskipun ada banyak jenis selektor dalam sintaks CSS, namun sebagai permulaan kita akan fokus pada lima jenis selektor dalam CSS. Kelima jenis selektor yang akan kita bahas kali ini adalah jenis selektor yang paling banyak digunakan, yaitu :
  • Universal Selectors
  • Type Selectors
  • ID Selectors
  • Class Selectors
  • Descendant Selectors
Tapi jika sebelumnya anda masih asing dengan istilah selector (selektor), pelajari terlebih dahulu bagian ini : Dasar-dasar CSS.
Dan sebagai permulaan, anggap saja kita memiliki dokumen HTML dengan struktur seperti berikut

<div id="content">
    <div id="left"><h1>Judul</h1></div>
    <div id="right"> 
          <p>Satu dua tiga empat lima</p>
          <p>enam tujuh delapan sembilan sepuluh</p>
          <i>sebelas duabelas tigabelas empatbelas </i>
          <p class="one"><span> hanya contoh</span></p>
          <i class="one">sekian dan terimakasih </i>
    </div>
</div>

Kemudian kita akan memberikan sentuhan CSS pada dokumen HTML tersebut dengan memanfaatkan kelima jenis selektor yang paling umum digunakan seperti yang sudah saya sebutkan di atas disertai dengan pengertian sederhana dari masing-masing jenis selektor.

1. Universal Selectors

Universal Selectors (Selektor Universal) adalah jenis selektor yang bersifat umum dan menyeluruh. Artinya dengan menggunakan universal selectors maka semua jenis atau tipe elemen HTML akan menjadi target sasaran dalam gaya CSS yang akan kita tentukan, dengan catatan selama kita tidak menetapkan gaya CSS dengan selektor lain yang lebih khusus, maka selektor universal akan bekerja dengan baik. Kita hanya perlu menuliskan tanda bintang * lalu diikuti dengan deklarasi CSS (properti dan nilainya).

2. Type Selectors

Jika selektor universal menentukan gaya CSS pada semua jenis atau tipe elemen HTML, maka Type Selectors secara khusus akan menyeleksi - menentukan format gaya CSS - elemen HTML berdasarkan tipe elemen tertentu dalam sebuah dokumen. Tipe elemen HTML ini kemudian disebut dengan Tag HTML, yaitu struktur yang dikenali sebagai suatu instruksi untuk memformat objek pada sebuah tampilan dokumen HTML. Web browser akan membaca kemudian menampilkannya sesuai dengan yang diperintahkan. Ada sekian banyak tag name dalam HTML seperti tag heading (<h1>,  <h2>,  <h3> dll), paragraf (<p>), format teks (<i>, <b>, <a>, dll) dan masih banyak lagi, pelajari pada bagian ini. Dengan CSS kita dapat mengintruksikan gaya pemformatan seperti apa yang kita kehendaki pada tag-tag HTML tersebut. Kita dapat menyeleksi tag-tag tersebut sebagai selector dalam CSS dengan rumus penulisan seperti berikut :

Contoh

h1{property:value}

p {property:value}

a {poperty:value}

Sebagai contoh, kita masih memanfaatkan struktur dokumen HTML di atas, kemudian kita akan menerapkan gaya tampilan pada tag "(<p>)" dengan menuliskan CSS seperti ini
p {font-style:normal; font-weight:bold; text-align: right; color: red}

Mari kita lihat hasilnya pada kolom di bawah ini

Dari contoh tampilan dokumen HTML di atas, tanpa menghilangkan CSS universal selectors yang sudah kita tentukan sebelumnya pada sub bab Universal Selectors kita menambahkan type selectors dengan menerapkan CSS pada tag p. Browser akan menerjemahkan bahwa secara default (kondisi sebenarnya / normal) dokumen HTML tersebut akan memiliki warna teks biru yang dihasilkan dari gaya CSS universal selectors yang sebelumnya sudah kita terapkan, kecuali pada tipe elemen yang memiliki tag p, sebab kita telah menentukan aturan yang lebih khusus dengan memanfaatkan type selectors tersebut.

3. ID Selectors

Sifat dasar dari sebuah ID dalam tag HTML adalah unik, artinya tidak diizinkan ada dua atau lebih ID dengan nama sejenis, tidak seperti class. Selektor css untuk ID diawali dengan tanda pagar # kemudian nama id. Kalau meihat dokumen HTML di atas (bagian atas dari artikel ini) kita akan menemukan tag HTML dengan ID tertentu. Ciri-cirinya adalah tag yang disisipi dengan kode id=" (nama id) ". Nama ID itulah yang akan menjadi selektor dalam sintaks CSS. Baiklah di sini saya akan menentukan gaya CSS pada ID HTML dengan nama left lebih tepatnya bagian ini : <div id="left"> dengan penulisan CSS berikut

Contoh

#left {color: white; background: black}
dan hasilnya ...

4. CLASS Selectors

Berbeda dengan ID, CLASS boleh memiliki lebih dari satu nama dalam sebuah dolumen HTML. Selektor css untuk CLASS diawali dengan tanda titik (.) kemudian nama CLASS. Kalau meihat dokumen HTML di atas (bagian atas dari artikel ini) kita akan menemukan tag HTML dengan CLASS tertentu. Ciri-cirinya adalah tag yang disisipi dengan kode class=" (nama class) ". Nama class itulah yang akan menjadi selektor dalam sintaks CSS. Di sini saya akan menentukan gaya CSS pada CLASS HTML dengan nama one lebih tepatnya bagian ini : <div class="one"> dengan penulisan CSS berikut

Contoh

.one{color: green}
bedakan hasilnya..

5. Descendant Selectors

Pada sub-bab ini, kita akan mengambil contoh lain dari dokumen HTML yang sedikit lebih rumit untuk memberi gambaran yang lebih jelas tentang Descendant Selectors.

Contoh

<div id="doukumen">

    <div class="konten-1">
      <div class="elemen-1">
        <div class="elemen-2">
          <div class="elemen-3">
          </div>
        </div>
      </div>
    </div>

    <div class="konten-2">
      <div class="elemen-1">
        <div class="elemen-2">
          <div class="elemen-3">
          </div>
        </div>
      </div>
    </div>

</div>

Perhatikan setiap nama ID dan Class dari masing-masing elemen. Kita menemukan dalam struktur dokumen HTML di atas ada satu ID dengan nama "dokumen" dimana ID tersebut membungkus dua induk elemen CLASS dengan nama "konten-1" dan "konten-2: dimana masing-masing induk elemen memiliki tiga keturunan Class dengan nama "elemen-1, elemen-2, dan elemen-3".
Jika diilustraskan, dokumen HTML diatas akan membentuk struktur seperti berikut

<div id"dokumen"><div>
<div class"koneten-1"><div>
<div class"elemen-1"><div>
<div class"elemen-2"><div>
<div class"elemen-3"><div>

<div class"koneten-2"><div>
<div class"elemen-1"><div>
<div class"elemen-2"><div>
<div class"elemen-3"><div>

Jika kita menambahkan gaya CSS pada Class elemen-2 maka otomatis ada dua elemen yang menjadi sasaran CSS, sebab elemen dengan Class elemen-2 ada pada dua tempat, pertama sebagai anak elemen dari "konten-1", kedua sebagai anak elemen dari "konten-2", sementara (misalnya) kita hanya ingin menyeleksi elemen dengan Class elemen-2 yang merupakan elemen keturunan dari ID "konten-1" bukan "konten-2". Untuk mengatasi hal tersebut, perlu menuliskan selektor yang lebih spesifik. Di sinilah Descendant Selectors bekerja. Perhatikan penulisan Descendant Selectors berikut

Contoh

 konten-1 .elemen-2 {color: red; font-weight: bold;} 

dan hasilnya...

<div id"dokumen"><div>
<div class"koneten-1"><div>
<div class"elemen-1"><div>
<div class"elemen-2"><div>
<div class"elemen-3"><div>

<div class"koneten-1"><div>
<div class"elemen-1"><div>
<div class"elemen-2"><div>
<div class"elemen-3"><div>

Tampilan dokumen HTML di atas menunjukkan bahwa elemen Class dengan nama "elemen-2" yang merupakan elemen keturunan dari ID "konten-1" adalah target gaya CSS, sementara elemen Class dengan nama "elemen-3" ikut terseleksi sebab pada hakikatnya "elemen-3" masih merupakan elemen keturunan dari elemen Class dengan nama "elemen-2". Begitulah bentuk struktur HTML bekerja pada browser dan Descendant Selectors mampu mmemberikan sentuhan format CSS sesuai dengan tugasnya.

13/07/2015

Aturan Penulisan Sintaks CSS

Dalam penulisan CSS ada beberapa aturan yang perlu kita ketahui agar membuatnya dapat berfungsi seperti yang kita harapkan. Seperti yang sudah saya tuliskan di bagian ini (Mengenal dan Memahami Dasar CSS), bahwa sintaks dalam CSS terdiri dari 2 bagian utama yaitu
  1. Selector (selektor)
  2. Declaration (deklarasi)
    • Property (properti)
    • Value (nilai)
sintaks css
sumber gambar: w3c

6 Aturan Dasar Penulisan CSS

Agar CSS berfungsi, kedua hal di atas harus selalu ada dalam penulisannya. Namun tidak sampai disitu saja, ada beberapa aturan penulisan CSS yang perlu kita ketahui dan jika kita mengabaikan aturan-aturan ini, maka CSS tidak akan berjalan seperti yang kita harapkan. Sebagai gambaran umum, perhatikan terlebih dahulu sintaks CSS berikut

h1 {font-style:normal; font-weight:bold; text-align: center; color: Green}

Dari penulisan kode CSS di atas, setidaknya saya telah merangkum ada enam aturan dasar dalam penulisan sintaks CSS seperti berikut,
  1. Penulisan CSS diawali dengan selector (pada kode CSS di atas menggunakan tag h1)
    • h1 {font-style:normal}
  2. kemudian diikuti dengan tanda kurawal (   {   ) untuk membungkus property dan value nya. 
    • h1{font-style:normal}
  3. Dalam penulisan property dan value, jangan lupa untuk memisahkan keduanya dengan karakter (  :   ) titik dua. 
    • h1 {font-style:normal}
  4. Apabila kita ingin menerapkan lebih dari satu property, maka tandai dengan karakter titik atas dan koma bawah (  ;  ), tepat di belakang value dari property sebelumnya.
    • h1 {font-style:normal; color: Green; font-weight:bold; text-align: center}
  5. Property yang memiliki 2 kata, dipisah dengan tanda penghubung (-).
    • h1 {font-style:normal; color: Green; font-weight:bold; text-align: center}
  6. Apabila sudah tidak ada lagi property dan value yang ingin kita tuliskan, maka akhiri dengan tanda (  }   ) untuk menutup bungkus.
    • h1 {font-style:normal; color: Green; font-weight:bold; text-align: center}

Contoh Penulisan Sintaks CSS

h1 {font-style:normal; font-weight:bold; text-align: center; color: Green}


Pelajari lebih lanjut tentang Jenis selector (selektor) dan declaration (deklarasi) pada bagian ini

12/07/2015

Mengenal dan Memahami Dasar CSS

CSS (Cascading Style Sheets)  adalah bahasa komputer yang digunakan untuk menulis format instruksi yang berisi aturan-aturan bagaimana sebuah halaman website akan ditampilkan. Aturan-aturan ini (CSS) kemudian menentukan : tata ruang sebuah elemen HTML, posisi, lebar, tinggi, jenis dan warna huruf yang digunakan, bakcground atau latar belakang, jarak antar elemen HTML  dll. Sebagai contoh, penulisan sebuah judul dalam halaman web dengan HTML seperti  <h1> ABAZTA</h1>  dapat diatur dengan dengan varian gaya CSS seperti jenis font yang digunakan, warna, dan tipenya. Karena itulah sebagian besar tampilan dokumen HTML ditentukan oleh CSS.
Saya akan menampilkan contoh dokumen HTML seperti berikut ini,

HTML

 <!DOCTYPE html>
<html>
<head>
<style>
  h1 {font-style:normal; font-weight:bold; text-align: center; color: Green}
</style>
</head>
<body>

<h1>Abazta</h1>
<p>This is a paragraph.</p>

</body>
</html>

Pada contoh di atas, kita telah menetapkan gaya tampilan pada tag h1 , yaitu pada bagian ini <h1>Abazta</h1> dengan penulisan sintaks CSS seperti berikut

HTML

h1 {font-style:normal; font-weight:bold; text-align: center; color: Green}

Mari kita lihat perbedaan elemen HTML judul pada dua model berikut (klik lihat hasil)
HTML
CSS (tidak ada CSS)
bedakan model penulisan berikut !
HTML
CSS (dengan CSS)

Tampak dari kedua kolom di atas ada perubahan gaya teks judul antara elemen HTML yang menerapkan CSS dengan yang tidak menerapkan gaya CSS.

Mengenal Sintaks CSS

sintaks css
sumber gambar: w3c

Sintaks css dalam bahasa sederhana berarti format penulisan CSS. Format tersebut dibangun dengan dua bagian utama, yaitu : Selektor (selector) dan Deklarasi (declarations).
  1. Selector adalah penanda (tag) identitas elemen HTML terpilih yang akan menjadi target atau sasaran format CSS. Maka pada setiap elemen HTML terdapat tiga selector dasar yang bisa kita tuliskan pada aturan CSS yaitu tag HTML, ID, dan CLASS.

  2. Declarations adalah bentuk-bentuk aturan atau format atau gaya yang akan diterapkan pada selector. Ada dua bagian yang terdapat pada declarations, yaitu
    1. Property
    2. (Atribut yang digunakan dalam penulisan CSS untuk menentukan format atau gaya tertentu sebuah elemen, misal format warna teks dalam sebuah elemen HTML, format lebar, format tinggi, format jarak elemen yang bersangkutan dengan elemen yang lain, dan sebagaianya ) 
    3. Value 
    4. (Nilai yang diterapkan untuk property)

Selanjutnya kita akan mempelajari lebih jauh tentang aturan penulisan sintaks CSS pada bagian ini : Aturan Penulisan Sintaks CSS