1 II CSS INTRO CSS (Cascading Style Sheet) adalah bahasa untuk mendefinisikan bagaimana suatu dokumen dan elemen pada suatu dokumen ditampilkan oleh b...
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
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.
judul pertama menggunakan h1
ini paragraf
INTERNAL STYLE digunakan ketika sebuah dokumen HTML memiliki tampilan yang unik dari dokumen lainnya, pendefinisian CSS pada metode terletak pada bagian dari dokumen HTML dengan menggunakan tag <style> seperti contoh berikut;
<style type="text/css"> body{background-color:yellow;} p{color:#333;} hr {color:sienna;} 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 pada bagian
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
body{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; body{background-color:#b0c4de;} h1{background-color:white;} p{background-color:rgba(0,0,0,0.5);}
II - 2
BACKGROUND IMAGE digunakan untuk mendefinisikan gambar yang akan digunakan sebagai latar belakang elemen;
body{background-image:url('paradiso.png');} BACKGROUND REPEAT digunakan untuk melakukan pengulangan background baik secara vertikal ataupun horizontal
body{ 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
body{ 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
body{ 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;
body{background:#fff url('paradiso.png') no-repeat right top;}
STYLING TEXT
body{ 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, opsi value : uppercase, lowercase, capitalize */ } p{ text-indent:50px; /* mengatur indentasi baris pertama sebuah teks */ }
II - 3
STYLING FONTS
body{ /* 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
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
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
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; }
