CSS Cascading Style Sheet Wahyu Pramusinto, S.Kom Universitas Budi Luhur.

Presentasi berjudul: "CSS Cascading Style Sheet Wahyu Pramusinto, S.Kom Universitas Budi Luhur."— Transcript presentasi:

1 CSS Cascading Style Sheet Wahyu Pramusinto, S.Kom Universitas Budi Luhur

2 Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style yang akan digunakan pada sebuah website. Dapat digunakan untuk  Merubah ukuran font  Merubah warna background  Mengatur perataan paragraf  dll

3 Menambahkan CSS ke dalam HTML 1. External Style Sheets External style sheets merupakan dokumen css yang disimpan dalam file berbeda dengan file HTML. File ini berekstension.css Untuk menyertakan file css, letakkan tag berikut ke dalam … Biasa dipakai jika beberapa halaman akan menggunakan style yang sama.

4 Menambahkan CSS ke dalam HTML 2. Internal Style Sheets diletakkan di antara … letakkan css di sini 3. Inline Style diletakkan di dalam elemen HTML

5 Istilah Dalam CSS Style rule Cascading style sheet merupakan kumpulan aturan yang mendefinisikan style dari document. Sebagai contoh kita bisa membuat aturan style yang menentukan bahwa semua di tampilkan dengan warna biru. selector { property1: value; property2:value,...} H1{ color:green; background-color:orange} Style sheets terdiri dari dua bagian: 1. Selector Bagian pertama sebelum tanda “{}” disebut selector 2. Declaration Terdiri dari property dan value Antara property yang satu dan yang lainnya dipisahkan dengan tanda ; (titik koma)

6 Komentar pada CSS Komentar biasa digunakan untuk memberi keterangan pada css yang dibuat. Komentar tidak akan ditampilkan pada browser Komentar dalam CSS dibuat dengan /* tulis komentar di sini */

7 Class Selector Class selector  Diawali dengan tanda titik (.) dan diikuti nama class .namakelas {….}  Digunakan agar sebuah objek bisa menggunakan deklarasi CSS tersebut  Misalnya …  Artinya paragraf tersebut menggunakan aturan yang ditetapkan dalam class selector judul

8 ID Selector Class selector  Diawali dengan tanda titik (#) dan diikuti nama id  #namaid {….}  Digunakan agar sebuah objek bisa menggunakan deklarasi CSS tersebut dan biasanya bersifat unik dalam sebuah halaman  Misalnya …  Artinya paragraf tersebut menggunakan aturan yang ditetapkan dalam id selector header

9

10 CSS Background Properties (1) PropertyDescriptionValues backgroundProperty yang digunakan untuk menyeting semua backgroung property dalam sebuah deklarasi saja. background-color background-image background-repeat background-attachment background-position background-attachmentMenentukan apakah background gambar fixed atau scroll scroll fixed background-colorMenentukan warna background color-rgb color-hex color-name transparent CSS background properties digunakan untuk mengatur tampilan background pada sebuah elemen. Misalnya menentukan warna background, membuat background berupa gambar, dan menentukan posisi background.

11 CSS Background Properties (2) background-imagemenentukan gambar sebagai background url none background-positionMenentukan posisi awal background yang berupa gambar top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos background-repeatMenentukan bagaimana background yang berupa gambar akan ditampilkan secara berulang repeat repeat-x repeat-y no-repeat

12 CSS Text Properties (1) PropertyDescriptionValues colorMenentukan warna textcolor letter-spacingMenentukan jarak spasi antar hurufnormal length unit text-alignPerataan text dalam sebuah elementleft right center justify text-decorationMenambahkan dekorasi ke dalam textnone underline overline line-through blink CSS Text properties digunakan untuk mengatur tampilan text. Misalnya menentukan warna text, perataan text dan dekorasi text.

13 CSS Text Properties (2) text-indentMemberikan indent pada baris pertama length % text-transformMenentukan bentuk hurufnone capitalize uppercase lowercase white-spaceMenentukan bagaimana white space akan ditangani normal pre nowrap word-spacingMenentukan jarak spasi antar katanormal length

14 CSS Font Properties (1) PropertyDescriptionValues fontSebuah property singkat untuk menyeting semua properti untuk font dalam sebuah deklarasi font-style font-variant font-weight font-size/line- height font-family caption icon menu message-box small-caption status-bar font-familyMenentukan jenis huruffamily-name generic-family CSS font properties digunakan untuk mengtur tampilan huruf. Misalnya menentukan jenis huruf, ukuran huruf, ketebalan dan style huruf.

15 CSS Font Properties (2) font-sizeMenentukan ukuran huruf xx-small x-small small medium large x-large xx-large smaller larger length % font-styleMenentukan style hurufnormal italic oblique font-weightMenentukan ketebalan hurufnormal bold bolder lighter

16 CSS Border Properties (1) PropertyDescriptionValues borderDigunakan untuk menentukan property border(atas, kiri, kanan, bawah) dalam satu deklarasi saja border-width border-style border-color border-bottomDigunakan untuk menentukan property border bagian bawah dalam satu deklarasi saja border-bottom-width border-style border-color border-bottom-colorMenentukan warna border bawahborder-color border-bottom-styleMenentukan style border bawahborder-style border-bottom-widthMenentukan lebar border bawahthin medium thick length CSS border properties digunakan untuk mengatur border di setiap elemen. Misalnya saja warna border, ketebalan border dan style border.

17 CSS Border Properties (2) border-colorMenentukan warna keempat bordercolor border-leftDigunakan untuk menentukan property border bagian kiri dalam satu deklarasi saja border-left-width border-style border-color border-left-colorMenentukan warna border kiriborder-color border-left-styleMenentukan style border kiriborder-style border-left-widthMenentukan lebar border kirithin medium thick length border-rightDigunakan untuk menentukan property border bagian kanan dalam satu deklarasi saja border-right-width border-style border-color border-right-colorMenentukan warna border kananborder-color border-right-styleMenentukan style border kananborder-style

18 CSS Border Properties (3) border-right-widthMenentukan lebar border kananthin medium thick length border-styleMenentukan style dari keempat border sekaligus None / hidden / dotted / dashed / solid / double / groove / ridge /inset / outset border-topDigunakan untuk menentukan property border bagian atas dalam satu deklarasi saja border-top-width border-style border-color border-top-colorMenentukan warna border atasborder-color border-top-styleMenentukan style border atasborder-style border-top-widthMenentukan ukuran border atasthin / medium / thick length border-widthMenentukan ukuran dari keempat border sekaligus thin / medium / thick length

19 CSS Margin Properties CSS margin properties digunakan untuk mengatur jarak (spasi) di sekitar elemen. PropertyDescriptionValues marginMensatur margin properti untuk kempat sisi (atas, kanan, bawah, kiri) sekaligus margin-top margin-right margin-bottom margin-left margin-bottomMengatur margin bawahauto length % margin-leftMengatur margin kiriauto length % margin-rightMengatur margin kananauto length % margin-topMengatur margin atasAuto / length / %

20 CSS Padding Properties CSS padding properties digunakan untuk menentukan spasi antara border elemen dengan isi element. PropertyDescriptionValues paddingMenentukan empat padding sebuah elemen (atas, kanan, bawah, kiri) sekaligus padding-top padding-right padding-bottom padding-left padding-bottomMenentukan padding bawah sebuah elemenlength % padding-leftMenentukan padding kiri sebuah elemenlength % padding-rightMenentukan padding kanan sebuah elemenlength % padding-topMenentukan padding atas sebuah elemenlength %

21 CSS List Properties (1) CSS list properties digunakan merubah jenis list, memberi gambar sebagai pengganti bullet, dll. PropertyDescriptionValues list-styleDigunakan untuk menentukan semua list properties sekaligus. list-style-type list-style- position list-style- image list-style-imageMenetapkan image sebagai penanda listnone url list-style-positionMenentukan tempat penanda list iteminside outside

22 CSS List Properties (2) list-style-typeMenentukan tipe penanda list itemnone disc circle square decimal decimal- leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin