makalah css

28
CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH CASCADING STYLE SHEET CSS ABDUL MALIK KHALILULLAH X RPL MALIEQZ malieqz

Upload: fahrurrozi-pru-syariah

Post on 02-Oct-2015

646 views

Category:

Documents


58 download

DESCRIPTION

Pemograman Web I

TRANSCRIPT

  • CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    CASCADING STYLE

    SHEET CSS

    ABDUL MALIK

    KHALILULLAH X RPL MALIEQZ malieqz

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    1

    Sejarah Singkat CSS

    Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan

    CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web.

    Tujuannya adalah mengurangi pembuatan TAG-TAG baru oleh Netscape dan Internet

    Explorer (IE), karena pada masa itu kedua browser saling bersaing mengembangkan

    TAG sendiri untuk mengatur tampilan web.

    CSS level 1 mendukung pengaturan tampilan dalam hal:

    1. Font (jenis, ketebalan),

    2. Warna teks, latar belakang, dan elemen lainnya,

    3. Text attributes, misalnya spasi antar baris, kata, dan huruf,

    4. Posisi text, gambar, tabel, dan elemen lainnya,

    5. Marjin, border, dan padding,

    Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan

    standard CSS2 (CSS level 2) yang menjadi standard hingga saat ini. Pada CSS level

    2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada

    International accesibility and capability khususnya media-specific CSS.

    Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3

    dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS3 ini

    sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa

    topik atau modul.

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    2

    Pengertian & Manfaat CSS

    Menurut Wikipedia, Cascading Style Sheets (CSS) adalah:

    bahasa pemrograman untuk mengatur tampilan suatu website atau blog

    Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak

    antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta

    masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan

    Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun

    penggunaan CSS merupakan kelebihan tersendiri.

    Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena

    merupakan script yang telah embedded dengan HTML. Anda cukup menggunakan

    aplikasi notepad untuk menciptakan script CSS sendiri.

    Manfaat dari CSS:

    1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,

    2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,

    3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,

    4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia

    XHTML,

    5. Digunakan dalam hampir semua web browser.

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    3

    Kumpulan Tag CSS

    One of the best ways to learn CSS is to jump right in and start to get into the page layouts.

    ~ www.css-mastery.com ~

    Pada bab kedua ini, Anda dapat menemukan kumpulan lengkap tag CSS beserta

    contoh-contoh penggunaannya pada beberapa bagian. Bila Anda serius ingin

    menekuni CSS, sangat disarankan agar Anda terus mencoba setiap tag dan

    propertinya; selain membantu Anda mengingat-ingat cara penulisan sintaks, metode

    mencoba akan memperlihatkan kegunaan dari masing-masing tag.

    Anda tidak harus menghapal semua tag bila ingin menjadi seorang ahli. Seorang

    ahli yang sesungguhnya adalah orang yang bisa memanfaatkan tag-tag yang paling

    sederhana sekalipun untuk menambah nilai estetika suatu website secara efisien.

    Tidak jarang kita menemukan situs-situs di internet yang terlalu memaksakan

    penggunaan CSS yang tidak perlu, sehingga malah mempersulit pengunjungnya untuk

    sekedar membaca.

    Berikut ini adalah table-tabel properti dan nilai dari CSS:

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    4

    a. Text

    Property Deskripsi Values

    color Mengeset warna teks color

    direction Mengeset arah teks ltr rtl

    line-height Mengeset jarak antar garis normal number

    length

    %

    letter-spacing Menambah atau mengurangi jarak antar karakter

    normal

    length

    text-align Mengatur teks agar rata kanan, kiri, tengah, atau kanan-kiri pada

    elemen

    left

    right

    center

    justify

    text-decoration Menambah dekorasi pada teks none underline

    overline

    line-through

    blink

    text-indent Mengindentasikan baris pertama teks pada elemen

    length

    %

    text-shadow none color

    length

    text-transform Mengontrol huruf pada elemen none capitalize

    uppercase

    lowercase

    unicode-bidi normal embed

    bidi-override

    white-space Mengeset bagaimana ruang putih di dalam elemen ditangani

    normal

    pre

    nowrap

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    5

    word-spacing Menambah atau mengurangi jarak antar kata

    normal

    length

    Contoh penggunaan tag dan property text:

    p.satu {color: #FF0000; letter-spacing:length;}

    p.dua {color: #000080; text-decoration:underline;}

    p.tiga {text-align:justify; direction:rtl;}

    Everything that humans can imagine

    is a possibility in reality

    Willy Karen - psychologist

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    6

    b. Pseudo-elements

    Pseudo-element Kegunaan

    :first-letter Menambahkan style spesial pada huruf pertama sebuah teks

    :first-line Menambah spesial style pada baris pertama sebuah teks

    :before Menyisipkan suatu konten sebelum elemen

    :after Menyisipkan suatu konten setelah elemen

    Contoh penggunaan tag dan property pseudo-elements:

    p {font-size: 12pt}

    p:first-letter {font-size: 200%; float: left}

    Tulisan pertama dalam suatu paragraph.

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    7

    c. Font

    Property Deskripsi Values

    font Mengeset semua properti untuk font(huruf) dalam satu deklarasi

    font-style

    font-variant

    font-weight

    font-size/line-height

    font-family

    caption

    icon

    menu

    message-box

    small-caption

    status-bar

    font-family Prioritas list untuk font family dan/atau generic pada suatu elemen

    family-name

    generic-family

    font-size Mengset ukuran dari font xx-small x-small

    small

    medium

    large

    x-large

    xx-large

    smaller

    larger

    length

    %

    font-size-adjust Menspesifikasi aspek nilai untuk sebuah elemen yang akan

    mempertahankan tinggi-x dari font

    pilihan pertama

    none

    number

    font-stretch Memadatakan atau melonggarkan font-family yang digunakan

    normal

    wider

    narrower

    ultra-condensed

    extra-condensed

    condensed

    semi-condensed

    semi-expanded

    expanded

    extra-expanded

    ultra-expanded

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    8

    font-style Mengeset style dari font normal italic

    oblique

    font-variant Menampilkan teks dalam small-caps font atau normal font

    normal

    small-caps

    font-weight Mengeset ketebalan huruf normal bold

    bolder

    lighter

    100

    200

    300

    400

    500

    600

    700

    800

    900

    Contoh penggunaan tag dan property font:

    p.italic {font-style: italic; font-family:"courier";

    font-size:16;}

    p.oblique {font-style: oblique}

    Menguak Rahasia CSS

    Kumpulan Tag

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    9

    d. Background

    Property Deskripsi Values

    background Mengeset semua properti background dalam satu deklarasi

    background-color

    background-image

    background-repeat background-

    attachment background-

    position

    background-attachment Mengeset kondisi posisi background; antara dapat discroll atau tidak

    dapat digerakkan dalam halaman

    scroll

    fixed

    background-color Mengeset warna latar background suatu elemen

    color-rgb

    color-hex

    color-name

    transparent

    background-image Mengeset sebuah gambar menjadi sebuah background

    url(URL)

    none

    background-position Mengeset posisi background top left top center

    top right

    center left

    center center

    center right

    bottom left

    bottom center

    bottom right

    x% y%

    xpos ypos

    background-repeat Mengeset apakah/bagaimana background akan diulang

    repeat

    repeat-x

    repeat-y

    no-repeat

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    10

    Contoh penggunaan tag dan property background:

    body { background-color: black; }

    p { background-color: gray; }

    h2 { background-color: red; }

    ul { background-image: url(pics/cssT/smallPic.jpg);

    background-repeat: repeat-y; color: green; }

    CSS Backgrounds

    This page has a black background. If you make a black

    background be sure that

    you change the font color from its default black value. On

    the other hand, you could

    just change the backgrounds of the HTML elements, as we have

    done for the paragraph and the header.

    This list has a picture on the left

    Because it was set to repeat-y

    And not to repeat-x

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    11

    e. Table

    Property Deskripsi Values

    border-collapse Mengeset apakah border tabel collapse pada satu border atau

    terpisah sesuai standar HTML

    collapse

    separate

    border-spacing Mengeset jarak yang memisahkan border sel (khusus untuk model

    separate-border)

    length length

    caption-side Mengeset posisi dari judul tabel top bottom

    left

    right

    empty-cells Megeset apakah sel kosong ditampilkan pada tabel atau tidak

    (khusus untuk model separate-

    border)

    show

    hide

    table-layout Mengeset algoritma yang digunakan untuk menampilkan sel

    tabel, baris, dan kolom

    auto

    fixed

    Contoh penggunaan tag dan property table:

    table

    {border-collapse: separate;

    empty-cells: show}

    Q1

    Q2

    Q3

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    12

    f. Padding

    Property Deskripsi Values

    padding Mengeset semua properti untuk padding (bloknot)

    dalam satu deklarasi

    padding-top

    padding-right

    padding-bottom

    padding-left

    padding-bottom Mengeset pad bagian bawah dari elemen

    length

    %

    padding-left Mengeset pad bagian kiri dari elemen

    length

    %

    padding-right Mengeset pad bagian kanan dari elemen

    length

    %

    padding-top Mengeset pad bagian atas dari elemen

    length

    %

    Contoh penggunaan tag dan properti padding:

    p { padding-left: 45px; border: 1px solid black; }

    h2 { padding-top: 80px; border: 1px solid black; }

    ul { padding: 25px; border: 1px solid black; }

    CSS Padding

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    13

    The header has a top padding of 45px and this paragraph has

    a padding-left of 80px. This gives

    a nice indendation to the paragraph.

    This list has a uniform

    25 pixel margin

    Padding is useful for creating necessary white

    space.

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    14

    g. List & Marker

    Property Deskripsi Values

    list-style Mengeset semua properti untuk sebuah list dalam satu deklarasi

    list-style-type

    list-style-position

    list-style-image

    list-style-image Mengeset gambar sebagai list-item marker

    none

    url

    list-style-position Mengeset dimana list-item marker ditempatkan pada list

    inside

    outside

    list-style-type Mengeset tipe dari list-item marker none disc

    circle

    square

    decimal

    decimal-leading-zero

    lower-roman

    upper-roman

    lower-alpha

    upper-alpha

    lower-greek

    lower-latin

    upper-latin

    hebrew

    armenian

    georgian

    cjk-ideographic

    hiragana

    katakana

    hiragana-iroha

    katakana-iroha

    marker-offset auto length

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    15

    Contoh penggunaan tag dan properti list:

    ul { list-style-image: disc; }

    ol { list-style-type: upper-roman; }

    CSS Lists

    This list has a picture

    in the place of bullets

    The spacing doesn't look very good.

    This list is

    in Upper Roman

    These are good for outlines

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    16

    h. Border

    Property Deskripsi Values

    border Mengeset semua properti untuk 4-border (yang tertutup) dalam satu

    deklarasi

    border-width

    border-style

    border-color

    border-bottom Mengeset semua properti untuk bottom-border (yang bawah aja)

    dalam satu deklarasi

    border-bottom-width

    border-style

    border-color

    border-bottom-color Mengeset warna dari bottom-border

    border-color

    border-bottom-style Mengeset style dari bottom border border-style

    border-bottom-width Mengeset ketebalan dari garis bottom-border

    thin

    medium

    thick

    length

    border-color Mengeset warna dari keseluruhan border

    Color

    border-left Mengeset semua properti untuk left-border (yang kiri aja) dalam

    satu deklarasi

    border-left-width

    border-style

    border-color

    border-left-color Mengeset warna dari left-border border-color

    border-left-style Mengeset style dari left-border border-style

    border-left-width Mengeset ketebalan dari garis left-border

    thin

    medium

    thick

    length

    border-right Mengeset semua properti untuk right-border (yang kanan aja)

    dalam satu deklarasi

    border-right-width

    border-style

    border-color

    border-right-color Mengeset warna dari right-border border-color

    border-right-style Mengeset style dari right-border border-style

    border-right-width Mengeset ketebalan dari garis right-border

    thin

    medium

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    17

    thick

    length

    border-style Mengeset style dari keseluruhan border

    none

    hidden

    dotted

    dashed

    solid

    double

    groove

    ridge

    inset

    outset

    border-top Mengeset semua properti untuk top-border (yang atas aja) dalam

    satu deklarasi

    border-top-width

    border-style

    border-color

    border-top-color Mengeset warna dari top-border border-color

    border-top-style Mengeset style dari top-border border-style

    border-top-width Mengeset ketebalan dari garis top-border

    thin

    medium

    thick

    length

    border-width Mengeset ketebalan dari keseluruhan border; terdapat

    empat jenis ketebalan

    thin

    medium

    thick

    length

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    18

    Contoh penggunaan tag dan property border:

    p.pertama {border-style: dashed;border-color: #0000ff}

    p.kedua {border-style: solid;border-color: #ff0000 #0000ff}

    p.ketiga

    {

    border-style: dotted;

    border-color: #ff0000 #00ff00 #0000ff

    }

    p.keempat

    {

    border-style: solid;

    border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255)

    }

    Border dengan satu macam warna

    Border dengan dua macam warna

    Border dengan tiga macam warna

    Border dengan empat macam warna

    catatan: "Perhatikan warna border-nya"

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    19

    i. Positioning

    Property Deskripsi Values

    Bottom mengeset sejauh mana pojok bawah elemen di atas atau di

    bawah dari pojok bawah parent

    element

    auto

    %

    length

    clip Mengeset bentuk dari elemen. Elemen diclip menjadi bentuk ini,

    dan ditampilkan

    shape

    auto

    left Mengeset sejauh mana pojok kiri dari elemen di kiri/kanan tepi kiri

    parent element

    auto

    %

    length

    overflow Mengeset apa yang terjadi jika konten dari elemen melebihi area

    elemen

    visible

    hidden

    scroll

    auto

    position Menempatkan elemen dengan posisi static, relative, absolute, atau

    fixed

    static

    relative

    absolute

    fixed

    right Mengeset sejauh mana pojok kanan dari elemen di kiri/kanan

    dari pojok kanan parent element

    auto

    %

    length

    top Sets how far the top edge of an element is above/below the top

    edge of the parent element

    auto

    %

    length

    vertical-align Sets the vertical alignment of an element

    baseline

    sub

    super

    top

    text-top

    middle

    bottom

    text-bottom

    length

    %

    z-index Sets the stack order of an element auto number

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    20

    Contoh penggunaan tag dan properti positioning:

    h3 {

    position: absolute;

    top: 200px;

    left: 150px;}

    p {

    position: absolute;

    top: 75px;

    left: 75px;}

    Menguak Rahasia CSS

    ~anonim~

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    21

    j. Classification

    Property Deskripsi Values

    clear Mengeset sisi dari sebuah elemen dimana elemen ngambang lainnya

    tidak diperbolehkan

    left

    right

    both

    none

    cursor Menspesifikasi kursor yang ditampilkan

    url

    auto

    crosshair

    default

    pointer

    move

    e-resize

    ne-resize

    nw-resize

    n-resize

    se-resize

    sw-resize

    s-resize

    w-resize

    text

    wait

    help

    display Mengeset apakah/bagaimana suatu elemen ditampilkan

    none

    inline

    block

    list-item

    run-in

    compact

    marker

    table

    inline-table

    table-row-group

    table-header-group

    table-footer-group

    table-row

    table-column-group

    table-column

    table-cell

    table-caption

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    22

    float Mengeset dimana sebuah gambar atau teks dimunculkan pada elemen

    lain

    left

    right

    none

    position Mengeset penempatan elemen sebagai posisi yang static, relative,

    absolute atau fixed

    static

    relative

    absolute

    fixed

    visibility Mengeset apakah suatu elemen ditampilkan atau tidak

    visible

    hidden

    collapse

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    23

    k. Pseudo-classes

    Pseudo-class Kegunaan

    :active Menambahkan spesial style kepada elemen yang aktif

    :focus Menambahkan spesial style kepada elemen selama elemen sedang focus

    :hover Menambahkan spesial style kepada elemen saat cursor berada di atas elemen tersebut

    :link Menambahkan spesial elemen kepada link yang belum kena hit

    :visited Menambahkan spesial style kepada link yang telah dihit

    :first-child Menambah spesial style pada elemen yang merupakan child pertama dari gabungan beberapa elemen lainnya

    :lang Membolehkan pemilik(author) untuk menentukan bahasa yang digunakan pada elemen tertentu

    Contoh penggunaan tag dan properti pseudo-classes:

    a:link{ text-decoration: none;

    color: gray;

    }

    a:visited{ text-decoration: none;

    color: gray;

    }

    a:hover{ text-decoration: none;

    color: green;

    font-weight: bolder;

    letter-spacing: 2px;

    }

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    24

    CSS Pseudo Classes or Links

    Arahkan kursor Anda ke sini !

    catatan: Warna ke sini akan berubah saat Anda mengarahkan kursor ke

    atasnya.

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    25

    l. Dimension

    Property Deskripsi Values

    height Mengeset tinggi dari sebuah elemen auto length

    %

    line-height Mengeset jarak antar garis pada elemen

    normal

    number

    length

    %

    max-height Mengeset tinggi maksimal dari elemen

    none

    length

    %

    max-width Mengeset lebar maksimal dari elemen

    none

    length

    %

    min-height Mengeset tinggi minimal dari elemen length %

    min-width Mengeset lebar minimal dari elemen length %

    width Mengeset lebar dari suatu elemen auto %

    length

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    26

    m. Generated Content

    Property Deskripsi Values

    content Membuat konten dalam dokumen. Digunakan bersama pseudo-

    element :before dan :after

    string

    url

    counter(name)

    counter(name, list-style-type)

    counters(name, string)

    counters(name, string, list-

    style-type)

    attr(X)

    open-quote

    close-quote

    no-open-quote

    no-close-quote

    counter-increment Mengeset berapa banyak suatu counter menambahkan pada tiap

    aksi pada selektor

    none

    identifier number

    counter-reset Mengeset nilai yang counter set pada tiap aksi pada selektor

    none

    identifier number

    quotes Mengeset tipe dari quote none string string

  • AB

    DU

    L M

    ALI

    K K

    HA

    LILU

    LLA

    H

    CASCADING STYLE SHEET ABDUL MALIK KHALILULLAH

    27

    n. Outlines

    Property Deskripsi Values

    outline Mengeset semua properti untuk outline dalam satu deklarasi

    outline-color

    outline-style

    outline-width

    outline-color Mengeset warna dari outline elemen

    color

    invert

    outline-style Mengeset style outline dari elemen none dotted

    dashed

    solid

    double

    groove

    ridge

    inset

    outset

    outline-width Mengeset ketebalan outline dari elemen

    thin

    medium

    thick

    length