BAB 6 CSS 6.1. CSS SYNTAX. Syntax CSS memiliki dua bagian utama yaitu, selector dan deklasi

BAB 6 CSS

6.1. CSS SYNTAX

Syntax CSS memiliki dua bagian utama yaitu, selector dan deklasi. 

Selector berupa tag HTML dan pendeklarasian Class dan Id. Selector berfungsi untuk menentukan bagian mana pada HTML yang akan diterapkan style.



Deklarasi berupa parameter yang memiliki property dan value yang telah tersedia dalam CSS sendiri. Deklarasi berfungsi untuk memberikan style kepada selector sesuai dengan parameter dan nilai (value) yang telah disediakan.

Contoh :

Setiap deklarasi CSS diakhiri dengan tanda titik koma (;)

Untuk membuat deklarasi CSS mudah di baca, anda bisa menempatkan satu deklarasi satu baris

Komentar pada CSS : Diawali dengan /* dan diakhiri dengan */. Contoh :

Modul Pratikum Matakuliah Dasar-dasar Web

VI- 1

Contoh Penggunaan Syntax CSS Penggunaan Syntax CSS <style type="text/css"> p { color: #ff0000; font-size:12px; }
Tulisan ini berwarna merah dan berukuran 12 pixel

6.2. CSS ID & CLASS

Id adalah selector yang diawali dengan tanda # dan dilanjuti dengan nama ID.

Menerapkan Selector ID pada HTML dengan cara menempatkan nama selector di atas pada atribut id di HTML

Class adalah selector yang diawali dengan tanda titik (.) dan diikuti dengan nama Class

Menerapkan Selector Class pada HTML dengan cara menempatkan nama selector di atas pada atribut class di HTML.


VI- 2

Contoh Penggunaan ID dan CLASS Penggunaan ID dan CLASS <style type="text/css"> #para1 { color:blue; font-size:12px; } .text { color:red; font-size:12px; }
Teks pada bagian ini berwarna biru sesuai dengan property pada selector id para1

Teks pada bagian ini berwarna merah sesuai dengan property pada selector class text

6.3. STYLING BACKGROUNDS

CSS Background adalah property yang digunakan untuk mengatur background pada suatu selector. CSS property yang digunakan untuk mengatur background :

Background color. Property background-color digunakan untuk menentukan warna latar pada selector.

body { background-color:#0099FF; }

Background image. Property background-image digunakan untuk menjadikan gambar (image) sebagai background

body { background-image:url('nama_image'); }

Background Repeat. Property background-repeat digunakan untuk melakukan perulangan menampilkan gambar latar. Sebenarnya secara default gambar latar yang kita masukkan akan melakukan perulangan secara horizontal dan vertical. Jika kita hanya ingin melakukan perulangan secara horizontal atau vertical saja kita cukup menambahkan property background-repeat lalu isikan valuenya dengan repeat-x.


VI- 3

body { background-image:url('nama_image'); background-repeat:repeat-x; }

Background

Attacthment.

Property

background-attachment

digunakan

untuk

menentukan

apakah

background yang telah kita lampirkan bersifat fixed (background tidak akan ikut bersama object lain pada scroll) atau scroll (background akan ikut bersama object lain pada saat scroll)

body { background-image:url('nama_image'); background-repeat:no-repeat; background-attachment:fixed; }

Background Position. Property background-position digunakan untuk menentukan posisi background pada bidang / ruang lingkup selector yang dituju

body { background-image:url('nama_image'); background-repeat:no-repeat; background-position:right top; }

Contoh Penggunaan Styling Background Penggunaan Styling Background <style type="text/css"> body { background-color:#000000; } #menu { background-image:url('bg_menu.png'); background-repeat:repeat-x; height:50px; width:auto; background-attachment:fixed; }

File image dan file pendukung lainnya bisa download di http://www.codwebsystem.com/file_pendukung.rar. Tempatkan file di atas ini satu folder bersama image-nya.


VI- 4

6.4. STYLING TEXT

Text Color. Property color digunakan untuk memberikan warna pada text. Jenis penentuan warna pada CSS ada 3 tipe : 

name : nama warna seperti “blue”,”red”,”black”



RGB : nilai kombinasi dari 3 warna utama , seperti “rgb(255,255,0)”



Hex : nilai hexadecimal , seperi “#fff000”

h3 { color:red; } h4 { color:rgb(255,255,0); } h5 { color:#fff000; }

Text Alignment. Property text-align digunakan untuk melakukan perataan text, baik itu left, center, right dan justify.

h1 { text-align:center; } h2 {text-align:left; } h3 {text-align:justify; }

Text Decoration. Property text-decoration digunakan untuk menambahkan atau menghilangkan dekorasi (hiasan,efek) pada teks. text-decoration sering kali digunakan untuk menghilangkan dan menampilkan underline pada link

a { text-decoration:none; }

Penggunaan lainnya adalah

h1 { text-decoration:underline;} h2 { text-decoration:blink; } h3 { text-decoratin:line-through; }

Text Transformation. Properti text-transform digunakan untuk menampilkan text dalam bentuk huruf besar atau huruf kecil

h1 { text-transform:uppercase; } h2 { text-transform:lowercase; } h3 { text-transform:capitalize; }


VI- 5

Text Indentation. Properti text-indent digunakan untuk menampilkan teks yang pertama pada sebuah paragraph masuk ke dalam.

p { text-indent:30px; }

Contoh Penggunaan Styling Text Penggunaan Styling Text <style type="text/css"> h1 { color:red; text-align:center; text-transform:uppercase; } a { text-decoration:none; } p { text-indent:30px; text-align:justify; }
teks ini huruf capital semua
link ini tidak ada underline
Kalimat ini akan masuk ke dalam. Paragraph ini rata kiri dan kanan. Belajar css belajar css belajar css. Belajar css belajar css belajar css. Belajar css belajar css belajar css. Belajar css belajar css belajar css. Belajar css belajar css belajar css. Belajar css belajar css belajar css. Belajar css

6.5. STYLING FONTS

Font Family. Property font-family digunakan untuk mengelompokkan beberapa jenis teks. Jika jenis teks pertama tidak bisa ditampilkan oleh browser, maka akan ditampilkan jenis teks yang kedua, jika jenis teks yang kedua tidak bisa ditampilkan, maka akan ditampilkan teks yang ketiga, dan seterusnya.

p{font-family:"Times New Roman", Times, serif;}

Font Style. Property font-style sering digunakan untuk menampilkan italic text (teks miring) . font-style memiliki tiga nilai (value) 

normal = menampilkan teks secara normal



italic = menampilkan teks miring



oblique = hampir sama dengan italic , tapi sedikit browser yang mendukung

p{ font-style:italic; }

Font Size. Property font-size digunakan untuk menentukan ukuran teks. Penentuan ukuran teks dalam webdesign menjadi hal yang sangat penting. Property ini memiliki beberapa jenis standar ukuran teks yang ditampilkan yaitu :


VI- 6

Pixel

p{ font-size:16px; }

Contoh diatas mengizinkan browser firefox, chrome dan safari untuk me-resize ukuran teks, sedankan untuk Internet Explorer tidak

Em. Ukuran standar 1 em = 16 px (pixel)

p{ font-size:1em; }

em adalah standar ukuran font yang dianjurkan oleh W3C, karena dapat mencegah masalah resize ukuran font oleh browser.

Contoh Penggunaan Styling Font Penggunaan Styling Font <style type="text/css"> h1 { font-family:Arial, Halvetica, sans-serif; font-size:16px }
teks ini berukuran 16 px atau 1 em

6.6. STYLING LINKS

Link memiliki beberapa kondisi , tergantung dengan yang dilakukan oleh user. Kondisi tersebut yaitu 

a:link = kondisi link yang biasa belum dilakukan apapun oleh user



a:visited = kondisi link yang sudah pernah di kunjungi oleh user



a:hover = kondisi link pada saat user mengarahkan mouse (cursor)



a:active = kondisi pada beberapa saat setelah user mengklik link.

Semua kondisi diatas bisa kita jadikan sebagai selector

a:link { color : blue; } a:visited { color:red; } a:hover { color:green; } a:active { color:brown; }


VI- 7

Hal – hal yang sering dilakukan untuk memanfaatkan styling links adalah : Text decoration. Biasanya sering digunakan untuk menambahkan dan menghilangkan secara otomatis underline pada link, tergantung kondisinya

a:link { text-decoration:none; } a:visited { text-decoration:none; } a:hover { text-decoration:underline; } a:active { text-decoration:underline; }

Background color. Sering juga digunakan untuk memberikan efek warna latar yang berbeda tergantung kondisinya

a:link {background-color:#999999;} a:visited {background-color:#FFFF00;} a:hover {background-color:#00FF66;} a:active {background-color:#00FF66;}

Contoh Penggunaan Styling LINK Penggunaan Styling LINK <style type="text/css"> a:link {background-color:#999999;} a:visited {background-color:#FFFF00;} a:hover {background-color:#00FF66;} a:active {background-color:#00FF66;} Belajar CSS

6.7. STYLING LIST

Dalam HTML terdapat dua tipe list 

UL (unordered list) = list yang menandakan setiap itemnya dengan bullet



OL (ordered list) = list yang menandakan setiap itemnya dengan nomor atau huruf

ul.a ul.b ol.c ol.d

{ { { {

list-style-type:circle; } list-style-type:square; } list-style-type:upper-roman; } list-style-type:lower-alpha;


VI- 8

Tabel 6.1 Nilai untuk UL pada property list-style-type

Nilai

Deskripsi

none

Tidak ada pemberian tanda item

disc

Tanda default, lingkaran yang di isi dengan warna hitam semua

circle

Tanda dengan gambar lingkaran kosong

square

Tanda dengan gambar persegi yang di isi dengan warna hitam

Tabel 6.2 Nilai untuk OL pada property list-style-type

Nilai

Deskripsi

armenian

Penomoran dengan angka Armenian kuno

Decimal

Penomoran dengan angka decimal biasa (1,2,3,dll)

decimal-leading-zero

Penomoran dengan angka decimal biasa dan ditambahkan angka 0 di depannya (01,02,03,dll)

georgian

Penomoran dengan angka Georgian kuno (an, ban, gan, dll)

lower-alpha

Penomoran dengan huruf kecil (a,b,c,dll)

lower-greek

Penomoran dengan menggunakan symbol – symbol (alpha, beta, gamma, dll

lower-latin

Penomoran dengan menggunakan huruf latin (a,b,c,d,e,dll)

lower-roman

Penomoran dengan menggunakan huruf romawi (i,ii,iii,iv,dll)

upper-alpha

Penomoran dengan huruf besar (A,B,C , dll)

upper-latin

Penomoran dengan huruf besar dalam latin (A,B,C,dll)

upper-roman

Penomoran dengan huruf besar dalam romawi (I,II,III,IV,dll)

Image list Item. Untuk menjadikan image sebagai list item (penanda dari setiap item) kita menggunakan property list-style-image

ul{ list-style-image: url('nama_image'); }

Property singkat. Kita bisa merangkap tiga jenis property untuk list styling yaitu list-style-type, list-styleposition, list-style-image dengan cara memanggil property list-style. Untuk menentukan value-nya seperti di bawah ini :

Gunakan

image

yang

ada

di

file

pendukung.

Yang

bisa

di

download

di

http://www.codwebsystem.com/file_pendukung.rar


VI- 9

Contoh Penggunaan Styling LIST Penggunaan Styling LIST <style type="text/css"> ul.a { list-style-type:square; } ul.b { list-style:lower-alpha inside url('list.png'); ol.a { list-style-type:upper-roman; } ol.b { list-style-type:lower-alpha; }

class=a> class=b> class=a> class=b>

UL UL OL OL

KE-1 KE-2 KE-1 KE-2

item item item item

1 1 1 1

item item item item

font-size:2em; }

2 2 2 2

6.8. STYLING TABLES

Untuk mempercantik tampilan table, kita bisa memanfaat property dan value yang telah disediakan dalam css.

Collapse Border. Property border-collapse digunakan untuk menentukan apakah kita akan menggunakan garis border table yang model satu garis (collapse) atau model default (dua garis atau separate).

table { border-collapse:collapse; } table, th, td { border:1px solid black; }

Table Height and Weight. Untuk menentukan ukuran panjang dan lebar table kita bisa menggunakan property height = panjang dan weight = lebar.

table { width:500px; } th, td { height:50px; }

Text Alignment. Property text-align berfungsi untuk menentukan perataan teks dalam table secara horizontal. Terdapat satu property lagi yang menangani perataan teks secara vertical yaitu vertical-align yang berisikan value seperti, bottom, top, middle


VI- 10

th, td { height:50px; text-align:center; vertical-align:middle; }

Table Padding Untuk memberikan jarak antara isi dan border gunakan property padding.

th, td { padding:15px; }

Table Color Untuk memberikan warna, ukuran dan jenis garis border gunakan property border. Untuk memberikan warna latar gunakan property background. Sedangkan unuk memberikan warna font gunakan property color

table { border:1px solid #ffffff; } td {color:#00000; background-color:blue; }

Contoh Penggunaan Styling TABLES Penggunaan Styling Tables <style type="text/css"> table { width:800px; border-collapse:collapse; border:1px solid green; } th { background-color:#999999; color:#fffff; }
UL KE-1
item 1

item 2

UL KE-2
item 1

item 2

OL KE-1
item 1

item 2

OL KE-2
item 1

item 2

6.9. CSS BOX MODEL

Box (kotak) dalam CSS sangat berkaitan erat dengan design dan layout. Property yang terlibat dalam hal ini adalah : 

margin = digunakan untuk menentukan jarak dengan box yang lain dari bagian luar



padding = digunakan untuk menentukan jarak content (isi) dengan tepi / batas box


VI- 11



border = digunakan untuk menentukan warna dan ukuran batasan / tepi box

Ilustrasi dari property di atas adalah sebagai berikut :

margin border padding

content

Ukuran lebar dari sebuah box dalam CSS, terhitung dari lebar content + lebar padding kiri dan kanan + lebar border kiri dan kanan + lebar margin kiri dan kanan. Begitu juga dengan menghitung ukuran panjang.

Contoh :

width:200px; /* lebar content */ padding:10px; /* lebar padding, jumlah dikiri dan kanan = 20px */ border:5px solid gray; /* lebar border, kiri dan kanan = 10px */ margin:10px; /* lebar margin, kiri dan kanan = 20px */

Lebar content

200px

Padding (kiri dan kanan)

20px

Border (kiri dan kanan)

10px

Margin (kiri dan kanan)

20px

Lebar dari sebuah kotak (box)

250px

Rumus umum untuk menghitung Lebar kotak (box) dalam CSS

Total lebar = width + lebar padding (kiri&kanan) + lebar border (kiri&kanan) + lebar margin (kiri&kanan)

Rumus umum untuk menghitung Panjang kotak (box) dalam CSS

Total Panjang

= height + lebar padding (atas&bawah) + lebar border (atas&bawah) + lebar margin

(atas&bawah)


VI- 12

Contoh Penggunaan BOX MODEL Penggunaan Box Model <style type="text/css"> #box1 { height:100px; width:100px; background-color:#000099; padding:10px; margin:10px; float:left; } #box2 { height:100px; width:100px; background-color:#FF0000; padding:10px; margin:10px; float:left; }
Box 1

Box 2

6.10.

CSS BORDER

Border Style. Property border-style berfungsi untuk menentukan jenis border yang akan digunakan . Di bawah ini adalah value dari property tersebut

Gambar 6.1 Nilai Property Border-Style

Border Width. Property border-width digunakan untuk menentukan ukuran lebar border. Untuk menentukan value bisa menggunakan pixel atau menggunakan tiga pilihan ukuran yaitu : thin, medium, or thick.


VI- 13

p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }

Border Color. Property border-color digunakan untuk menentukan warna border yang akan digunakan. Untuk menentukan warna kita bisa menggunakan dengan 3 cara penentuan warna : 

name = nama warna , contohnya “red”



RGB = menentukan warna dengan kombinasi 3 warna dasar , contoh “rgb(255,255,0)”



Hex = menentukan warna dengan angka hexadecimal , contoh “#00CC33”

p.one{ border-style:solid; border-width:5px; border-color:#00CC33; } p.two { border-style:solid; border-width:medium; border-color:rgb(128,64,0) }

Dalam CSS kita bisa membuat perbedaan border di setiap sisinya, baik dari warna, jenis dan ukuran border.

P { border-top-style:dashed; border-right-style:dotted; border-bottom-style:groove; border-left-style:inset; }

Dari contoh di atas sebenarnya kita bisa meringkas seperti berikut

p { border-style: dashed dotted groove inset; }

border-style: dashed dotted groove inset 

tipe border bagian atas = dashed



tipe border bagian kanan = dotted



tipe border bagian bawah = groove



tipe border bagian kiri = inset


VI- 14

border-style: dashed dotted groove 







tipe border bagian bawah = groove

border-style: dashed dotted 







border-style: dashed



Semua sisi bertipe border = dashed

cara penentuannya seperti di atas dimulai dari atas, kanan, bawah, dan kiri seperti perputaran arah jarum jam.

Border. Property border digunakan untuk menyingkat penulisan property yang menangani tentang border.

border:5px solid blue;

5px = border-width solid = border-style blue = border-color

Bentuk utama dari property adalah :

border: border-width


border-style

border-color ;

VI- 15

Contoh Penggunaan Border Penggunaan Border <style type="text/css"> p.one { border-top-style:dashed; border-top-color:#00FF66; border-top-width:thick; border-right-style:dotted; border-right-color:#0033CC; border-right-width:medium; border-bottom-style:double; border-bottom-color:#0099CC; border-bottom-width:5px; border-left-style:groove; border-left-color:#996600; border-left-width:thin; } p.two { border-style: dashed dotted double groove; border-color: #00FF66 #0033CC #0099CC #996600; border-width: thick medium 5px thin; }
Border One

Border two

6.11.

CSS OUTLINE

Outline adalah garis luar dari sebuah element (posisinya di luar dari border atau diatas border).

Outline Color. Property outline-color digunakan untuk menentukan warna outline

Outline Style. Property outline-style digunakan untuk menentukan tipe outline yang akan digunakan

Outline Width. Property outline-width digunakan untuk menentukan ukuran lebar outline

p.outline { outline-color:#00CC00; outline-style:double; outline-width:thick; }

Outline. Property outline digunakan untuk menyingkat dari semua property outline di atas. Bentuk utamanya adalah

outline: outline-color


outline-style

outline-width ;

VI- 16

Contoh Penggunaan Outline Penggunaan Outline <style type="text/css"> p.outline_one { outline-color:#00CC00; outline-style:double; outline-width:thick; } p.outline_two { outline:#009999 groove thin; }
Outline

Outline

6.12.

CSS MARGIN

Margin adalah bagian/area di atas dari border pada sebuah box, seperti yang telah di gambarkan sebelumnya. Margin juga memiliki kelebihan untuk bisa membuat perbedaan pada setiap sisi box , seperti halnya property yang lain.

margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

Property pada contoh di atas bisa diringkas dengan menggunakan property margin , bentuk utamanya adalah

margin: margin-top

margin-right

margin-bottom

margin-left ;

Contoh :

p { margin : 20px 30px 20px 30px;

}

20px = ukuran margin top 30px = ukuran margin right 20px = ukuran margin bottom 30px = ukuran margin left


VI- 17

p { margin : 20px 30px 20px;

}

20px = ukuran margin top 30px = ukuran margin right 20px = ukuran margin bottom

p { margin : 20px 30px;

}

20px = ukuran margin top 30px = ukuran margin right

p { margin : 20px;

}

20px = ukuran margin dari semua sisi box

Contoh Penggunaan Margin Penggunaan Margin <style type="text/css"> p { background-color: #009999; } p.margin { margin:100px 50px; }
Paragraf ini tidak meggunakan margin.

Paragraf ini menggunakan margin

6.13.

CSS PADDING

Padding adalah area yang posisinya di atas dari content dan di bawah border, seperti yang telah digambarkan sebelumnya. Margin juga memiliki kelebihan untuk bisa membuat perbedaan pada setiap sisi box , seperti halnya property yang lain.

padding-top:100px; padding-bottom:100px; padding-right:50px; padding-left:50px;


VI- 18

Property pada contoh di atas bisa diringkas dengan menggunakan property padding , bentuk utamanya adalah

padding: padding-top padding-right padding-bottom padding-left ;

Contoh :

p { padding : 20px 30px 20px 30px;

}

20px = ukuran padding top 30px = ukuran padding right 20px = ukuran padding bottom 30px = ukuran padding left

p { padding : 20px 30px 20px;

}

20px = ukuran padding top 30px = ukuran padding right 20px = ukuran padding bottom

p { padding : 20px 30px;

}

20px = ukuran padding top 30px = ukuran padding right

p { padding : 20px;

}

20px = ukuran padding dari semua sisi box


VI- 19

Contoh Penggunaan PADDING Penggunaan Padding <style type="text/css"> p { background-color: #009999; } p.margin { padding:100px 50px; }
Paragraf ini tidak meggunakan padding.

Paragraf ini menggunakan padding

LATIHAN

Ikuti beberapa perintah di bawah ini untuk mengerjakan tugas-tugas pada minggu ini. 

Cari materi pendukung berupa text, image dan table-tabel yang relevant di internet dan kemudian letakkan minimal ke sebuah file HTML.



Gunakan sintaks ID dan Class untuk tugas-tugas yang diperintahkan



Desain background dari file HTML tersebut dengan menggunakan CSS



Desain halaman HTML secara keseluruhan dengan menggunakan CSS, atur border, outline, margin dan padding dari halaman HTML tersebut



Desain text yang ada dengan menggunakan CSS, atur color, alignment, decoration, transformation dan indentation dari text-text tersebut.



Desain text yang ada dengan menggunakan CSS, atur font, style dan size dari masing-masing text yang ada.



Desain links dari text yang ada dengan menggunakan CSS, atur link untuk visited, hover dan activenya.



Desain list dari text yang ada dengan menggunakan CSS, atur unordered dan ordered dari text yang ada.



Desain table yang ada dengan menggunakan CSS, atur border, height, weight, alignment, padding dan color dari table tersebut.



Tunjukkan hasil kerja yang anda lakukan kepada asisten.


VI- 20

BAB 6 CSS 6.1. CSS SYNTAX. Syntax CSS memiliki dua bagian utama yaitu, selector dan deklasi

Recommend Documents

teks ini huruf capital semua

teks ini berukuran 16 px atau 1 em