Scribd Logo
Unggah

Selamat datang di Scribd!

  • Teori CSS

    Diunggah oleh

    SMK
    21 tayangan2 halaman
    MATERI CSS DASAR

    Judul Asli

    TEORI CSS

    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
    MATERI CSS DASAR

    Hak Cipta:

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

    Teori CSS

    Diunggah oleh

    SMK
    MATERI CSS DASAR

    Hak Cipta:

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

    CSS

    CASCADING STYLE SHEET

    defenisi : mekanisme sederhana yang menghatur gaya/stile pada halaman web

    - aturan yang digunakan untuk menampilkan elemen/tag HTML


    - dibuat terpisah dengan HTML
    - bertujuan untuk memisahkan konten dan style
    - 1 CSS dapat digunakan untuk banyak halaman HTML
    - 1 halaman HTML dapat terlihat berbeda jika menggunakan CSS yang berbeda

    anatomy CSS
    selector {property: value;} contoh : h1 {color:blue;}

    selector :
    - digunakan untuk memilih dan memanipulasi elemen spesifik pada HTML
    - elemen HTML dipilih berdasarkan tag, id, class bahkan pola/pattern.
    - semakin kompleks struktur HTML, selector juga bisa semakin kompleks/spesifik

    arti : h1 {color:blue;}
    CSS, pilih seluruh elemen h1, lalu ubah teks didalamnya menjadi berwarna biru

    property & value


    https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

    http://css-tricks.com/almanac

    MENEMPATKAN CSS
    -embed
    <style></style>

    -inline
    <p style="color: lightblue;"> ...</p>

    -external
    <link rel="stylesheet" href="style.css">

    contoh :
    embed
    <html>
    <head>
    <title>contoh CSS menggunakan EMBED</title>
    <style>
    h1 {
    color: lightblue;
    font-family: arial;
    }
    </style>
    </head>
    <body>
    <h1>hello world</h1>
    <p> And the web just isn't the same without you. Let's get you back online!
    Checking your network cables, modem, and routers Reconnecting to your wireless
    network Running Windows Network Diagnostics
    </p>
    </body>
    </html>

    contoh inline :
    <html>
    <head>
    <title>contoh CSS menggunakan INLINE</title>
    </head>
    <body>
    <h1 style="color: lightblue; font-familiy: arial;">hello world</h1>
    <p> And the web just isn't the same without you. Let's get you back online!
    Checking your network cables, modem, and routers Reconnecting to your wireless
    network Running Windows Network Diagnostics
    </p>
    </body>
    </html>

    contoh external :

    <html>
    <head>
    <title>contoh CSS menggunakan EKSTERNAL</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <h1>hello world</h1>
    <p> And the web just isn't the same without you. Let's get you back online!
    Checking your network cables, modem, and routers Reconnecting to your wireless
    network Running Windows Network Diagnostics
    </p>
    </body>
    </html>

    Anda mungkin juga menyukai