Scribd Logo
Unggah

Selamat datang di Scribd!

  • Eksternal CSS

    Diunggah oleh

    Mukti Widodo
    10 tayangan10 halaman

    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

    Hak Cipta:

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

    Eksternal CSS

    Diunggah oleh

    Mukti Widodo

    Hak Cipta:

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

    Eksternal CSS

    Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS
    ditulis di dalam file khusus yang berekstensi .css.

    Contoh:
    Kita akan membuat sebuah file bernama styleku.css yang di dalamnya berisi kode CSS.
    Berikut ini isinya:

    p {
    font-family: serif;
    line-height: 1.75em;
    }

    i {
    font-family: sans;
    color: orange;
    }

    h2 {
    font-family: sans;
    color: #333;
    }

    Untuk menggunakan CSS ini, kita harus menghubungkannya dengan HTML.


    Ada dua cara yang bisa kita lakukan:
    1. Menggunakan tag <link>
    2. Menggunakan @import

    Contoh:
    Cara 1: menggunakan tag <link>
    <link rel="stylesheet" type="text/css" href="styleku.css">
    Cara 2: menggunakan @import
    <style type="text/css">
    @import "style-ku.css";
    </style>

    Jika kita menggunakan Cara 1, maka kode lengkap HTMLnya akan menjadi seperti ini:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Contoh Eksternal CSS</title>
    <link rel="stylesheet" type="text/css" href="styleku.css">
    </head>

    <body>
    <h2>Ini judul artikel</h2>
    <p> Ini adalah paragraf yang memuat isi artikel. Paragraf ini
    hanya untuk percobaan saja.
    Percobaan untuk mendemokan <i>internal css</i>. Seperti
    namanya, <i>inline CSS</i> adalah kode CSS yang ditulis
    langsung dalam file HTML.</p>
    </body>
    </html>

    Contoh External CSS

    Latihan1

    Nama file : index.html


    Nama file : style.css

    Nama file : index1.html

    Nama file: style1.css


    CSS Selectors
    Apa Itu CSS Selectors?
    CSS Selectors adalah cara yang digunakan untuk memilih elemen HTML yang ingin diberi
    style.

    Agar lebih jelas coba perhatikan gambar dibawah ini:

    Ada tiga unsur dalam sintaks CSS, diantaranya :


    a. Selector
    Nama Selector bisa terdiri dari nama Tag, Attribute, ataupun Value dari Class dan ID
    yang ingin diberi Style.
    b. Property
    Property merupakan opsi yang digunakan untuk mengatur bagaimana Element HTML
    akan ditampilkan. Property inilah yang menentukan warna, bentuk, ukuran, margin,
    dsb. Hampir semua Property dapat digunakan diseluruh Selector.
    Contoh Property : Color, Margin, Padding, Width, Height, dsb.
    c. Value
    Value merupakan nilai dari sebuah Property. Ada Property yang menerima nilai dalam
    bentuk angka (pixel) atau prosentase, seperti Width atau Height. Dan ada pula Property
    yang memiliki nilai khusus, misalnya Properti Color yang hanya menerima kode warna
    atau nama warna yang valid.

    Terdapat beberapa jenis selectors, antara lain:


    1. Element Selectors
    2. ID Selectors
    3. Class Selectors
    4. Grouping Selectors
    5. Universal Selectors
    1. Element Selectors
    Element Selectors adalah selector yang digunakan untuk memilih elemen berdasarkan
    nama tag atau nama elemen.
    Contoh penggunaan Element Selector.
    Kita memiliki HTML seperti ini:
    <p>Paragraf pertama</p>
    <p>Paragraf kedua</p>
    Lalu kita ingin memberi style berdasarkan nama tag. Pada CSS, kita tuliskan:

    p {
    color: blue;
    }
    Hasilnya, seluruh tag p akan berwarna biru.

    2. ID Selectors
    ID Selectors adalah selector yang digunakan untuk memilih elemen berdasarkan nama
    id.
    Contoh penggunaan ID Selector.
    Kita memiliki HTML seperti ini:
    <p id="pertama">Paragraf pertama</p>
    <p id="kedua">Paragraf kedua</p>
    Lalu kita ingin memberi style berdasarkan id. Pada CSS, kita tuliskan:

    #pertama {
    color: blue;
    }

    #kedua {
    color: red;
    }

    Hasilnya, paragraf dengan id pertama akan berwarna biru, sedangkan paragraf dengan
    id kedua akan berwarna merah.

    3. Class Selectors
    Class Selectors adalah selector yang digunakan untuk memilih elemen berdasarkan
    nama class.
    Contoh penggunaan class Selector.
    Kita memiliki HTML seperti ini:
    <p class="pertama">Paragraf pertama</p>
    <p class="kedua">Paragraf kedua</p>
    Lalu kita ingin memberi style berdasarkan class. Pada CSS, kita tuliskan:

    .pertama {
    color: blue;
    }

    .kedua {
    color: red;
    }

    Hasilnya, paragraf dengan class pertama akan berwarna biru, sedangkan paragraf
    dengan class kedua akan berwarna merah.

    4. Grouping Selectors
    Grouping Selectors adalah selector yang digunakan untuk memilih beberapa elemen.
    Contoh penggunaan css tanpa grouping selector.
    h1 {
    text-align: center;
    color: red;
    }

    h2 {
    text-align: center;
    color: red;
    }

    p {
    text-align: center;
    color: red;
    }

    Contoh penggunaan css menggunakan grouping selector.


    h1,
    h2,
    p {
    text-align: center;
    color: red;
    }

    Untuk menyingkat penulisan, kita dapat menggunakan grouping selector. Untuk


    menggunakan grouping selector, cukup menambahkan tanda , untuk pemisah selector.

    5. Universal Selectors
    Universal Selectors adalah selector yang digunakan untuk memilih semua elemen
    sekaligus.
    Contoh penggunaan css universal selector.
    * {
    margin: 0;
    padding: 0;
    }
    Hasilnya, seluruh elemen akan memiliki style margin: 0 dan padding: 0.
    Contoh Selector CSS

    selectorid.html

    Dalam contoh ini semua elemen HTML dengan class=”center” akan berwarna merah dan
    rata tengah:
    selectorclass.html

    Selain itu juga dapat memilih kombinasi nama elemen (nama tag) dan atribut class.
    Contoh
    Dalam contoh ini hanya elemen <p> dengan class=”center” akan berwarna merah dan rata
    tengah:
    selectorclass1.html

    Elemen HTML juga bisa mempunyai lebih dari satu class.


    Contoh
    Dalam contoh ini, elemen <p> ketiga mempunyai dua class (center dan large) dan akan
    memakai style untuk selector p.center dan p.large:

    selectorclass2.html
    selectoruniversal.html

    selectorgrup.html

    Anda mungkin juga menyukai