mempelajari CSS (Cascading Style Sheet)

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.

 

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.

 

Sifat CSS

Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain itu.

Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus. Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan dibuat seperti model yang ada di skrip tersebut.

Fakta Menggunakan CSS

Fakta Menggunakan CSS diantaranya :

• Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.
• Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk menempatkan objek dalam posisi yang sama.
• Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan kecepatan pengunduhan.
• Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
• Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
• CSS adalah layouting "Masa Depan" dengan penggabungan bersama XHTML.