Scribd Logo
Unggah

Selamat datang di Scribd!

  • Tutorial Css and HTML

    Diunggah oleh

    Rangga Satya Tarigan
    9 tayangan3 halaman

    Judul Asli

    Tutorial Css And HTML.docx

    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

    Hak Cipta:

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

    Tutorial Css and HTML

    Diunggah oleh

    Rangga Satya Tarigan

    Hak Cipta:

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

    Cara menggunakan CSS: inline style

    Inline style adalah penerapan kode css pada satu elemen HTML didalam satu halaman HTML,
    dengan cara ini kita bisa langsung memberikan style dengan cara memasukkan kode css pada
    atribut tag HTML. Atribut yang digunakan untuk menyisipkan kode css adalah atribut style, sebagai
    contoh perhatikan contoh skrip HTML dibawah:
    Skrip HTML
    1 <p> Paragraf kesatu nih, ingin berubah warna biru </p>
    2 <p> Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga </p>
    Skrip HTML diatas jika dijalankan akan menampilkan tulisan yang bewarna hitam, jika kita ingin
    merubah warna paragraf ke warna biru, maka kita bisa langsung memberikan atribut style dengan
    nilai color: blue;.
    Skrip HTML
    1 <p style="color: blue;"> Paragraf kesatu nih, ingin berubah warna biru</p>
    2 <p style="color: blue;"> Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga </p>
    Perlu diketahui, bahwa metode inline style tidak efisien jika kita sering merubah dan menggunakan
    kembali kode CSS yang telah kita buat. Dengan metode ini, kita hanya bisa menerapkan style hanya
    pada satu elemen, bayangkan jika kita harus memberi dan merubah satu-satu style semua paragraf
    yang terdapat dalam dokumen HTML.

    Cara menggunakan CSS: embedded style/Internal Styles


    Jika inline style hanya bisa digunakan dalam satu elemen HTML dalam satu halaman HTML, maka
    embedded style bisa digunakan dalam beberapa elemen HTML. Meskipun bisa digunakan dalam
    beberapa elemen HTML, embedded style hanya bisa diterapkan hanya pada satu halaman HTML.

    Metode ini menggunakan tag <style> didalam elemen head, kita membuat baris skrip CSS dalam
    tag <style> dan skrip CSS itu akan langsung merubah semua elemen sesuai yang kita atur.
    Sebagai contoh, kita akan merubah style tulisan semua elemen paragraf dengan warna biru, maka
    skrip HTML akan seperti ini.

    Skrip HTML
    1 <html>
    2 <head>
    3 <title>Cara Menggunakan CSS</title>
    4 <style> p{color:blue;} </style>
    5 </head>
    6 <body>
    7 <p>Paragraf kesatu nih, ingin berubah warna biru</p>
    8 <p>Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga</p>
    9 </body>
    10 </html>
    Dengan metode ini baik paragraf kesatu atau kedua akan langsung berubah menjadi berwarna biru,
    kembali lagi jika kita menggunakan metode inline style maka kita harus merubah satu-satu elemen.

    Cara menggunakan CSS: linked style/External Styles


    Ini adalah metode yang bisa digunakan untuk merubah style pada semua elemen di semua page,
    cara ini mengharuskan kita untuk membuat file CSS. Setelah kita membuat file CSS, maka file
    tersebut kita panggil dalam tag <link>.

    Satu file CSS untuk semua file HTML


    Sebagai contoh, pertama kita buat file dengan nama style.css, ketikkan skrip berikut untuk
    merubah semua tulisan elemen paragraf ke warna biru.
    Skrip CSS
    1 p{color:blue;}
    Setelah itu, ketikkan skrip berikut untuk memanggil file style.css yang telah dibuat.
    Skrip HTML
    1 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    Letakkan skrip diatas dalam tag <head> sehingga skrip akhir menjadi seperti ini.
    Skrip HTML
    1 <html>
    2 <head>
    3 <title>Cara Menggunakan CSS</title>
    4 <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    5 </head>
    6 <body>
    7 <p>Paragraf kesatu nih, ingin berubah warna biru</p>
    8 <p>Paragraf kedua nih, ingin ikut paragraf kesatu yaitu ingin berubah warna biru juga</p>
    9 </body>
    10 </html>
    Ketika skrip diatas dijalankan akan memberikan hasil yang serupa seperti dua metode sebelumnya,
    kelebihan dalam metode ini adalah kemudahan untuk merubah dan menerapkan style pada elemen
    apapun dalam page manapun.
    Cara ini hampir pasti dilakukan oleh para pengembang web. Pada kenyataannya ketiga metode
    diatas sering digunakan berbarengan ketika kita menggunakan tambahan skrip dari luar seperti
    penggunaan plugin atau sejenisnya.

    Untuk melihat demo dari metode embedded style silahkan anda klik tombol “Run Skrip” dibawah ini.

    Anda mungkin juga menyukai