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 <head> <title>penggunaan Syntax CSS</title> p color: #ff0000; font-size:12px; </style> </head> <p> Tulisan ini berwarna merah dan berukuran 12 pixel </p> 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. Modul Pratikum Matakuliah Dasar-dasar Web VI- 2
Contoh Penggunaan ID dan CLASS <head> <title>penggunaan ID dan CLASS</title> #para1 color:blue; font-size:12px;.text color:red; font-size:12px; </style> </head> <div id=para1> Teks pada bagian ini berwarna biru sesuai dengan property pada selector id para1 </div> <div class=text> Teks pada bagian ini berwarna merah sesuai dengan property pada selector class text</div> 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. Modul Pratikum Matakuliah Dasar-dasar Web 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 <head> <title>penggunaan Styling Background</title> body background-color:#000000; #menu background-image:url('bg_menu.png'); background-repeat:repeat-x; height:50px; width:auto; background-attachment:fixed; </style> </head> <div id=menu></div> 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. Modul Pratikum Matakuliah Dasar-dasar Web 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; Modul Pratikum Matakuliah Dasar-dasar Web 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 <head> <title>penggunaan Styling Text</title> h1 color:red; text-align:center; text-transform:uppercase; a text-decoration:none; p text-indent:30px; text-align:justify; </style> </head> <h1> teks ini huruf capital semua </h1> <a href=# > link ini tidak ada underline </a> <p> 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 </p> 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. pfont-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 : Modul Pratikum Matakuliah Dasar-dasar Web 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 <head> <title>penggunaan Styling Font</title> h1 font-family:arial, Halvetica, sans-serif; font-size:16px </style> </head> <h1> teks ini berukuran 16 px atau 1 em </h1> 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; Modul Pratikum Matakuliah Dasar-dasar Web 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 <head> <title>penggunaan Styling LINK</title> a:link background-color:#999999; a:visited background-color:#ffff00; a:hover background-color:#00ff66; a:active background-color:#00ff66; </style> </head> <a href=#> Belajar CSS </a> 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 list-style-type:circle; ul.b list-style-type:square; ol.c list-style-type:upper-roman; ol.d list-style-type:lower-alpha; Modul Pratikum Matakuliah Dasar-dasar Web VI- 8
Tabel 6.1 Nilai untuk UL pada property list-style-type Nilai none disc circle square Deskripsi Tidak ada pemberian tanda item Tanda default, lingkaran yang di isi dengan warna hitam semua Tanda dengan gambar lingkaran kosong 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 Modul Pratikum Matakuliah Dasar-dasar Web VI- 9
Contoh Penggunaan Styling LIST <head> <title>penggunaan Styling LIST</title> ul.a list-style-type:square; ul.b list-style:lower-alpha inside url('list.png'); font-size:2em; ol.a list-style-type:upper-roman; ol.b list-style-type:lower-alpha; </style> </head> <ul class=a> UL KE-1 <li> item 1 </li> <li> item 2 </li> </ul> <ul class=b> UL KE-2 <li> item 1 </li> <li> item 2 </li> </ul> <ol class=a> OL KE-1 <li> item 1 </li> <li> item 2 </li> </ol> <ol class=b> OL KE-2 <li> item 1 </li> <li> item 2 </li> </ol> 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 Modul Pratikum Matakuliah Dasar-dasar Web 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 <head> <title>penggunaan Styling Tables</title> table width:800px; border-collapse:collapse; border:1px solid green; th background-color:#999999; color:#fffff; </style> </head> <ul class=a> UL KE-1 <li> item 1 </li> <li> item 2 </li> </ul> <ul class=b> UL KE-2 <li> item 1 </li> <li> item 2 </li> </ul> <ol class=a> OL KE-1 <li> item 1 </li> <li> item 2 </li> </ol> <ol class=b> OL KE-2 <li> item 1 </li> <li> item 2 </li> </ol> 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 Modul Pratikum Matakuliah Dasar-dasar Web 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 Padding (kiri dan kanan) Border (kiri dan kanan) Margin (kiri dan kanan) Lebar dari sebuah kotak (box) 200px 20px 10px 20px 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 (atas&bawah) = height + lebar padding (atas&bawah) + lebar border (atas&bawah) + lebar margin Modul Pratikum Matakuliah Dasar-dasar Web VI- 12
Contoh Penggunaan BOX MODEL <head> <title>penggunaan Box Model</title> #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; </style> </head> <div id="box1">box 1 </div> <div id="box2">box 2</div> 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. Modul Pratikum Matakuliah Dasar-dasar Web 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 Modul Pratikum Matakuliah Dasar-dasar Web VI- 14
border-style: dashed dotted groove tipe border bagian atas = dashed tipe border bagian kanan = dotted tipe border bagian bawah = groove border-style: dashed dotted tipe border bagian atas = dashed tipe border bagian kanan = 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 ; Modul Pratikum Matakuliah Dasar-dasar Web VI- 15
Contoh Penggunaan Border <head><title>penggunaan Border</title> 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; </style> </head> <p class="one"> Border One </p> <p class="two"> Border two </p> 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 ; Modul Pratikum Matakuliah Dasar-dasar Web VI- 16
Contoh Penggunaan Outline <head><title>penggunaan Outline</title> p.outline_one outline-color:#00cc00; outline-style:double; outline-width:thick; p.outline_two outline:#009999 groove thin; </style> </head> <p class="outline_one"> Outline </p> <p class="outline_two"> Outline </p> 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 Modul Pratikum Matakuliah Dasar-dasar Web 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 <head><title>penggunaan Margin</title> p background-color: #009999; p.margin margin:100px 50px; </style> </head> <p>paragraf ini tidak meggunakan margin.</p> <p class="margin">paragraf ini menggunakan margin</p> 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; Modul Pratikum Matakuliah Dasar-dasar Web 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 Modul Pratikum Matakuliah Dasar-dasar Web VI- 19
Contoh Penggunaan PADDING <head><title>penggunaan Padding</title> p background-color: #009999; p.margin padding:100px 50px; </style> </head> <p>paragraf ini tidak meggunakan padding.</p> <p class="margin">paragraf ini menggunakan padding</p> 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. Modul Pratikum Matakuliah Dasar-dasar Web VI- 20