≈ Halaman 66 ≈
BAB XIII CSS CASCADING STYLE SHEET
Pengertian css :
Suatu style sheet merupakan tempat dimana anda mengontrol dan memanage style-style yang ada. Style sheet mendeskripsikan bagaiman tampilan document HTML di layar. Anda juga bisa
menyebutnya sebagai template dari document HTML yang menggunakannya. Anda juga bisa membuat efek-efek sepesial di web anda dengan menggunakan style sheet.
Sebagai contoh anda bisa membuat style sheet yang mendefinisikan style untuk H1 dengan style bold dan italic dan berwarna biru. Atau pada tag P yang akan di tampilkan dengan warna
kuning dan menggunakan font verdana dan masih banyak lagi yang bisa anda lakukan dengan style sheet.
Secara teoritis anda bisa menggunakan style sheet technology dengan HTML. Akan tetapi pada prakteknya hanya Cascading Style Sheet CSS technology yang didukung oleh hampir semua
web Browser. Hal ini dikarenakan CSS telah distandarkan oleh World Wide Web Consortium W3C untuk di gunakan di web browser.
Mengaplikasikan CSS pada Dokumen HTML
Style Sheet dapat digunakan dengan 3 cara, sesuai dengan kebutuhan anda:
• Dengan membuat link ke file CSS dari file HTML.
Metode seperti ini memungkinkan anda mengubah style sejumlah halaman web dengan hanya mengedit satu file CSS. Untuk membuat link ke Style Sheet eksternal, anda dapat dengan mudah
membuat sebuah file berisi definisi style kemudian simpan save dengan ekstensi .CSS, kemudian buat link ke file tersebut dari halaman web. Dengan cara ini, anda dapat memanfaatkan
Style Sheet yang sama untuk beberapa halaman dalam site anda.
Sebagai contoh, bila Style Sheet anda dinamai style-saya.css dan terletak di alamat http:alamat-
internetstyle-saya.css, diantara tag HEAD anda harus menambahkan skrip berikut ini:
HEAD TITLEJudul artikelTITLE
LINK REL=STYLESHEET HREF=http:
alamat-internet style-saya.css
TYPE=textcss HEAD
• Dengan menyisipkan Style Sheet pada file HTML.
Metode seperti ini memungkinkan anda mengubah style suatu halaman web dengan hanya mengedit beberapa baris Style Sheet. Untuk menyisipkan Style Sheet kedalam dokumen HTML,
≈ Halaman 67 ≈ tambahkan blok STYLE STYLE di awal dokumen, di antara tag-tag HTML dan
BODY. Hal ini memungkinkan anda untuk mengubah penampilan satu halaman web. Tag STYLE memiliki satu parameter yaitu TYPE, yang menspesifikasi type media internet sebagai
“textcss” memungkinkan browser yang tidak mendukung type ini untuk mengabaikan Style Sheet. Tag STYLE diikuti oleh sejumlah definisi style dan berakhir dengan tag STYLE.
Contoh :
HTML STYLE TYPE=textcss
-- BODY {font: 10pt Arial}
H1 {font: 15pt17pt Arial; font-weight: bold;
color: maroon} H2 {font: 13pt15pt Arial;
font-weight: bold; color: blue}
P {font: 10pt12pt Arial; color: black}
-- STYLE
BODY ...
BODY HTML
• Dengan menyisipkan secara inline pada tag dalam file HTML.
Hal ini memberi cara tercepat untuk mengubah suatu tag, sejumlah tag, atau satu blok informasi pada halaman web.
Bila anda menginginkan pemformatan pada sebagian kecil saja dari web anda, anda dapat menggunakan inline style.
Definisi style pada inline style hanya berpengaruh pada tag dimana inline style tersebut berada. Contoh inline style pada tag p berikut:
P STYLE=margin-left: 0.5in; margin-right: 0.5in Baris ini akan terlihat rata di bagian kanan dan kiri.
P Baris ini tidak mempunyai indentasi.
Sintax Dasar CSS
Style sheets terdiri dari dua bagian: 1. Selector
Bagian pertama sebelum tanda “{}” disebut selector
≈ Halaman 68 ≈ 2. Declaration
Terdiri dari property dan nilainya. Syntax :
Selector { property1: value; property2:value, . . .}
Contoh :
H1{ color:green; background-color:orange}
≈ Halaman 69 ≈
BAB XIV MENGUPLOAD WEB
Kategori