Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pemrograman Web S1 Teknik Informatika CSS "Ainul Yaqin, M.Kom"

    Diunggah oleh

    Ainul Yaqin
    2 tayangan13 halaman
    CSS

    Judul Asli

    CSS

    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
    CSS

    Hak Cipta:

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

    Pemrograman Web S1 Teknik Informatika CSS "Ainul Yaqin, M.Kom"

    Diunggah oleh

    Ainul Yaqin
    CSS

    Hak Cipta:

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

    PEMROGRAMAN WEB

    S1 Teknik Informatika
    CSS
    “Ainul Yaqin, M.Kom”

    www.ainulyaqin.com
    Apa Itu CSS

    • CSS singkatan dari Cascading Style Sheets


    • CSS mendefinisikan bagaimana elemen HTML yang akan
    ditampilkan
    • Styles ditambahkan ke HTML 4.0 untuk memecahkan
    masalah
    • CSS menghemat banyak pekerjaan
    • Eksternal Style Sheets disimpan dalam file CSS

    www.company.com
    CSS Memecahkan Masalah Besar

    • HTML tidak pernah dimaksudkan untuk berisi tag untuk


    memformat dokumen. HTML dimaksudkan untuk
    menentukan isi dari dokumen
    • Ketika tag seperti <font>, dan atribut warna ditambahkan ke
    spesifikasi HTML 3.2, mulai mimpi buruk bagi pengembang
    web. Pengembangan situs web yang besar, di mana font
    dan warnaInformasi yang ditambahkan ke setiap halaman,
    menjadi proses yang panjang dan mahal.
    • Untuk mengatasi masalah ini, World Wide Web Consortium
    (W3C) dibuat CSS.
    • Dalam HTML 4.0, semua format bisa (dan harus!) Dihapus
    dari dokumen HTML, dan disimpan dalam file CSS yang
    terpisah.
    www.company.com
    CSS RULE

    • Poin Selektor ke elemen HTML yang anda ingin berikan


    style
    • Blok deklarasi berisi satu atau lebih deklarasi dipisahkan
    oleh titik koma.
    • Setiap deklarasi mencakup nama properti dan nilai, yang
    dipisahkan oleh titik dua.

    www.company.com
    CSS SELECTOR

    • Elemen Selectors, memilih elemen berdasarkan nama


    elemen. Kamu dapat memilih semua <p> elemen pada
    halaman seperti ini: (semua <p> elemen akan pusat-blok,
    dengan teks warna abu-abu)
    • Selectors id, Untuk memilih elemen dengan id tertentu,
    menulis karakter hash, diikuti oleh idelemen. Gaya aturan di
    bawah ini akan diterapkan pada elemen HTML dengan id =
    "para1“
    • Selectors kelas, Selector kelas memilih elemen dengan
    atribut kelas khusus. Memilihelemen dengan kelas tertentu,
    menulis karakter periode, diikuti oleh nama kelas

    www.company.com
    Cara Menggunakan CSS

    • Inline Styles
    • Embedded/Internal Style Sheets
    • External Style Sheets

    www.company.com
    Inline Style

    • Untuk menggunakan gaya inline, menambahkan atribut


    style untuk tag yang relevan. Atribut style dapat berisi setiap
    properti CSS. Contoh ini menunjukkan bagaimana untuk
    mengubah warna dan margin kiri h1 a elemen:

    <h2 style="color: red;">


    Good eats for hungry geeks
    </h2>
    <p style="color: gray;">
    Our fresh pizzas, hearty pasta dishes, and
    succulent desserts are sure to please. And
    don't forget about our daily chalkboard
    specials!
    www.company.com
    </p>
    Contoh Inline Style

    <html >
    <head>
    <title>Web Profile</title>
    </head>
    <body style="font-family:Arial;
    background:#efefef">
    <strong><h1 style="border-bottom:1px
    solid #fff; font-family:Verdana">AINUL
    YAQIN</h1></strong>
    <img src="ainul.png" width="215" height="215" />
    <p><strong>About Me</strong></p>
    <p>Hello, This My Profile</p>
    <p>I'm Researcher, System Analist, Programmer
    and Web Developer. I have interest in AI
    Research.</p>
    </body>
    </html> www.company.com
    Embedded/Internal Style

    • internal Style harus digunakan bila dokumen tunggal


    memiliki gaya yang unik. Anda mendefinisikan gaya internal
    di bagian kepala halaman HTML, dalam <style> tag, seperti
    ini:
    <head>
    <style type="text/css">
    h2 { color: red; }
    p { color: gray; }
    .info {background:#cccccc; border:1px}
    .label {margin:5px; color:#efefef}
    </style>
    </head>
    www.company.com
    Contoh Internal Style

    • Masukkan code berikut di tag <head> . . .</head>

    <style>
    h2 {
    color: green;
    text-decoration:underline;
    }
    blockquote {
    border-left: 5px solid orange;
    padding-left: 10px;
    font-style:italic;
    color:#666
    }
    </style>

    www.company.com
    External Style

    • exsternal Style sangat ideal bila gaya ini diterapkan untuk banyak
    halaman. Dengan gaya eksternal sheet, Anda dapat mengubah
    tampilan seluruh situs dengan mengubah hanya satu file.
    • Setiap halaman harus menyertakan link ke style sheet dengan
    tag <link>. <Link> tag masuk ke dalam bagian kepala:
    <head>
    <link rel="stylesheet“
    type="text/css" href="styles.css" />
    </head>
    body {
    background-color: lightblue;
    }
    h1 {
    color: navy;
    margin-left: 20px;
    www.company.com
    }
    Contoh External Style

    • Membuat file baru dengan


    nama style1.css
    • Masukkan kode berikut
    diantara tag <head> . .
    .</head>
    <link rel="stylesheet" type="text/css"
    href="style1.css" />

    www.company.com
    Style1.css

    @charset "utf-8";
    /* CSS Document */

    h2 {
    color: green;
    text-decoration:underline;
    }
    blockquote {
    border-left: 5px solid orange;
    padding-left: 10px;
    font-style:italic;
    color:#666
    }
    img {
    border-radius:50%;
    border: 5px solid #00f;
    }
    www.company.com

    Anda mungkin juga menyukai