/* styling paragraf, teks paragraf berwarna biru dan rata tengah */ p {color:blue;text-align:center;}

Transkripsi

1 II CSS INTRO CSS (Cascading Style Sheet) adalah bahasa untuk mendefinisikan bagaimana suatu dokumen dan elemen pada suatu dokumen ditampilkan oleh browser. File CSS memiliki ekstensi.css SYNTAX SYNTAX (tag) pada CSS memiliki dua bagian, yaitu selector dan declaration. Selector adalah elemen / HTML tag yang ingin di atur tampilannya, dan setiap declaration berisi property dan nilainya. COMMENT pada CSS menggunakan tag yang berbeda dari HTML, pada CSS komentar dimulai dengan /* dan diakhiri dengan */ berikut contoh penulisan tag CSS /* styling paragraf, teks paragraf berwarna biru dan rata tengah */ p {color:blue;text-align:center; SELECTOR ELEMEN Selector digunakan untuk styling elemen pada HTML, contoh lihat bagian syntax. ID Selector digunakan untuk styling satu elemen unik pada dokumen HTML. ID Selector pada CSS dinotasikan dengan tanda # /* pengaturan style berikut akan diaplikasikan pada elemen dengan id="para1" */ #para1 {color:blue;text-align:center; CLASS Selector digunakan untuk styling satu elemen unik pada dokumen HTML. CLASS Selector pada CSS dinotasikan dengan tanda titik (. ) /* pengaturan style berikut akan diaplikasikan pada seluruh elemen dengan class="center" */.center {text-align:center; /* pengaturan style berikut akan diaplikasikan pada seluruh elemen p dengan class="center" */ p.center {text-align:center; II - 1

2 CSS HTML APPLICATION Ada tiga cara untuk mengaplikasikan CSS kedalam dokumen HTML yaitu inline style, internal style sheet dan external style sheet. INLINE STYLE adalah cara pengaplikasian CSS langsung pada atribut style sebuah elemen HTML, namun cara ini tidak disarankan dikarenakan akan lebih sulit melakukan perubahan style keseluruhan. Berikut contoh inline style pada elemen paragraf. <h1 style="font-family:verdana;">judul pertama menggunakan h1</h1> <p style="font-family:arial;color:red;font-size:20px;">ini paragraf</p> INTERNAL STYLE digunakan ketika sebuah dokumen HTML memiliki tampilan yang unik dari dokumen lainnya, pendefinisian CSS pada metode terletak pada bagian <head> dari dokumen HTML dengan menggunakan tag <style> seperti contoh berikut; <head> <style type="text/css"> background-color:yellow; p{color:#333; hr {color:sienna; </style> </head> EXTERNAL STYLE digunakan ketika sebuah style diaplikasikan untuk banyak dokumen HTML, dengan external style sheet kita dapat merubah tampilan seluruh halaman web hanya dengan merubah satu file.css saja, dan setiap dokumen HTML harus dihubungkan ke file.css menggunakan tag <link> pada bagian <head> <head><link rel="sylesheet" type="text/css" href="mystyle.css"></head> External style sheet dapat ditulis melalui text editor apapun dan dalam penulisannya tidak dibenarkan menuliskan tag HTML apapun. External style sheet harus disimpan dengan ekstensi.css berikut contoh penulisan CSS untuk file mystyle.css background-color:yellow; p{color:#333; hr {color:sienna; Jika pada sebuah dokumen HTML, CSS diaplikasikan dengan ketiga cara diatas secara bersamaan pada satu elemen, maka urutan yang lebih diutamakan untuk diaplikasikan adalah inline style, internal style dan yang terakhir external style. STYLING BACKGROUND CSS BACKGROUND PROPERTIES digunakan untuk mendefinisikan efek background pada sebuah elemen, berikut CSS properties yang digunakan untuk styling background : BACKGROUND COLOR digunakan untuk mendefinisikan warna latar belakang elemen; background-color:#b0c4de; h1{background-color:white; p{background-color:rgba(0,0,0,0.5); II - 2

3 BACKGROUND IMAGE digunakan untuk mendefinisikan gambar yang akan digunakan sebagai latar belakang elemen; background-image:url('paradiso.png'); BACKGROUND REPEAT digunakan untuk melakukan pengulangan background baik secara vertikal ataupun horizontal background-image:url('gradient.png'); background-repeat:repeat-x; /* opsi value untuk properti repeat : repeat-x, repeat-y, no-repeat */ BACKGROUND POSITION digunakan untuk mengatur posisi gambar background background-image:url('gradient.png'); background-repeat:no-repeat; background-position:right top; /* opsi value untuk properti position : x% y%, xpos ypos */ BACKGROUND ATTACHMENT digunakan untuk mengatur sifat scrolling background background-image:url('gradient.png'); background-repeat:no-repeat; background-attachment:fixed; /* opsi value untuk properti attachment : scroll, fixed, local */ BACKGROUND SHORTHAND merupakan penyingkatan penulisan sintaks CSS, berikut contoh shorthand pada sintaks background; background:#fff url('paradiso.png') no-repeat right top; STYLING TEXT color:blue; /* untuk mengatur warna teks */ text-align: left; /* untuk mengatur perataan teks, opsi value : left, right, center, justify */ a{ text-decoration: none; /* untuk mengatur dekorasi teks, opsi value : none, underline, line-through, overline */ text-transform: capitalize; /* fungsi change case, p{ opsi value : uppercase, lowercase, capitalize */ text-indent:50px; /* mengatur indentasi baris pertama sebuah teks */ II - 3

4 STYLING FONTS /* mendefinisikan jenis huruf yang digunakan*/ font-family:"times New Roman", Times, serif; font-size:11px; /* untuk mengatur ukuran huruf */ h1{ font-variant: small-caps; /* mengubah teks menjadi kapital dan lebih kecil dari ukuran biasa */ font-weight: bolder; /* mengatur ketebalan teks opsi value : normal, bold, bolder, lighter */ STYLING LINK Berbeda dengan styling text, pada link terdapat beberapa moment yaitu normal, setelah diklik ( visited ), ketika dilalui cursor ( hover ) dan ketika sedang diklik ( active ), pada css penulisan moment diawali dengan titik dua ( : ) diikuti oleh nama moment setelah tag a:link{text-decoration:none;font-size:11px;color:#000; a:hover{text-decoration:underline;font-size:13px; a:active{color:red; a:visited{color:#333; STYLING LIST ol{list-style-type:decimal-leading-zero; /* mengatur tanda list item opsi value (ol):none, upper-roman, lower-alpha, decimal, dll opsi value (ul):none, disc, square */ ul{list-style-image:url('ownbullet.png'); /* menggunakan gambar sebagai tanda list item STYLING TABLE table, th, td{border: thin solid #a7c942; /* mengatur beberapa elemen yang memiliki kesamaan style pada border opsi value : thin, thick, 1px (ukuran dalam px) opsi value : solid, dashed, dotted, none opsi value : warna html (kode warna, nama warna, kode rgb) */ table{ border-collapse:collapse; /* border tabel menjadi satu garis */ width:100%; /* mengatur lebar tabel */ II - 4

5 th{height:50px; background-color:#a7c942; /* warna header table */ td{vertical-align:midle; padding:5px; /* atur jarak teks dari border */ tr.ganjil{background-color:#98bf21; /* warna baris dgn class ganjil */ Berikut tabel yang dihasilkan dari kode CSS diatas; BOX MODEL Seluruh elemen HTML dapat dianggap sebagai box, box model digunakan ketika perancangan dan layout. Box model diilustrasikan sebagai sebuah kotak yang membungkus elemen HTML dan sebuah box memiliki css properties margin, border, padding dan konten (isi sebenarnya). Berikut ilustrasi box model : MARGIN adalah jarak kosong antara border elemen dengan elemen lainnya. BORDER adalah garis tepi yang mengelilingi padding dan content. PADDING adalah jarak kosong antara border dengan content. CONTENT adalah isi dari box, tempat tampilnya teks dan gambar. width:250px; /* lebar content box 250 pixel */ margin:10px; /* lebar box ditambah 20px margin kiri kanan */ border:2px solid green; /* lebar box ditambah 4px border kiri kanan */ padding:5px; /* lebar box ditambah 10px padding kiri kanan */ /* total lebar box : 284px (250px + 20px + 4px + 10px) */ II - 5

6 GROUPING SELECTOR GROUPING SELECTOR adalah penggabungan beberapa elemen HTML yang memiliki style yang sama, contoh grouping selector dapat dilihat pada contoh kode di bagian styling table. CSS DISPLAY & VISIBILITY Properties display mendefinisikan bagiamana suatu elemen ditampilkan, dan properties visibility mendefinisikan apakah elemen harus ditampilkan atau disembunyikan. h1{ visibility:hidden; /* visibility akan tetap mengambil space */ p{ display:none; /* display none tidak akan mengambil space opsi value : inline, block */ li{ display:inline; Pada properti display, terdapat nilai inline dan block, properti ini sangat penting ketika kita membangun layout menggunakan elemen div. display:inline elemen hanya akan mengambil space sebesar yang dibutuhkan, dan tidak memiliki pemisah baris (line break), <span>, <a> adalah contoh dari inline elemen. display:block elemen dapat memanfaatkan/mengambil seluruh space yang tersedia, elemen block juga memiliki pemisah baris (line break) sebelum dan sesudahnya, <h1>, <p>, <div> adalah contoh dari block elemen. Halaman Awal dengan elemen diatur dengan display dan visibility Elemen dengan visibility di set hidden (hide) Elemen dengan display di set none (remove) II - 6

7 CSS POSITIONING Dengan CSS positioning kita dapat mendefinisikan posisi sebuah elemen, dapat juga menempatkan elemen dibelakang elemen lain dan mendefinisikan bagaimana elemen ditampilkan ketika isinya lebih besar dari kontainernya. Pada dasarnya setiap elemen HTML akan ditampilkan sebagaimana alur halaman HTML dibuat. FIXED POSITIONING merupakan pengaturan posisi elemen dengan titik kait browser window, elemen dengan position fixed, oleh dokumen dan elemen lain posisinya akan dianggap seakan-akan tidak ada. #fb-topbar{position:fixed;top:0;left:0; /* mengatur posisi elemen */ width:100%;height:30px;background:blue; RELATIVE POSITIONING merupakan pengaturan posisi elemen terkait dengan posisi normalnya, elemen dengan position relative dapat diletakkan berlapis dengan elemen lain dan tetap mengikuti alur normalnya. #content{position:relative;top:50px; ABSOLUTE POSITIONING merupakan pengaturan posisi elemen terkait elemen diatasnya, jika tidak ditemukan elemen diatasnya maka elemen yang dijadikan titik kait adalah <html> h2{position:absolute;top:100px;left:150px; /* mengatur posisi elemen */ OVERLAPPING ELEMENTS terjadi ketika elemen diletakkan diluar alur normalnya. Pendefinisian urutan tampilan elemen diatur dengan perintah z-index:999, dimana nilai terbesar akan tampil diatas elemen lain. FLOATING ELEMENTS Dengan CSS float, sebuah elemen dapat (melayang) diletakkan di kiri ataupun kanan. Float biasa digunakan untuk gambar juga sangat berguna ketika merancang layout. img{float:right;width:150px;height:150px; /* opsi value: right, left */ div.last {clear:both; /* opsi value : left, right, both, none, inherit mendefiniskan tempat kosong yang tidak boleh diletakkan elemen */ CSS TRANSPARENCY Image ditampilkan normal Diatur dengan css img{opacity:0.4; II - 7

8 CSS ATRIBUT SELECTOR Styling atribut merupakan cara styling tanpa menggunakan id ataupun class, dimana kita mendefinisikan tampilan terkait atribut lain pada elemen HTML. input[type="text"]{background-color:yellow; SELENGKAPNYA II - 8