Scribd Logo
Unggah

Selamat datang di Scribd!

  • 07.01. Style Pada Halaman Web

    Diunggah oleh

    niken
    8 tayangan39 halaman
    style css

    Judul Asli

    07.01. Style pada Halaman Web

    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
    style css

    Hak Cipta:

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

    07.01. Style Pada Halaman Web

    Diunggah oleh

    niken
    style css

    Hak Cipta:

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

    STYLE PADA HALAMAN WEB

    Pemrograman Web Dinamis dan Perangkat Bergerak RPL XI-1


    PENGENALAN CSS

    ▪ CSS yang memiliki kepanjangan Cascade Style Sheet


    ▪ CSS ini digunakan para web designer untuk mengatur style
    elemen yang ada dalam halaman web mereka, mulai dari
    memformat text, sampai pada memformat layout.
    ▪ CSS bukan merupakan bahasa pemograman, melainkan sebuah
    aturan untuk mengendalikan beberapa komponen web
    sehingga akan lebih terstruktur dan mudah pengaturannya
    ▪ HTML ditujukan untuk membuat struktur, atau konten dari
    halaman web. Sedangkan CSS digunakan untuk tampilan
    dari halaman web tersebut
    ▪ Istilahnya, “HTML for content, CSS for Presentation”.
    KEUNTUNGAN PENGGUNAAN CSS

    ▪ Mempermudah untuk mengatur style elemen dalam halaman


    web
    ▪ Misalnya untuk mengatur style elemen heading. Kita
    menginginkan jenis fontnya adalah Arial, ukuran font 24px
    dan berwarna biru
    ▪ Contoh
    PENULISAN CSS

    ▪ Inline Style, cara menginput kode css langsung kedalam tag


    HTML dengan menggunakan atribut style
    ▪ Contoh
    ▪ Internal Style, memisahkan kode CSS dari tag HTML namun
    tetap dalam satu halaman HTML. Tag style ditulis pada
    bagian <head> dari halaman HTML
    ▪ Contoh
    ▪ External Style, kode CSS dipisahkan pada file tersendiri.
    Setiap halaman yang membutuhkan kode CSS tinggal
    memanggil file tsb
    ▪ Contoh :
    Selector value
    STRUKTUR STYLE

    property

    ▪ Selector digunakan untuk menentukan pada elemen apa style


    tersebut diterapkan. Selector dapat berupa nama id elemen atau
    nama class
    ▪ Properti adalah jenis style. Dapat diisi dengan jenis warna, ukuran,
    perataan margin dll
    ▪ Value diisi dengan nilai dari propertinya, misalnya red untuk
    warna dll
    ▪ Setiap akhir penulisan properti dan value harus diakhiri dengan
    tanda titik koma (semicolon)
    SELECTOR PADA CSS

    ▪ Class Selector, akan mencari seluruh tag yang memiliki


    atribut class dengan nilai yang sesuai. Tag HTML harus
    mempunyai atribut class
    ▪ Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan
    dalam sebuah tag dapat memiliki lebih dari 1 class
    ▪ Untuk menggunakan class selector, di dalam CSS kita
    menggunakan tanda titik sebelum nama dari class
    ▪ Contoh
    SELECTOR PADA CSS
    SELECTOR PADA CSS

    ▪ ID Selector, penggunaannya sama dengan class selector


    bedanya kita menggunakan atribut id
    ▪ Id hanya bisa digunakan sekali dalam sebuah halaman web
    dan tidak boleh sama
    ▪ Untuk menggunakan id selector, di dalam CSS kita
    menggunakan tanda pagar ”#” sebelum nama class
    ▪ Contoh
    SELECTOR PADA CSS
    CONTOH LAIN
    CONTOH LAIN
    VALUE

    ▪ Predefined Value, merupakan nilai yang sudah terdefinisikan


    oleh (X)HTML. Nilai ini dapat dipilih dari beberapa alternatif
    pilihan yang ada

    ▪ Bilangan, Suatu value dapat pula berupa bilangan tertentu


    (tanpa satuan apapun)
    VALUE

    ▪ Panjang, Besar dan Prosentase , untuk menyatakan panjang,


    besar dan prosentase, value harus diberikan satuan seperti
    px (pixel), in (inch), cm (centimeter), mm (milimeter), pt
    (points) dan pc (picas)

    ▪ URL, sebuah value juga dapat berupa URL


    VALUE

    ▪ Warna, untuk memberi value berupa warna pada properti,


    dapat dilakukan dengan menuliskan warna yang diinginkan,
    misal (red, green, yellow, dll) atau dengan menuliskan dalam
    kode hexadesimal
    BACKGROUND
    BACKGROUND
    MARGIN DAN PADDING

    Margin adalah sisi luar dari sebuah element


    Padding adalah sisi dalam dari sebuah element
    FONT
    BORDER
    BORDER
    BORDER
    POSITION

    ▪ Position digunakan untuk mengatur posisi sebuah elemen


    HTML
    ▪ Beberapa property position CSS yang digunakan :
    a. Static
    b. Relative
    c. Fixed
    d. Absolute
    STATIC
    RELATIVE
    FIXED
    ABSOLUTE
    LIST
    FLOAT

    ▪ Float berfungsi untuk letak element secara horizontal


    LINK
    LINK

    Anda mungkin juga menyukai