Scribd Logo
Unggah

Selamat datang di Scribd!

  • Cascading Style Sheets

    Diunggah oleh

    Goes Darma
    6 tayangan26 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    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:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    6 tayangan26 halaman

    Cascading Style Sheets

    Diunggah oleh

    Goes Darma

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 26

    Cascading Style Sheets (CSS)

    I W. Gede Suweca A.,S.Kom

    Apa itu CSS?

    CSS = Cascading Style Sheets Bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup (sumber: wikipedia.org) Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML atau XHTML.

    Mengapa Menggunakan CSS?

    CSS dapat menyelesaikan permasalahan layout yang tidak bisa diselesaikan hanya dengan HTML / XHTML Dengan CSS kita dapat mengatur layout dari banyak dokumen HTML / XHTML hanya dengan satu Style Sheet

    Versi CSS

    CSS1 pertama dikembangkan untuk format dokumen HTML. CSS2 dikembangkan untuk dapat memenuhi kebutuhan terhadap format dokumen untuk dapat ditampilkan pada visual browser, aural devices, printers, braille devices, handheld devices, dll.

    Versi CSS

    CSS Level 1 (http://www.w3.org/TR/REC-CSS1) CSS Level 2 (http://www.w3.org/TR/REC-CSS2)

    Bagaimana Menggunakan CSS?

    Inline Styles Embedded Styles Linked Styles / External Styles

    Inline Styles

    Menambahkan attribute style kedalam tag HTML / XHTML Berlaku hanya pada tag dimana style ditambahkan Contoh:
    <p style="font-size: 25pt; font weight:bold; font-style:italic; color:red;">Paragraf ini ditambahkan CSS dengan Inline Styles.</p>

    Embedded Styles

    Diletakkan didalam elemen head / diantara tag <head> dan </head> Berlaku hanya untuk halaman dimana style didefinisikan Contoh: <head> <title>Contoh Embedded Styles</title> <style type="text/css"> h1 { font-size: 16pt; font-weight:bold;} p {color:blue;} </style> </head>

    Linked Styles / External Styles

    Diletakkan diluar dokumen HTML / XHTML yaitu membuat satu atau lebih dokumen khusus untuk CSS dengan ekstensi file .css Bisa digunakan bersama oleh dokumen-dokumen HTML / XHTML Menggunakan tag <link> untuk menghubungkan dokumen HTML / XHTML dengan file .css

    Linked Styles / External Styles

    Contoh:
    <head> <link href="style.css" rel="stylesheet type="text/css" /> </head>

    Cascading Order

    Urutan style yang akan dikerjakan terlebih dahulu berdasarkan letak mulai dari yang paling terakhir:
    1.

    2.
    3. 4.

    Default browser style sheet Author style sheet Author embedded styles Author inline styles

    CSS Syntax

    Selector Property Value


    selector {property: value}

    p {color: red}

    Selector

    Universal Selector Element Type Selector Grouping Selector Class Selector ID Selector Attribute Selector

    Universal Selector

    Selector tidak didefinisikan secara spesifik Berlaku untuk semua elemen HTML / XHTML Contoh:
    <head> <style type="text/css"> * { color: Green;} </style> </head>

    Element Type Selector

    Selector didefinisikan secara spesifik untuk elemen HTML / XHTML tertentu Semua elemen HTML / XHTML dapat digunakan sebagai selector Contoh:
    body { color: white; background-color: red; }

    Grouping Selector

    Selector dapat berupa kumpulan dari beberapa elemen HTML / XHTML Dipisahkan dengan tanda koma Contoh:
    h1,h2,h3,h4,h5,h6,body { color: green; }

    Class Selector

    Class Selector didefinisikan dengan diawali tanda titik kemudian diikuti dengan nama Class Contoh:
    <head> <style type="text/css"> p {font-family: Helvetica, sans-serif;} .specialtext {font-weight:bold;} p.specialtext {color:red} </style> </head>

    Class Selector

    Menggunakan Class
    <body> <h1 class="specialtext">Heading ini menggunakan Class yang sama dengan paragraf ke dua</h1> <p>Paragraf ini tidak menggunakan class</p> <p class="specialtext">Paragraf ini menggunakan atribut class sehingga akan memanggil class yang spesifik untuk elemennya sendiri</p> </body>

    ID Selector

    ID Selector didefinisikan dengan diawali tanda # kemudian diikuti dengan nama ID ID Selector harus Unik Hanya dapat digunakan satu kali pada satu dokumen HTML / XHTML

    ID Selector

    Contoh:
    <head> <style type="text/css"> #specialtext { font-weight:bold; color: Red; } p#uniquetext { color:Blue; } </style> </head>

    ID Selector

    Menggunakan ID
    <body> <h1 id="specialtext">Heading dengan ID</h1> <p id="uniquetext">Paragraf dengan ID</p> </body>

    Attribute Selector

    Selector yang lebih spesifik mengacu kepada atribut dari suatu elemen HTML / XHTML Contoh:
    <head> <style type="text/css"> input[type="text"] { color: White; background-color: Green; } </style> </head>

    Attribute Selector
    <body> <form> <input type="text" id="name" /> <input type="submit" value="Submit" id="submit" /> </form> </body>

    CSS Comments

    Perintah untuk menuliskan suatu komentar / dokumentasi Tidak di tampilkan oleh browser Contoh:
    /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial; }

    CSS Validator

    Memastikan bahwa CSS yang kita buat sudah sesuai standar W3C CSS Validation Service http://jigsaw.w3.org/css-validator/

    Rekomendasi Pengembangan Mandiri

    http://www.html.net/tutorials/css/ http://www.w3schools.com/css/ http://www.w3.org/

    Anda mungkin juga menyukai