Scribd Logo
Unggah

Selamat datang di Scribd!

  • 5 Css Dasar

    Diunggah oleh

    Lalu Kamar
    7 tayangan14 halaman
    scn

    Judul Asli

    5 css dasar

    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
    scn

    Hak Cipta:

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

    5 Css Dasar

    Diunggah oleh

    Lalu Kamar
    scn

    Hak Cipta:

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

    t e

    f No
    im
    Perancangan Web
    #5- CSS Dasar Imam Fathurrahman, M.Kom
    Fungsi css

    -CSS singkatan dari Cascading Style Sheet .

    o t
    -CSS merupakan sebuah e bahasa pemrogram
    f
    an yang fungsinyaN untuk menstrukturkan kom
    im web yang beragam sesuai
    ponen-komponen
    dengan keinginan kita .
    .
    Syntax CSS

    CSS memiliki dua bagian utama:

    1) pemilih ( Selector ) , dan


    t e
    No
    2) satu atau lebih deklarasi ( Declaration ).
    f
    im
    Syntax CSS

    CSS memiliki dua bagian utama:

    t e
    Selector adalah HTML element yang ingin dibuat style nya.

    No
    Declaration merupakan isi dari property dan nilai dari CSS.
    f
     Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property diguna
    kan titik koma ( ; ) im
    Contoh :

    <style>
    p {color:red; text-align:center;
    }
    </style> <style>
    t e
    f No
    p {color:red; text-align:center;}
    </style>

    im
    <html>
    <body>
    <p> mulai mencoba belajar CSS </p>
    </body>
    </html>
    CSS id dan Class

    CSS id
    • Selector id digunakan untuk menentukan style untuk elemen tunggal y
    e
    ang unik . Id pemilih menggunakan atribut id elemen HTML, dan didefi
    t
    No
    nisikan dengan “#“. Aturan style bawah ini akan diterapkan pada eleme
    n dengan id = “para1″ f
    im
    Contoh :

    <style>
    • #para1 #para1 {text-align:center;color:blue;}

    {
    e
    </style>

    t<html>

    No
    text-align:center; <body>
    <div id='para1'> mulai mencoba belajar CSS </div

    color:blue; f >

    im
    </body>
    </html>
    }
    CSS id dan Class

    CSS class

    • Selector class digunakan untuk menentukan gaya untuk sek


    t e
    elompok elemen. Berbeda dengan pemilih id, kelas pemilih y

    f No
    ang paling sering digunakan pada beberapa elemen . Denga
    n ini memungkinkan anda untuk menentukan gaya dan elem
    im
    en HTML dengan class yang sama .

    • Selector Class menggunakan atribut class HTML, dan didefin


    isikan dengan “.”
    CSS class

    • Contoh
    .center {text-align:center;}
    .latar-hitam{ background-color:#000; }
    t e
    No
    .text-merah{ color:red; }
    .padding16{ padding:16px; } f
    im
    kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang di
    pengaruhi oleh kelas.
    • Pada contoh di bawah, elemen p semua dengan class = “center”a
    kan di buat rata tengah :
    – p.center {text-align:center;}
    Properti Background-color

    • Properti Background-color menetapkan warna


    latar belakang dari suatu elemen.
    • Warna latar berlakang inite didefinisikan dalam pe
    milih body .
    N o
    f
    im
    • contoh : body {background-color : #b0c4de ;}
    • Dengan CSS, warna paling sering ditentukan ad
    alah :
    • * nilai HEX – seperti “# FF0000″
    * sebuah nilai RGB – seperti “rgb (255,0,0)”
    * nama warna – seperti “merah”
    Properti Background-image

    • Properti Background-image menentuk


    an warna gambar untuk digunakan seba
    gai latar belakang suatu
    ot e elemen.
    f
    Secara default, gambarN diulang sehingg
    im elemen.
    a mencakup seluruh
    Gambar latar belakang untuk halaman b
    isa di set seperti ini:
    • contoh : body {background-image:url(‘*.
    gif’) ;}
    •
    Properti Background-repeat

    • Properti Background-repeat ini digunakan untuk mengul


    angi gambar, baik secara vertikal atau horizontal .
    • Properti :
    t e
    No
    • repeat
    • f
    repeat-x (pengulangan horizontal)
    •
    •
    im
    repeat-y (pengulangan vertikal)
    no-repeat (tanpa pengulangan)
    • contoh :
    • body
    {
    background-image:url(‘*.png’);
    background-repeat:repeat-x;
    }
    Properti Background-position

    • Properti Background-position digunakan


    untuk mengatur posisi awal dari backgroun
    d image
    t e
    No
    • contoh :
    • body f
    { im
    background-image:url(‘*.png’);
    background-repeat:no-repeat;
    background-position:right top;
    }
    t e
    oyou
    Thank N
    f
    im

    Anda mungkin juga menyukai