Scribd Logo
Unggah

Selamat datang di Scribd!

  • Bahan CSS

    Diunggah oleh

    Rudi Setiawawan
    28 tayangan6 halaman
    CSS digunakan untuk mengatur gaya dan tata letak elemen HTML. CSS memungkinkan pengontrolan format tampilan halaman web dengan fleksibel tanpa mengubah struktur dokumen. Terdapat tiga cara untuk menyisipkan CSS yaitu eksternal, internal, dan inline.

    Deskripsi Asli:

    bahan css

    Judul Asli

    BAHAN CSS

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    CSS digunakan untuk mengatur gaya dan tata letak elemen HTML. CSS memungkinkan pengontrolan format tampilan halaman web dengan fleksibel tanpa mengubah struktur dokumen. Terdapat tiga cara untuk menyisipkan CSS yaitu eksternal, internal, dan inline.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    28 tayangan6 halaman

    Bahan CSS

    Diunggah oleh

    Rudi Setiawawan
    CSS digunakan untuk mengatur gaya dan tata letak elemen HTML. CSS memungkinkan pengontrolan format tampilan halaman web dengan fleksibel tanpa mengubah struktur dokumen. Terdapat tiga cara untuk menyisipkan CSS yaitu eksternal, internal, dan inline.

    Hak Cipta:

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

    PENGENALAN CSS

    CSS adalah bahasa yang menggambarkan gaya dari sebuah dokumen HTML. CSS menjelaskan
    bagaimana elemen HTML harus ditampilkan. CSS singkatan C ascading S tyle S heets. CSS
    menjelaskan bagaimana elemen HTML yang akan ditampilkan pada layar, kertas, atau media
    lain. CSS menghemat banyak pekerjaan . Hal ini dapat mengontrol tata letak halaman web
    beberapa sekaligus.
    Contoh penggunaan CSS untuk membuat layout sebuah website :

    Layout 1 Layout 2

    Layout 3
    Syntax CSS dan Selector
    Sebuah CSS dalam pendeklarasianya terdiri dari sebuah selector dan blok deklarasi

    Selector merupakan elemen dari HTML yang akan diberikan style.


    Blok deklarasi berisi satu atau lebih deklarasi dan dipisahkan oleh titik koma.
    Setiap deklarasi dalam CSS terdiri dari nama properti dan Value (nilai) yang dipisahkan oleh
    titik dua.
    Sebuah deklarasi CSS selalu berakhir dengan titik koma, dan blok deklarasi dikelilingi oleh
    kurung kurawal.

    Pada contoh berikut semua elemen <p> (Paragraf) akan dibuat rata tengah, dengan warna teks
    merah:

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

    Penerapan secara lengkap :

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p{
    color: red;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <p>Hello World!</p>
    <p>These paragraphs are styled with CSS.</p>
    </body>
    Macam-macam Selector CSS

    CSS digunakan untuk "menemukan" atau memilih elemen HTML seperti nama elemen, id,
    kelas, atribut, dan banyak lagi.

    Relemn Se

    Pemilih Elemen memilih elemen berdasarkan nama elemen.

    Anda dapat memilih semua <p> elemen pada halaman seperti ini (dalam hal ini, semua elemen
    <p> akan pusat-blok, dengan warna teks merah):
    p{
    text-align: center;
    color: red;
    }

    Id Selector

    Pemilih id menggunakan atribut id dari elemen HTML untuk memilih elemen tertentu.

    Id dari elemen harus unik dalam suatu halaman, sehingga pemilih id digunakan untuk memilih
    salah satu elemen yang unik!

    Untuk memilih elemen dengan id tertentu, menulis hash (#) karakter, diikuti oleh id dari
    elemen.

    Gaya aturan di bawah ini akan diterapkan pada elemen HTML dengan id = "para1":

    #para1 {
    text-align: center;
    color: red;
    }

    Kelas Selector

    Pemilih kelas memilih elemen dengan atribut kelas khusus.

    Untuk memilih elemen dengan kelas tertentu, menulis titik (.) Karakter, diikuti dengan nama
    kelas.
    Pada contoh di bawah, semua elemen HTML dengan class = "center" akan menjadi merah dan
    pusat-blok:
    .center {
    text-align: center;
    color: red;
    }

    Anda juga dapat menentukan bahwa elemen HTML hanya khusus harus dipengaruhi oleh kelas.

    Pada contoh di bawah, hanya <p> elemen dengan class = "center" akan menjadi center-aligned:
    p.center {
    text-align: center;
    color: red;
    }

    CSS Komentar

    Komentar digunakan untuk menjelaskan kode, dan dapat membantu ketika Anda mengedit
    kode sumber di kemudian hari.

    Komentar diabaikan oleh browser.

    Sebuah komentar CSS dimulai dengan / * dan diakhiri dengan * /. Komentar juga dapat span
    beberapa baris:

    p{
    color: red;
    /* This is a single-line comment */
    text-align: center;
    }

    /* This is
    a multi-line
    comment */iga Cara Sisipkan CSS

    Ada tiga cara memasukkan style sheet:

    style sheet eksternal


    internal style sheet
    gaya inline
    Eksternal Style Sheet

    Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan
    mengubah hanya satu file!

    Setiap halaman harus menyertakan referensi ke file style sheet eksternal dalam <link>
    elemen. <Link> elemen berjalan di dalam <head>:
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>

    Style sheet eksternal dapat ditulis dalam editor teks apapun. File harus tidak mengandung tag
    html. Gaya File sheet harus disimpan dengan ekstensi .css.

    Berikut adalah bagaimana "mystyle.css" terlihat:


    body {
    background-color: lightblue;
    }

    h1 {
    color: navy;
    margin-left: 20px;
    }

    Style Sheet internal

    Style sheet internal dapat digunakan jika satu halaman memiliki gaya yang unik.

    gaya internal didefinisikan dalam <style> elemen, dalam <head> dari halaman HTML:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    background-color: linen;
    }
    h1 {
    color: maroon;
    margin-left: 40px;
    }
    </style>
    </head>
    <body>

    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>

    </body>
    </html>

    Gaya inline

    Gaya inline dapat digunakan untuk menerapkan gaya yang unik untuk elemen tunggal.

    Untuk menggunakan gaya inline, menambahkan atribut style ke elemen yang relevan. Atribut
    style dapat berisi properti CSS.

    Contoh di bawah ini menunjukkan bagaimana mengubah warna dan margin kiri dari <h1>
    elemen:
    <!DOCTYPE html>
    <html>
    <body>

    <h1 style="color:blue;margin-left:30px;">This is a heading</h1>


    <p>This is a paragraph.</p>

    </body>
    </html>

    Anda mungkin juga menyukai