Scribd Logo
Unggah

Selamat datang di Scribd!

  • Panduan CSS

    Diunggah oleh

    ANGGIAT ANDIKA
    14 tayangan10 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    14 tayangan10 halaman

    Panduan CSS

    Diunggah oleh

    ANGGIAT ANDIKA

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 10

    PANDUAN CSS

    (Cascading Style Sheet)

    Oleh :
    Budi Sulistyo

    0
    1. Apa itu CSS ?
    CSS merupakan singkatan dari Cascading Style Sheet. Kegunaannya adalah untuk
    mengatur tampilan dukumen HTML, contohnya seperti pengaturan jarak antar baris, teks,
    warna dan format border bahkan penampilan file gambar.
    Perlu diingat, CSS hanyalah berupa kumpulan script yang tujuannya bukan untuk
    menggantikan HTML, melainkan pelengkap agar dokumen HTML bisa tampil lebih cantik
    dan dinamis.

    2. Sintaks Kode CSS


    Berbeda dengan skrip HTML, cara penulisan sintaks kode CSS secara umum terdiri atas
    komposisi berikut ini :
    selector {property : value}
    Selector merupakan tag HTML atau elemen (class/ID) yang dipilih.
    Property adalah atribut yang ingin anda atur nilainya
    Value merupakan nilai dari property, bisa berupa angka atau teks.
    Sebagai contoh, anggaplah kita ingin mewarnai seluruh teks dalam tag <p> maka
    penulisan kodenya menjadi :
    p {color : red}
    Dimana : p merupakan tag <p> yang akan diatur stylenya, color adalah salah satu contoh
    property yang bisa kita gunakan dan red merupakan value dari property color.
    Nilai property atau value didefinisikan dengan tanda “:” dan pendefinisian
    property/atribut berada dalam tanda kurung kurawal “{“ dan “}”.

    3. Penulisan Kode CSS


    Dalam penulisannya kode CSS bisa dilakukan dengan tiga cara, yaitu
    a. Secara langsung (Inline Style)
    Contoh penulisannya :
    <body>
    <p style=”color : red”> teks warna merah </p>
    <p style=”font-size : 12px”> teks berukuran 12 pixel </p>
    </body>

    1
    b. Definisi dalam header dokumen (Header Style)
    Sesuai dengan namanya, header style berarti menuliskan skrip CSS pada header
    dokumen HTML, di dalam bagian <head> dan </head>.
    Contoh penulisannya :
    <head>
    <title>CSS dalam header</title>
    <style type="text/css">
    .style1{
    font-family : arial ; color : red ; font-style : italic
    }
    .style2{
    font-family : verdana ; color : blue ; font-size : 12
    }
    </style>
    </head>
    Hasil pada Browser :

    c. Link ke dalam dokumen HTML (Linked CSS)


    Memisahkan skrip CSS dari dokumen HTML memiliki beberapa keuntungan, antara
    lain :
    a. Anda tidak perlu membuka dokumen HTML untuk mengedit CSS (karena telah
    berupa file yang terpisah).
    b. File CSS yang sama dapat digunakan oleh beberapa dokumen yang berbeda,
    menghemat waktu dalam proses desain web.

    2
    Untuk menggabungkan file HTML dan file CSS, tambahkan skrip penghubung
    dibawah kode <head> seperti berikut :
    <head>
    <title>latihan link CSS</title>
    <link rel=”stylesheet”
    Href=”format.css” type=”text/css” >
    </head>
    Penjelasan :
    Skrip “format.css” merupakan file baru terpisah yang dihubungkan kedalam file
    HTML

    4. Class & ID
    Anda dapat mendefinisikan selector secara lebih spesifik menggunakan Class & ID.
    Keuntungan dari teknik ini, Anda dapat mengatur agar tag HTML yang sama ditampilkan
    secara berbeda tergantung Class atau ID yang digunakan. Nama untuk Class selalu diawali
    dengan tanda titik (.), sedangkan nama untuk ID selalu diawali dengan tanda pagar (#).

    Perbedaan antara ID dan Class yang harus diingat : Sebuah ID hanya dapat digunakan
    pada satu elemen, sedangkan sebuah Class dapat digunakan pada beberapa elemen.

    5. Nesting
    Bila dokumen HTML yang dibuat memiliki struktur yang baik, Anda tidak perlu repot-
    repot membuat banyak Class dan ID. Karena Anda juga dapat mendefinisikan CSS dengan
    cara penulisan “selector dalam selector”.
    Contoh penggunaannya :
    #top h1 {
    color: #00592D;
    font-family: Cambria;
    }

    Maka browser akan membacanya sebagai “tag h1 dalam ID top”.

    3
    6. Pseudo Classes
    Pseudo Classes adalah atribut tambahan yang diberikan pada selector, biasanya
    dipisahkan dengan tanda titik dua (:). Beberapa pseudo class tidak didukung oleh
    browser, namun terdapat empat macam pseudo class yang kompatibel diseluruh browser
    ketika digunakan pada link.
    Empat pseudo class itu antara lain :
    o Link – menandai tautan (link) yang belum pernah dikunjungi
    o Visited – menandai link yang telah dikunjungi sebelumnya
    o Active – menandai link ketika memperoleh fokus (di klik)
    o Hover – menandai link ketika mouse kursor berada diatasnya

    7. Shorthand Properties
    Beberapa value dari property CSS dapat diisi dengan teks selain dengan angka atau
    campuran keduanya. Anda bahkan dapat mempersingkat penulisan property hanya
    dengan menggunakan spasi.
    Properti-properti yang mendukung penulisan semacam ini misalnya margin, padding dan
    border. Adapun pengurutan penulisan secara default bila Anda ingin mempersingkat
    kode CSS adalah :
    Selector {property : top right bottom left ;}

    Contoh :
    div { border-top-width : 1px;
    border-right-width : 5px;
    border-bottom-width : 10px;
    border-left-width : 20px;
    }
    Penyederhanaan-nya :
    div { border-width : 1px 5px 10px 20px;
    }

    4
    p{ font-style : italic ;
    font-weight : bold ;
    font-size : 12px ;
    font-family : Verdana, Geneva, sans-serif;
    }
    Penyederhanaan-nya :
    p{ font: italic bold 12px Verdana, Geneva, sans-serif;
    }

    8. Background Property
    Selain warna, property background juga bisa menggunakan file gambar dan opsi lainnya
    seperti perulangan gambar dan posisi gambar.
    Adapaun property yang bisa digunakan antara lain :
    o background-color : untuk menentukan warna background
    o background-image : dengan property ini, anda menggunakan file gambar sebagai
    background
    o background-repeat : mengatur perulangan gambar. Secara default, gambar akan
    diulang hingga memenuhi halaman. Namun berkat CSS, anda memiliki 3 opsi :
     repeat-x : berarti gambar diulang secara horizontal, dari kiri ke kanan
     repeat-y : berarti gambar diulang secara vertical, dari atas ke bawah
    o background-position : mengatur posisi gambar apakah berada diatas, tengah, bawah,
    kiri, kanan atau gabungan keduanya.

    5
    9. Padding dan Margin
    o Padding adalah ruang bagian dalam dari sebuah elemen
    o Margin adalah ruang bagian luar dari sebuah elemen

    o Catatan :
    Jika Anda mengatur nilai/ukuran margin atau padding, perhatikan ukuran elemen
    karena ukuran margin atau padding mengurangi ukuran semula dari Elemen yang
    telah diatur sebelumnya

    6
    LATIHAN DASAR 1

    7
    LATIHAN DASAR 2

    8
    LATIHAN DASAR 3

    Anda mungkin juga menyukai