1 Mendesain halaman Web dengan CSS2 ABOUT CSS Styles sheets define How HTML elements are to be displayed, just like the font tag and the color attribu...
ABOUT CSS Styles sheets define How HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in your we, just by editing one single CSS document
CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once. As a web developer you can define a style for each HTML element and apply it to as many web pages as you want. To make a global change, simple change the style, and all elements in the Web are updated automatically Mamoun Nawahdah
CSS SYNTAX Syntax CSS dibentuk dari tiga bagian: selector, property dan value selector {property: value}
selector : tag/element HTML yang ingin didefinisikan. property : atribut yang ingin diubah dan case sensitive. value : nilai dari atribut. Property dan value biasanya dipisahkan oleh titik dua dan diapit oleh kurung kurawal. Contoh: body {color: black}
Jika value terdiri dari dua kata atau lebih, gunakan tanda petik dua (“) p { font-family : “Times New Roman”} Jika Anda ingin menentukan lebih dari satu property, Anda harus memisahkan tiap-tiap property dengan titik koma. p { text-align: center; color : red} Penulisan di atas dapat juga ditulis dalam bentuk yang mudah dibaca seperti berikut. p { font-family: calibri; text-align: center; color : red }
Grouping Anda dapat mengelompokkan beberapa selector dengan property dan value yang sama. Tiap-tiap selector dipisahkan oleh koma. h1, h2, h3, h4 { color: green } The class selector Dengan class selector, anda dapat mendefinisikan style yang berbeda untuk tipe yang sama dari elemen HTML. Anggap Anda ingin mempunyai dua tipe paragraf dalam halaman web Anda: paragraf rata-kanan dan paragraf ratatengah, berikut contoh mendefinisikannya.
p.kanan {text-align: right} p.tengah {text-align: center} Dalam dokumen HTML Anda menuliskan sebagai berikut:
Paragraf ini menggunakan rata kanan
Paragraf ini menggunakan rata tengah
id selector Anda dapat mendefinisikan style untuk elemen HTML dengan id selector. Id selector didefinisikan dengan menggunakan tanda #. Contoh: #merah {color: red}
Memberikan Komentar Komentar digunakan untuk memberi keterangan/penjelasan dari kode yang Anda buat. Komentar ini membantu Anda dalam mengedit kode yang Anda buat. Untuk membuat komentar dimulai dengan tanda “/*” dan diakhiri dengan tanda “*/” Contoh: /* mengatur tag p pada HTML */ P { text-align: center; /* mengatur warna */ color: red; font-family: arial }
Aturan Penulisan CSS Ada tiga jenis penulisan CSS, yaitu: 1. External Style Sheet CSS ditulis diluar file HTML. File yang terbuat disimpan dalam format .css contoh:
2. Internal Style Sheet Ditulis didalam file HTML. Internal style sheet seharusnya digunakan dalam dokumen tunggal yang mempunyai style yang unik. Didefinisikan diantara tag
Contoh: <style type=“text/css”> hr {color: red} p {margin-left: 20px} body {background-image: url(images/gambar.gif”)} 3. Inline Styles Kode CSS ditulis langsung dalam tag HTML. Contoh:
Latihan Desain Web Dengan CSS. Paragraf ini merupakan paragraf biasa. Perhatikan bahwa warna tulisan adalah putih. Secara default untuk halaman web ini warnanya diatur sesuai dengan selector body pada file efek.css
Paragraf ini adalah paragraf dengan class "versi2" yang diatur oleh file efek.css.
EKSTERNAL STYLE SHEET
Latihan2.html (Internal Style Sheet) <TITLE>Mendesain Web dengan CSS <STYLE type="text/css"> body { color: white; background: green; font-family : arial; }
BROWSER
Browser adalah aplikasi untuk mengakses halaman web.
Halaman ini didesain dengan menggunakan CSS.
Latihan3.html (Inline Style Sheet) <TITLE>Desain Web
BROWSER
Tulisan ini menggunakan CSS dengan gaya penulisan inline style sheet
paragraf ini menggunakan property yang didefinisikan di dalam tag body.
MEMBUAT BACKGROUND PADA CSS 1. BACKGROUND WARNA LATIHAN4.HTML <TITLE>Menggunakan Background Warna <STYLE type="text/css"> body {background-color : #99CCFF} h2 {background : green} h3 {background-color : transparent} p {background : rgb(240,248,255)}
Header 2, Background Hijau
Header 3, Bakground Transparan
Background pada paragraph
MEMBUAT BACKGROUND PADA CSS 2. Background gambar Properties background-image
Value url
Keterangan Alamat gambar yang dituju
background-repeat
repeat repeat-x repeat-y no-repeat
Diulang dalam halaman Diulang sumbu x Diulang sumbu y Tampil 1 gambar
Background-position
top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos
Atas kiri halaman Atas tengah halaman Atas kanan halaman tengah kiri halaman Pusat halaman tengah kanan halaman bawah kiri halaman bawah tengah halaman bawah kanan halaman Pakai nilai %
MEMBUAT BACKGROUND IMAGE PADA CSS Latihan5.html <TITLE>Menggunakan Background Gambar <STYLE type ="text/css"> BODY { background-image: url(“bg.jpg"); background-repeat: repeat-x; } Background Berulang pada Sumbu X
MEMBUAT BACKGROUND IMAGE PADA CSS Latihan6.html <TITLE>Menggunakan Background Gambar <STYLE type = "text/css"> BODY {background-image:url (“logo.jpg"); background-repeat: no-repeat; background-position: center center; } Background di Pusat Halaman
Margin Properties Property
Description
CSS
margin
Sets all the margin properties in one declaration
1
margin-bottom
Sets the bottom margin of an element
1
margin-left
Sets the left margin of an element
1
margin-right
Sets the right margin of an element
1
margin-top
Sets the top margin of an element
1
Padding Properties Property
Description
CSS
padding
Sets all the padding properties in one declaration
PENGATURAN HALAMAN MENGGUNAKAN PADDING Latihan8.html <TITLE>Pengaturan Margin <STYLE type="text/css"> BODY { padding-top : 10%; padding-right : 20%; padding-bottom : 40%; padding-left: 20%; } Text ini berada di tengah halaman , karena di lakukan pengaturan halaman dengan menggunakan padding atas 10%, kanan 20%,bawah 40%,dan kiri 20%.
FORMAT TEKS Properties Value Pengaturan warna color green, dll Pengaturan Spasi (jarak antar karakter) letter-spacing Normal Length Perataan Text text-align Left, right, center, justify text-decoration none underline overline line-through blink Pengaturan text indentasi text-indent length % Pengubahan Bentuk Karakter text-transform Capitalize, uppercase, lowercase, none
Keterangan
Ukuran standar HTML Ukuran panjang (cm,px)
Bentuk standar Bergaris bawah Bergaris atas Text dicoret Text berkedip Dengan cm, px Dengan persentase
Latihan9.html
<TITLE>Format Text <STYLE type ="text/css"> p {color : green; letter-spacing: 0.5cm} h1 {letter-spacing: -2px} h2 {text-align: center} h3 {text-align: left} h4 {text-align: right}
Pengaturan Spasi Pada Paragraph
Header 1
Header 2, Di tengah
Header 3, Di kiri
Header 4, Di kanan
Latihan10.html
<TITLE>Format Text <STYLE type="text/css"> em {text-decoration : overline} h2 {text-decoration: blink} h3 {text-decoration: underline} a {text-decoration: none} <em>Bentuk Overline
TUGAS Buatlah web pribadi anda menggunakan css. Lengkapi dengan tombol fasilitas menu: 1. HOME : Informasi sekilas tentang diri anda. 2. PENDIDIKAN : Pendidikan yang telah anda tempuh, termasuk pelatihan dan training yang pernah diikuti. 3. JADWAL KULIAH : Gunakan pemakaian tabel dengan css seperti diatas. 4. AKTIVITAS : Pengalaman organisasi yang pernah anda ikuti selama kuliah atau di luar. 5. Tambahkan menu atau informasi lain, untuk menambah nilai anda.
Referensi: [1]. Mamoun Nawahdah. CSS Tutorial. W3School.com [2]. Jeffrey Veen. 2001. The Art & Science of Web Design. USA
