- Notepad
- Browser seperti firefox atau chrome
- Jalankan notepad
- 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>
- Kemudian kita simpan. Untuk menyimpan harus dengan jenis html,
sehingga kita gunakan fasilitas menu save as yang ada di
notepad.
- Klik menu save as
- Pilih folder tempat menyimpan, misal di desktop
- kemudian ketikkan nama file secara lengkap : latihan1.html
- Kemudian pilih Save as type : all files
- Lalu tekan Save
- Sekarang buka desktop dan cari file yang sudah kita buat tadi, lalu klik 2x
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:
- Eksternal style sheet
- Internal style sheet
- 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:
- Browser default
- Eksternal style sheet
- Internal style sheet (di bagian kepala)
- 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!
Catatan: Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head> HTML, style sheet eksternal akan menimpa style sheet internal!
Tidak ada komentar:
Posting Komentar