Step by step mempelajari CSS

Cascading stylesheet atau biasa disebut CSS merupakan teknologi yang digunakan dalam design website. Mungkin dapat dikatakan 100td_persen website yang ada sekarang sudah menggunakan CSS,  karena memang CSS sangat diperlukan dalam mempercantik tampilan website.

Apa saja yang dapat dilakukan CSS?

 

 

Untuk dapat menjawab pertanyaan diatas, mari kita bahas beberapa hal berikut :

1. CSS Font
CSS Font digunakan untuk mengatur font dalam tampilan halaman website. CSS Font antara lain :
 
Font digunakan untuk mengatur font secara umum, penulisan perntah font adalah sebagai berikut :
font: normal  12px/14px Arial, helvetica, sans serif;
-    normal untuk menentukan tebal atau tipisnya font
-    12px/14px untuk menentukan ukuran terkecil font dan ukuran maximalnya
-    Arial, helvetica dst digunakan untuk memilih jenis font yang akan digunakan
Font-family digunakan untuk menentukan jenis font yang akan digunakan
Font-size digunakan untuk menentukan ukuran font
Font-style digunakan untuk mentukan style dari font yang kita gunakan, misalnya italic atau normal
Font-weight juga digunakan untuk menentukan tebal tipisnya font yang dipakai

 


2. CSS Background
Digunakan untuk mengatur background suatu area atau bagian dalam halaman website.
 
Berikut penjelasan dari beberapa perintah css background
background digunakan untuk mengatur background secara umum, yaitu bisa berbentuk background gambar atau background warna. Perhatikan contoh berikut :
background:blue;
background:url(images/gambar.gif);
background-attachment digunakan untuk mengatur posisi background gambar pada halaman website, dimana background gambar dapat di set statis, sehingga walaupun pengunjung menggerakan scroll  browser ke atas atau ke bawah, background akan tetap pada posisinya.
Background-position digunakan untuk mengatur posisi background gambar. Dimana background gambar dapat diset pada bagian atas, bawah, kanan atau kiri pada sebuah area tertentu
Background-repeat digunakan untuk mengatur perulangan background gambar

3. CSS Border atau garis tepi
Berikut penjelasan dari beberapa macam perintah css border:
Border digunakan untuk membuat garis tepi pada sebuah area dalam halaman website. Perintah yang umum digunakan antara lain:
Border: #warna ukuran tipe_border
perhatikan contoh berikut : 
Border: silver 1px solid;
perlu diingat bahwa perintah diatas akan membuat border keseluruha, yaitu border atas, kanan, bawah dan juga border kiri. Jika kita hanya memerlukan border pada bagian tertentu, gunakan perintah
border-top,  border-right , border-bottom dan border-left,  contoh border-bottom:#ff9900 2px solid;


4. CSS Margin dan Padding
Margin merupakan jarak keluar antara sebuah elemen dengan elemen lainnya dalam halaman website, sedangkan Padding merupakan jarak kedalam sebuah elemen dengan value atau isi dari elemen tersebut. Beberapa contoh penulisan perintah Margin dan padding dapat dilihat pada contoh berikut:

margin:10px 0 0 0;
padding:0 0 0 10px;

Penulisan diatas merupakan cara pengaturan margin dan padding secara berurutan, yang dimulai dari Atas, Kanan, Bawah dan kiri
Bagaimana CSS dapat mengenali bagian – bagian dalam halaman html?
Jawabannya adalah dengan 3 selektor  berikut :
1. Mengenali  TAG atau perintah html
2. Mengenali Class pada bagian – bagian tertentu  halaman html
3. Mengenali ID bagian – bagian tertentu dalam sebuah halaman html

Pembahasan tentang Selektor pada CSS akan kita bahas pada tutorial selanjutnya, silahkan tuliskan komentar ada pada form dibawah atau kirimkan request anda pada link ini untuk dapat kami bahas pada tutorial selanjutnya.

Salam kreatif

 


Komentar pembaca

rezhamas bisa tolong berikan daftar2 kode css beserta fungsinya... serta contoh cara menempatkan id dan classposting pada :2014-03-18 09:16:31
agungTutorial ini sederhana, namun justru ini yg sangat mudah di mengerti ini. Ga njlimet.. . Terus berkarya juragan. selamat....posting pada :2014-03-21 00:49:25
indahsama ama mas reza gan. minta daftar2 kode css beserta fungsinya... serta contoh cara menempatkan id dan classposting pada :2014-05-08 16:58:40
andarajaTerima kasih atas penjelasannya...posting pada :2015-01-08 00:51:34
         
     
         
 
         
   
         
   
 

Tulis komentar