Home » Opini, Tutorial, Web Design & CSS

CSS dan Web Design

28 July 2009 3 Comments

Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mendefinisikan tampilan halaman web. CSS didesain untuk memisahkan antara isi stau halaman website dengan cara menampilkan isi (desainnya). Dengan pemisahan ini maka membuat desain web akan lebih mudah karena satu definisi dalam CSS bisa digunakan oleh banyak halaman web. Kalau kita mempelajari tutorial saja sebelumnya mengenai HTML Untuk Web Design anda akan menemukan bahwa design dan content masih jadi satu. Sebagai contoh pendefinisian background dan warna tampilan masih dedefinisikan sendiri-sendiri pada masing-masing halaman. Hal ini tidak akan efektif jika halaman yang dibuat berjumlah banyak dengan desain yang mirip.

Cara menyimpan dan Memanggil CSS

CSS disimpan dalam format file yang berextensi .css, sebagai contoh nama file tersebut adalah style.css. CSS ini akan diload di HTML dengan menggunakan syntak berikut :

1

<link rel="stylesheet" type="text/css" media="all" href="style.css">

Cara pemanggilan diatas dengan asusmsi bahwa style.css berada pada folder yang sama dengan file HTML. Biasanya CSS didefinisikan antara tag <head> dan </head> sebagai contoh :

1
2
3
4

    <head>
    <title> Latihan CSS</title>
    <link rel="stylesheet" type="text/css" media="all" href="style.css">
    </head>

Pendefinisian CSS

CSS didefinisikan dalam format sebagai berikut :

1
2
3

    variable {
       definisi
    }

variable ini bisa memiliki berbagai macam bentuk secara umum dibagi menjadi tiga bagian yaitu bentuk tag umum, div, dan kelas. Variable dalam bentuk umum merupakan variable untuk mendefinisikan tag HTML sesuai dengan nama tag tersebut sebagai contoh :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    body {
 
    }
 
    dan
 
    ul {
 
    }
 
    dan 
 
    li {
 
    }

variable div digunakan untuk mendefinisikan tag HTML yang memiliki id yang ditunjuk sedangkan class digunakan untuk mendefinisikan class yang ditunjuk. Pada CSS nanti anda akan mempelajari penggunaan tag <div> yang dalam tutorial sebelumnya tidak disebutkan.

berikut ini contoh penggunaan div dan class :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

    <table id="table-id">….</table>
 
    maka CSS nya bisa didefinisikan sebagai
 
    #table-id {
         definisi
    }
 
    dan untuk kelas :
 
    <table class="table-id">….</table>
 
    CSS nya bisa didefinisikan sebagai
 
    .table-id {
         definisi
    }

so, silakan tunggu tutorial selanjutnya (^_^)

3 Comments »

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.