Scribd Logo
Unggah

Selamat datang di Scribd!

  • Cascading Style Sheets

    Diunggah oleh

    Suher Manto
    0 tayangan9 halaman

    Judul Asli

    Cascading Style sheets.pptx

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, 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 PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    0 tayangan9 halaman

    Cascading Style Sheets

    Diunggah oleh

    Suher Manto

    Hak Cipta:

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

    CASCADING STYLE SHEETS

    Mengenal dan menggunakan CSS

    Suhermanto, S.Kom Web Programming 1


    Apa itu CSS ?
     Mekanisme mengatur halaman website secara
    keseluruhan, pengaturan pada bagian:
     Huruf

     Warna

     Tata letak
    Ada apa dengan CSS ?
     Maintenance Layout web lebih mudah
     Cukup dari Style sheet-nya
     Tanpa mengubah satu per satu halaman website

     Diterapkan pada SEO


     Dengan istilah Clear code is easier for search engines
    to index.
     Hemat bandwith
     Load page website lebih cepat
    Bentuk penulisan CSS

    •<html><head><title>cs
    • <p style="color: Body{padding:20px;color:#ffc s</title><style
    sienna; margin-left: c00; type=“text/css”>
    20px"> Paragraf ke- } .style1{color:
    1</p> P{color=cccccc;padding=20px; sienna; margin-left:
    } 20px} <body><p
    class=“style1”>this
    • <span style="color: paragraph</p></body>
    sienna; margin-left: </html>
    20px"> Paragraph ke-
    2</span>
    html

    Inline Style External Internal


    Sheet Style Sheet Style Sheet
    CSS Rule

    Selector{Property:Value}
     Selector, meliputi salah satu bentuk dibawah:
     ID
     Class

     Declaration
     Berisi Property & Value

    Contoh:

    .Style1{background:#FFFFFF}
    Class dan ID dalam CSS
     Untuk memudahkan, berikut adalah penjelasan secara umum tentang penggunaan
    class dan ID dalam CSS dan XHTML.
     ID juga dapat digunakan untuk menamai tag sebagai identifikasi pada javascript.
     ID bersifat unik pada setiap halaman, tidak boleh lebih dari satu tag memiliki id
    yang sama pada satu halaman yang sama.
     Class dapat digunakan berulang kali, satu tag dapat memiliki class lebih dari satu
    seperti misal:
    <h1 class="judul besar kanan">Contoh Halaman Website</h1>
    dimana judul, besar dan kanan memiliki style yang saling melengkapi.
     ID biasanya bersifat global yang dibedakan menjadi blok-blok tertentu misalkan,
    header, content, sidebar dan footer. Class biasanya digunakan untuk membedakan
    style tertentu yang dibedakan antara misalnya warna, jenis huruf atau besar huruf.
     Class dapat digunakan untuk mempertegas style dari ID yang bersifat global
    dengan menggunakannya bersama-sama pada satu tag seperti misal:
    <h1 id="pagetitle" class="judul">Contoh Halaman Website</h1>
    Contoh 1(inline style sheet)

    Code Browser
     <body> <p style=" background: #CCCCCC;
    font-size:36px"><span style="background:
    #000000; color:#FFFFFF“>
    &nbsp;5&nbsp;</span> Menggunakan
    CSS</p> <p style="color: #CC9900;
    padding:10px; border:dotted 2px
    #99CC00;">Cascading Stylesheet</a> (CSS)
    adalah mekanisme sederhana untuk mengubah
    Jenis Huruf, Warna, Ukuran dan lain-lain pada
    halaman website. Dengan menggunakan CSS,
    pengaturan tampilan halaman web dapat
    diorganisasikan dalam satu file sehingga
    memudahkan untuk mengubah atau
    memperbaiki tampilan halaman website
    tersebut tanpa harus mengubah satu per satu
    setiap halaman yang berkaitan dalam sebuah
    website.</p></body>
    Contoh 2(internal style sheet)

    Code Browser
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .style1 {font-size: 36px; background: #CCCCCC}
    .style2 {background: #000000; color:#FFFFFF}
    .style3 {color: #CC9900; padding:10px; border:dotted 2px #99CC00;}
    -->
    </style>
    </head>
    <body>
    <p class="style1"><span class="style2">&nbsp;5&nbsp;</span>
    Menggunakan CSS</p>
    <p class="style3">Cascading Stylesheet</a> (CSS) adalah
    mekanisme sederhana untuk mengubah Jenis Huruf, Warna,
    Ukuran dan lain-lain pada halaman website. Dengan
    menggunakan CSS, pengaturan tampilan halaman web dapat
    diorganisasikan dalam satu file sehingga memudahkan untuk
    mengubah atau memperbaiki tampilan halaman website tersebut
    tanpa harus mengubah satu per satu setiap halaman yang
    berkaitan dalam sebuah website.</p>
    </body>

    Anda mungkin juga menyukai