Selasa, 24 September 2013

cara membuat program CSS dan contohnya


Pada toturial kali ini saya akan berbagi tentang cara membuat css sederhana. Yang anda perlukan dalam membuat css ini diantaranya adalah :
  1. Notepad
  2. Browser seperti firefox atau chrome
Langkah-langkahnya yaitu :
  1. Jalankan notepad
  2. Ketikkan text kode html berikut :
    <html>
    <head>
    <title>Membuat css sederhana</title>
    <style type="text/css">
    body {
        background-color:#33CC00;
        color:#0000CC;
    }
    h1 {
        color:#000066;
    }
    p {
        border:1px solid #ccc;
        background-color:#FF0000;
        padding:5px;
    }
    </style>
    </head>
    <body>
    <h1>Selamat datang di Website saya</h1>
    <p>Saya sedang belajar membuat css sederhana</p>
    <p>Ternyata membuat membuat css sederhana itu sangat mudah</p>
    </body>
    </html>
     
  3. Kemudian kita simpan. Untuk menyimpan harus dengan jenis html, sehingga kita gunakan fasilitas menu save as yang ada di notepad.
    1. Klik menu save as
    2. Pilih folder tempat menyimpan, misal di desktop
    3. kemudian ketikkan nama file secara lengkap : latihan1.html
    4. Kemudian pilih Save as type : all files
    5. Lalu tekan Save
  4. Sekarang buka desktop dan cari file yang sudah kita buat tadi, lalu klik 2x
Jika anda lihat contoh script diatas, yang dinamakan css adalah pada group <style type="text/css">.....</style>. Fungsinya adalah mengatur tampilan output yang ada pada bagian <body>...</body>.

Contoh CSS

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}

Ada tiga cara untuk memasukkan sebuah style sheet:
  1. Eksternal style sheet
  2. Internal style sheet
  3. Inline style

Eksternal style sheet

Style sheet eksternal sangat ideal bila gaya yang diterapkan pada banyak halaman. Dengan style sheet eksternal, Anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Style sheet eksternal dapat ditulis dalam editor teks apapun. File seharusnya tidak berisi tag html. Style sheet harus disimpan dengan ekstensi css.. Contoh dari sebuah file style sheet adalah sebagai berikut:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}

Jangan memberi spasi antara nilai properti dan unit (seperti margin-left: 20 px). Benar cara: margin-left: 20px

Internal Style Sheet

Style sheet internal harus digunakan bila dokumen tunggal memiliki gaya yang unik. Anda mendefinisikan gaya internal di bagian kepala halaman HTML, dengan menggunakan tag <style>, seperti ini:

<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Inline Styles

Gaya inline akan kehilangan banyak keuntungan dari style sheet dengan mencampurkan konten dengan presentasi. Gunakan metode ini hemat!

Untuk menggunakan gaya inline Anda menggunakan atribut style pada tag yang relevan. Atribut style dapat berisi properti CSS. Contoh ini menunjukkan cara mengubah warna dan margin kiri paragraf:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Beberapa Style Sheets

Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda, nilai-nilai akan diwariskan dari style sheet lebih spesifik.

Sebagai contoh, sebuah style sheet eksternal memiliki sifat ini untuk pemilih h3:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

Dan style sheet internal memiliki sifat ini untuk pemilih h3:

h3
{
text-align:right;
font-size:20pt;
}

Jika halaman dengan internal style sheet juga link ke style sheet eksternal properti untuk h3 akan menjadi:

color:red;
text-align:right;
font-size:20pt;

Warna diwariskan dari style sheet eksternal dan teks-alignment dan font-size diganti dengan style sheet internal.

Gaya Beberapa Will Cascade ke Satu

Gaya dapat ditentukan:
  • di dalam sebuah elemen HTML
  • di dalam bagian kepala halaman HTML
  • dalam file CSS eksternal

Tip: Bahkan beberapa style sheet eksternal dapat dirujuk di dalam dokumen HTML.

Cascading rangka

Apa gaya akan digunakan ketika ada lebih dari satu gaya yang ditentukan untuk elemen HTML?

Secara umum kita dapat mengatakan bahwa semua gaya akan "cascade" ke dalam lembaran baru "virtual" gaya sesuai aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
  1. Browser default
  2. Eksternal style sheet
  3. Internal style sheet (di bagian kepala)
  4. Inline style (di dalam elemen HTML)
Jadi, gaya inline (di dalam elemen HTML) memiliki prioritas tertinggi, yang berarti bahwa itu akan menimpa gaya didefinisikan di dalam tag <head>, atau dalam style sheet eksternal, atau dalam browser (nilai default).

Catatan: Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head> HTML, style sheet eksternal akan menimpa style sheet internal
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)