Belajar CSS Dasar

 
CSS adalah singkatan dari Cascading Style Sheets, yang berfungsi untuk mengontrol tampilan dari sebuah halaman website.
Ada 3 cara untuk memasukkan CSS ke dalam dokumen HTML yaitu:
1. Dengan menambahkan langsung di tag dokumen html, sebagai contoh:

Membuat tulisan warna biru

Membuat jenis font, ukuran dan warna

Test

Membuat tulisan miring

Maka hasil dari style diatas adalah sebagai berikut:
Membuat tulisan warna biru
Membuat jenis font, ukuran dan warna

Test

Membuat tulisan miring
2. Dengan menaruhnya di dalam header dokumen html.
Sebagai contoh kita akan membuat CSS untuk mengontrol tampilan paragraf di dokumen html, cara penulisannya adalah sebagai berikut:

Kemudian kita masukkan style tersebut di antara tag dan :

Saat ini saya sedang belajar CSS

Pengaturan paragraf dengan menggunakan CSS di dalam header dokumen html

Dengan contoh ini, maka setiap paragraf atau yang berada diantara
dan
akan memiliki format yang sama

Preview
3. Kemudian yang ketiga adalah dengan membuat file CSS tersendiri yang tespisah dari dokumen html, secara umum yang terakhir ini adalah yang paling sering digunakan. Untuk menghubungkan dokumen html dengan CSS tersebut kita cukup menambahakan yang berikut ini di header dokumen html:

Sehingga di dokumen html akan terlihat seperti berikut ini:

Untuk mengetahui lebih lanjut tentang bagaimana CSS mengontrol sebuah halaman website, berikut kita akan membuat sebuah halaman website sederhana yang menggunakan CSS.
Buka Notepad kemudian salin kode berikut, dan simpan file tersebut dengan nama “csstest.html”

Disini judul websiteku

Disini sub-judul websiteku

Disini navigasi bagian kiri

Disini konten websiteku

Disini navigasi bagian kanan

Disini Footer websiteku

Preview
Yang berada diantara <– dan –> hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya. Sekarang buka file tersebut dengan browser, maka kita akan melihat halaman yang polos dengan tulisan seadanya.

Sekarang salin CCS berikut kemudian simpan ke folder yang sama dengan “csstest.html” dengan nama “style.css”

#halaman {/* "id" dilambangkan dengan "#" */
width: 800px;
margin: 0 auto;/* agar dokumen berada ditengah */
padding: 0 auto;
}
#judul {
width: 100%;
height: 100px;
background: #5F9EA0;
margin: 0;/* pengaturan sisi bagian luar */
padding: 0;/* pengaturan sisi bagian dalam */
}
#konten {
width: 100%;
margin: 0;
padding: 0;
}
.kiri {/* "class" dilambangkan dengan "." */
width: 25%;
height: 300px;
float: left;
background: #ADD8E6;
}
.tengah{
width: 50%;
height: 300px;
float: left;
background: #FDF5E6;
}
.kanan{
width: 25%;
height: 300px;
float: right;
background: #ADD8E6;
}
.footer{
height: 40px;
background: #8FBC8F;
clear: both;
}
.judul {
color: Red;
padding: 10px 0 0 10px; /* penulisan untuk semua sisi: atas kanan bawah kiri */
}
.sub-judul {
color: #ff0;
padding: 0 10px 10px;
}
p {
padding-left: 10px;/* penulisan untuk satu sisi saja */
}

Yang berada diantara /* dan */ hanya sebagai keterangan agar lebih mudah dimengerti, anda bisa menghapusnya.
Sekarang buka file “csstest.html” dengan browser anda.
Preview
Itulah kira-kira secara dasar cara kerja dari CSS untuk mengontrol halaman website.
Untuk melakukan eksperimen lebih lanjut dan untuk mengetahui perintah-perintah CSS lainnya anda bisa mendownload CSS editor TopStyle Lite. Dengan program tersebut buka file CSS diatas kemudian lakukan perubahan-perubahan dan refresh browser untuk melihat hasilnya.
Be creative…

CSS atau cascading style sheet adalah bahasa scripting untuk memformat tampilan website secara keseluruhan. Tampilan disini berarti mengarah pada warna background, image, jenis dan ukuran huruf, posisi huruf atau elemen dan lain sebaganya, kalau dulu kita menggunankan atribut font pada tag p (

) maka sekarang lebih baik menggunakan CSS.
CSS bisa dituliskan dengan tiga (3) cara yaitu

1. langsung disisipkan didalam tag . Untuk menyisipkan di dalam tag head harus diawali dengan tag
2. menggunakan file external, artinya script css ditulis dalam file tersendiri dengan akhiran .css. dan sisipkan file ini di dalam tag dengan cara seperti ini
3. langsung pada tag yang bersangkutan, misalkan

ada aturan dalam penulisan CSS, khusus yang masih awam dengan CSS, artikel dibawah ini bisa dijadikan referensi. CSS dituliskan dalam bentuk block-block script yang disebut dengan style. Jika anda pernah belajar tentang function, atau baca disini, style itu konsepnya mirip dengan function. Style tersebut bisa dipakai sekali atau berkali-kali tergantung pada tanda didepan style tersebut (saya tidak tahu apa menyebutkannya, tetapi saya akan memberi contoh). Yang patut diingat meski css adalah bahasa scripting, bukan berarti seperti bahasa pemorgraman. Sepanjang artikel ini ditulis, dalam css tidak ada parameter yang menandakan bahasa pemrograman seperti adanya struktur kondisional (if then else), perulangan dan variable. Tidak tahu jika W3C mengeluarkan standar baru. Meski begitu CSS bisa di akses oleh bahasa pemrograman, misalkan javascript, PHP dll. Berikut ini aturan penulisan CSS.

1. menggunakan tanda # sebagai awalan style, contohnya
   #style_ku{
   background-color:blue;
   }
   tanda ini berarti untuk menggunakan style ini harus menggunkana atribut id, dan setiap tag pasti memiliki atribut id, misal
   ini teks
   . Sifat dari id adalah unik, tidak boleh ada elemen yang memiliki id yang sama, makanya style ini hanya bisa digunakan sekali.
2. menggunakan tanda dot (.) sebagai awalan style, contohnya
   .style_ku{
   background-color:blue;
   }
   tanda ini berarti untuk menggunakan style ini harus menggunakan atribut class, setiap tag pasti memiliki atribut class. Misalkan
   das
   . Sifat dari class adalah tidak unik, artinya dalam 1 dokumen HTML boleh memiliki lebih dari 1 class yang sama. Dengan menggunakan tag
3. tanpa tanda, tetapi langsung mengarah pada tag HTML, misalkan
   div{
   background-color:blue;
   }
   artinya semua tag div akan dikenai style tersebut
4. turunan, baik # maupun dot (.) bisa menurunkan style. Style anak juga akan memiliki style dari induk.
   Contohnya
   #induk .anak{
   background-color:red;
   }
   cara menggunakannya
   
   
   

   bimoweb.com/ belajar web

   
   
   
   artinya class anak adalah turunan dari id induk. Jika id induk dihilangkan, maka class anak tidak akan bekerja.

Penggunaan tanda # atau dot(.) tergatung pada kasus yang dihadapi, dan sangat bervariasi. Awalnya binggung cara menggunakanya, kayaknya sama saja sih, tetapi jika anda sering menggunakannya, ada saat yang tepat apakah anda akan menggunakan tanda # atau dot(.) atau malah turunan.

Yang pasti CSS tidak akan cepat ditinggalkan, karena CSS 2.0 sudah digodok oleh W3C, menunggu release resmi saja. Dan browser-browser update terbaru juga sudah mempersiapkan untuk merender scripting ini.

Silahkan tinggalkan komentar atau pertanyaan anda terhadap artikel ini atau pada saya. Saya akan jawab.