CSS Cascading Style Sheet

Ukuran: px

Mulai penontonan dengan halaman:

Download "CSS Cascading Style Sheet"

Hadi Salim
7 tahun lalu
Tontonan:

1 CSS Cascading Style Sheet

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 <head> </head> <link rel="stylesheet" type="text/css" href= namafile.css" /> Biasa dipakai jika beberapa halaman akan menggunakan style yang sama.

4 Menambahkan CSS ke dalam HTML 2. Internal Style Sheets diletakkan di antara <head> </head> <style type= text/css > letakkan css di sini </style> 3. Inline Style diletakkan di dalam elemen HTML <h1 style= color: #0099ff;font-family: Verdana; size: 18pt; >

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 <H1> 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 <p class= judul > </p> 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 <p id= header > </p> Artinya paragraf tersebut menggunakan aturan yang ditetapkan dalam id selector header

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

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

12 CSS Text Properties (1) CSS Text properties digunakan untuk mengatur tampilan text. Misalnya menentukan warna text, perataan text dan dekorasi text. Property Description Values color Menentukan warna text color letter-spacing Menentukan jarak spasi antar huruf normal length unit text-align Perataan text dalam sebuah element left right center justify text-decoration Menambahkan dekorasi ke dalam text none underline overline line-through blink

13 CSS Text Properties (2) text-indent Memberikan indent pada baris pertama length % text-transform Menentukan bentuk huruf none capitalize uppercase lowercase white-space Menentukan bagaimana white space akan ditangani normal pre nowrap word-spacing Menentukan jarak spasi antar kata normal length

14 CSS Font Properties (1) CSS font properties digunakan untuk mengtur tampilan huruf. Misalnya menentukan jenis huruf, ukuran huruf, ketebalan dan style huruf. Property Description Values font Sebuah property singkat untuk menyeting semua properti untuk font dalam sebuah deklarasi font-style font-variant font-weight font-size/lineheight font-family caption icon menu message-box small-caption status-bar font-family Menentukan jenis huruf family-name generic-family

15 CSS Font Properties (2) font-size Menentukan ukuran huruf xx-small x-small small medium large x-large xx-large smaller larger length % font-style Menentukan style huruf normal italic oblique font-weight Menentukan ketebalan huruf normal bold bolder lighter

16 CSS Border Properties (1) CSS border properties digunakan untuk mengatur border di setiap elemen. Misalnya saja warna border, ketebalan border dan style border. Property Description Values border border-bottom Digunakan untuk menentukan property border(atas, kiri, kanan, bawah) dalam satu deklarasi saja Digunakan untuk menentukan property border bagian bawah dalam satu deklarasi saja border-width border-style border-color border-bottom-width border-style border-color border-bottom-color Menentukan warna border bawah border-color border-bottom-style Menentukan style border bawah border-style border-bottom-width Menentukan lebar border bawah thin medium thick length

17 CSS Border Properties (2) border-color Menentukan warna keempat border color border-left Digunakan untuk menentukan property border bagian kiri dalam satu deklarasi saja border-left-width border-style border-color border-left-color Menentukan warna border kiri border-color border-left-style Menentukan style border kiri border-style border-left-width Menentukan lebar border kiri thin medium thick length border-right Digunakan untuk menentukan property border bagian kanan dalam satu deklarasi saja border-right-width border-style border-color border-right-color Menentukan warna border kanan border-color border-right-style Menentukan style border kanan border-style

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

19 CSS Margin Properties CSS margin properties digunakan untuk mengatur jarak (spasi) di sekitar elemen. Property Description Values margin Mensatur margin properti untuk kempat sisi (atas, kanan, bawah, kiri) sekaligus margin-bottom Mengatur margin bawah auto length % margin-left Mengatur margin kiri auto length % margin-right Mengatur margin kanan auto length % margin-top margin-right margin-bottom margin-left margin-top Mengatur margin atas Auto / length / %

20 CSS Padding Properties CSS padding properties digunakan untuk menentukan spasi antara border elemen dengan isi element. Property Description Values padding Menentukan empat padding sebuah elemen (atas, kanan, bawah, kiri) sekaligus padding-bottom Menentukan padding bawah sebuah elemen length % padding-left Menentukan padding kiri sebuah elemen length % padding-right Menentukan padding kanan sebuah elemen length % padding-top Menentukan padding atas sebuah elemen length % padding-top padding-right padding-bottom padding-left

21 CSS List Properties (1) CSS list properties digunakan merubah jenis list, memberi gambar sebagai pengganti bullet, dll. Property Description Values list-style Digunakan untuk menentukan semua list properties sekaligus. list-style-image Menetapkan image sebagai penanda list none url list-style-type list-styleposition list-styleimage list-style-position Menentukan tempat penanda list item inside outside

22 CSS List Properties (2) list-style-type Menentukan tipe penanda list item none disc circle square decimal decimalleading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin

dokumen-dokumen yang mirip

XHTML dan Dasar-dasar CSS XHTML

XHTML dan Dasar-dasar CSS XHTML XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto Email: rosa_if_itb_01@yahoo.com Blog: http://udinrosa.wordpress.com Website: http://www.gangsir.com XHTML Extensible Hypertext Markup Language