Tutorial Cara Menggunakan CSS Pada Web Design yang Baik

cara menggunakan css

Pada web desain, CSS berfungsi untuk mengatur tampilan web yaitu meliputi layout, pengaturan posisi objek, pengaturan warna, pengaturan tinggi atau lebar sebuah objek, pengaturan penggunaan jenis huruf dan ukuran huruf, belakangan CSS juga berfungsi untuk pengaturan atau pembuatan animasi yang disebut dengan CSS3 dengan dikombinasikan penggunaannya dengan HTML dan jQuery atau Javascript.

Untuk menggunakan CSS perlu diperhatikan mengenai kompatibilitas disetiap browser, karena browser yang ada sekarang mempunyai standar berbeda, sebaiknya penulisannya disesaikan dengan standar W3C, maka hampir dapat dipastikan tampilan website akan sama pada setiap browser.

  1. CSS Internal

    CSS Internal adalah CSS Style yang penulisannya disatukan dengan halaman HTML, ditempatkan diantara tag < head >...< /head > untuk penulisannya sendiri seperti di bawah ini.


    < html >
    < head >
    < style type="text/css">
    ... CSS Style ...
    < /style >
    < /head >
    < body >
    ...Konten...
    < /body >
    < /html >

  2. CSS External

    Berbeda dengan CSS Internal pada penggunaan CSS External terbagi menjadi dua buah file yaitu file HTML dan file CSS-nya itu sendiri, yang nantinya file CSS terpisah tersebut akan di load pada halaman HTML agar setiap pengaturannya bisa terbaca pada file HTML yang akan dibuat, selanjutnya tampilan HTML akan sesusai dengan yang kita atur pada file CSS Eksternal, untuk contoh cara penggunaannya sebagai berikut:

    Index.html

    < html  >
    < head >
    < link href="style.css" rel="stylesheet" type="text/css" />
    < /head >
    < body >
    ... Konten ...
    < /body >
    < /html >

    style.css

    body {
    ... css style ...
    }

    #id {
    ... css style ...
    }

    .class > li{
    ... css style ...
    }

  3. Inline CSS

    Penempatannya yaitu diletakan langsung pada tag HTML yang akan diatur, misalkan CSS Style akan ditempatkan pada tag

    maka diletakan setelah “p”, berikut untuk contoh penulisannya:


    < p style="color:#fff;margin-left:20px;">Ini adalah paragraf.< /p>

Ketiga teknik diatas mempunyai kelebihan dan kekurangan masing-masing namun lebih dianjurkan menggunakan CSS Eksternal, beberapa keuntungan penggunaan CSS Eksternal diantaranya:

  • Ukuran File halaman HTML nantinya akan lebih kecil, dikarenakan file CSS yang digunakan terpisah, jadi memungkinkan proses website loading kan lebih cepat.
  • Memudahkan penggunaan CSS Style, misalkan kita mempunyai banyak halaman pada pembuatan website dan menggunakan style yang sama maka kita hanya perlu membaca file CSS yang telah dibuat dengan cara memanggil pada halaman HTML.

Selamat Mencoba.

Leave a Reply

Your email address will not be published. Required fields are marked *