Scribd Logo
Upload

Welcome to Scribd!

  • Tim Dosen

    Uploaded by

    rakhaadit
    62 views29 pages
    Pemrograman Web (WebPro)

    Original Title

    CSS

    Copyright

    © © All Rights Reserved

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Pemrograman Web (WebPro)

    Copyright:

    © All Rights Reserved
    Flag for inappropriate content
    62 views29 pages

    Tim Dosen

    Uploaded by

    rakhaadit
    Pemrograman Web (WebPro)

    Copyright:

    © All Rights Reserved
    Flag for inappropriate content
    of 29

    CSS

    Tim Dosen
    CSS (Cascading Style Sheet)
    CSS Overview
     Singkatan dari apakah CSS?

     Apa fungsi utama CSS?

     Apa keuntungan memakai CSS?


    CSS
     Singkatan dari Cascading Style Sheet

     Spesifikasi:
    • http://www.w3.org/TR/REC-CSS1

     Memisahkan style (presentation) dengan konten


    (information)
    Keuntungan

     Rich styling
     Satu style untuk banyak halaman
     Memudahkan pembuatan desain dan
    pemeliharaan website
    Cara penyisipan tag
     Inline
    • Langsung di tag HTML
    • Contohkan!

     Embed
    • Dalam dokumen HTML
    • Contohkan!
    Cara penyisipan tag
     Linked / File eksternal
    • Dalam header dokumen HTML (<head>)
    • Ada dua cara:
     Tag <link>
     Tag @import
     Contohkan salah satu!
     Jika style tidak didefinisikan maka style akan diambil
    dari default setting browser
    Aturan penulisan
     Inline
    • Sama seperti penulisan tag HTML

     Embed & Linked

    • Selector: elemen HTML


    • Property: sifat / atribut dari elemen
    • Value: nilai yang diinginkan
    Aturan penulisan
     Spacing, Tab, Return
    • Sama seperti HTML

     Comments
    • Komentar disisipkan diantara tanda /* .. */

     Grouping
    • Selector (contohkan!)
    • Declaration (contohkan!)
    • Value (contohkan!)
    Selector
     Tag HTML
    h1 {color: green}
    i {font-style: normal}

     Class
    • HTML: <p class="mhs">teks</p>
    • CSS: .mhs {color: gray; font: Arial}

     ID
    • HTML: <p id="mhs1">teks</p>
    • CSS: #mhs1 {color: gray; font: Arial}
    Selector
     Kontekstual
    • Hanya akan diterapkan jika kondisi tertentu dipenuhi.
    Contoh:
    h1 i {color: navy}
    => hanya berlaku untuk elemen yang dilingkupi tag <h1>
    dan <i>
    • Bila tag HTML adalah:
    <h1>judul1 <i>judul2</i> </h1>
    maka bagian mana yg berwarna navy?
    Inheritance
     Jika style tidak didefinisikan, maka akan dipakai style
    yang didefinisikan pada induknya

     Contoh:
    body {color: purple}
    h1 {font-weight: bold}
    warna apa yg akan muncul untuk <h1>?
    Specificity
     Menentukan style mana yg dipakai jika terdefinisi
    lebih dari satu style pada elemen (selector) yg sama

     Nilai specificity paling besar yg akan dipakai

     Urutan specificity:
    • Inline style
    • ID (nilai: 100)
    • Class (nilai: 10)
    • HTML tag (nilai: 1)
    Specificity
     Kasus:
    .par {color: blue}
    p {color: green}
    #p1 {color: black}

    <p class="par" id="p1" style="color:red">Hi</p>

    Maka warna apakah yg muncul?


    Basic CSS Properties
     Font
     Color & Background
     Text
     List
    CSS properties
     CSS properties used for background effects:

     background-color
     background-image
     background-repeat
     background-attachment
     background-position
    CSS TEXT
    • Text Color
    • Text Alignment
    • Text Transformation
    • Text Indentation

    • Text Decoration(overline, line-through, underline)


    CSS FONT
    • Font Family
    • Font Style
    • Font Size
    CSS Link
    • Styling Links ( Link, Visited, Hover, Active)
    CSS List
    • Different List Item Markers
    • An Image as The List Item Marker
    CSS Table
    • Table Borders
    • Collapse Border
    • Table Width and Height
    • Table Text Alignment
    • Table Padding
    • Table Color
    CSS Box Model

    • Content - The content of the box, where text and images appear
    • Padding - Clears an area around the content. The padding is transparent
    • Border - A border that goes around the padding and content
    • Margin - Clears an area outside the border. The margin is transparent
    CSS Border
    • Border Style
    • Border Color
    • CSS Outline
    • CSS Margin
    • CSS Padding
    Pengelompokan Elemen Dokumen

    • Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll)


    dapat dikelompokkan untuk menambahkan struktur lojik pada
    dokumen

    • Pengelompokkan ada dua jenis :


    • inline (alur, flow) : <span> </span>
    • block (blok) : <div> </div>

    • <span> dan <div> biasanya digunakan dengan parameter id dan


    class

    • Struktur lojik ini dapat digunakan untuk :


    • mempermudah menginterpretasi isi dokumen
    • memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS
    Pengelompokan Elemen Dokumen

    <div id="mhs01" class="mhs">


    <span class="nama">Adrian Marzuki</span><br>
    <span class="alamat">Jl. Tubagus Ismail XI/5</span>
    </div>
    <div id="mhs02" class="mhs">
    <span class="nama">Dewi Purnama</span><br>
    <span class="alamat">Jl. Cisitu Lama 24</span>
    </div>

    <style type="text/css">
    .mhs {border: black solid 1; margin-bottom: 10;
    padding: 10}
    .nama {font: bold 20 Arial}
    .alamat {font-style: italic}
    </style>
    <div id="mhs01" class="mhs">
    <span class="nama">Adrian Marzuki</span><br>
    ...
    Latihan
    Soal
    • Buatlah tampilan sebagai berikut, TANPA TABEL, dan
    lengkap dengan CSSnya.

    You might also like